Develop Reference

How to upload video in Shopify

I want to upload video in my shopify store my code has for loop
<div class="product-slider-show">
<div class="owl-carousel">
{% for image in product.images %}
<div class="swiper-product-image">
<a class="cloud-zoom-gallery sub-image" id="product-image-options-" href="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}"
rel="useZoom: 'product-cloud-zoom', smallImage: '{{ image.src | img_url: 'master' }}'" data-pos="{{ forloop.index }}">
<img {% if settings.lazyloading_enable %} class="lazyload" data-{% endif %}src="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}" alt="{{ featured_img_alt }}" />
</a>
</div>
{% endfor %}
</div>
</div>
When I add video html to this code, video shows up next to each pictures.
What code should I use in this for loop, so that the video can appear alone at the end?

if anyone else is having this problem. This code was my solution
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "768x" }}
{% endif %}
{% endfor %}

How to change my button depends on product template on Shopify

Good Day,
I'm trying to change the button based on my product template on Shopify but it seems like its not working please check my code and test site below
Demo: https://strokes-test.myshopify.com/collections/frontpage
I make a control flow for the template object but its not working.
Code.liquid
<div
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
data-ajax-enabled="{{ settings.enable_ajax }}"
>
<form method="post" action="/cart/add" id="product_form_5928354152609" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="novalidate" data-product-form>
{% if product.variants.size == 1 %}<ul class="item-swatch color_swatch_Value"><br>
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% else %}
<select class="hidden" name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %} class="product-form__variants no-js"</select>
{% endif %}
<ul class="item-swatch color_swatch_Value">
{% for option in product.options %}
{% if option == 'Shades' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<li>
<label value="{{ variant.id}}" style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
{% if variant.image != null %}
<div class="hidden">
<img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
</div>
{% endif %}
</li>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% if template.name == "product" %}
<input type="submit" value="Add to cart" name="add" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart/>
{% else %}
<input type="submit" value="Choose Set" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart/ onclick="window.location='{{ product.url | within: collection }}';" />
{% endif %}
</div>
</form>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{% endunless %}

when on product.liquid template template_suffix is empty "". when on product.bundle.liquid, template_suffix is "bundle"
{% if product.template_suffix == "" %}
<input type="submit" value="Add to cart" name="add" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart/>
{% elsif product.template_suffix == "bundle" %}
<input type="submit" value="Choose Set" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart onclick="window.location='{{ product.url | within: collection }}';" />
{% endif %}

how to active slide according to color attribute change in Shopify Ecommerce website?

I have used the WOWSLIDER for product detail page and working fine but when I am changing the color attribute and the slide is not active according to the current image.
Screenshot
I shared the source code. please have a look. Also attached the screenshot
left side images are showing with help of wow slider
right side attributes are showing.
{% include 'sca_freegift_price' with product %}
{% include 'breadcrumbs' %}
{% assign variant = product.selected_or_first_available_variant %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
{% unless form_id %}
{% assign form_id = product.id %}
{% endunless %}
<section
class="main-product-wrap
product-wrap
{% if section.settings.related-products %}related-products-position-{{ section.settings.related-products-position }}{% endif %}"
itemscope
itemtype="http://schema.org/Product"
data-product-id="{{ product.id }}"
data-images-layout="{{ section.settings.images-layout }}"
{% if section.settings.zoom %}data-zoom{% endif %}
{% if section.settings.linked-options %}data-linked-options{% endif %}
{% if section.settings.ajax %}data-ajax{% endif %}
data-section-id="{{ section.id }}"
data-section-type="product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product | img_url: 'grande' }}">
<div class="product-images">
{% if section.settings.images-layout == 'slideshow' %}
<div id="wowslider-container1">
<div class="ws_images" ><ul>
{% assign mainImage = variant.image | default: product.featured_image %}
{% for image in product.images %}
<li class="extraimage"><img src="{{ image | img_url: '1024x1024' }}" alt="" id="wows1_{{ forloop.index }}"/></li>
{% endfor %}
</ul>
</div>
<div class="ws_thumbs">
<div>
{% for image in product.images %}
{% if mainImage == image %}
<img src="{{ mainImage | img_url: '1024x1024' }}" alt="" />
{% else %}
<img src="{{ image | img_url: '1024x1024' }}" alt="" />
{% endif %}
{% endfor %}
</div>
</div>
<div class="ws_shadow"></div>
</div>
<div class="product-thumbnails-outer-wrapper">
<div class="sca-fg-cat-list" style="display:none;" name="secomapp-fg-data-{{ product.id }}"> </div>
</div>
{% if product.images.size > 1 %}
{% if product.tags contains "cabin" %}
<div class="cabin-logo-container">
<div class="product-cabin"><h5>This product is suitable to take as a cabin item on:</h5></div>
{% else %}
{% endif %}
{% if product.tags contains "easyjet" %}
<div class="easyjet-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/easyjet_ca2d8259-58eb-4e77-b7f1-75e1ca187b8c.jpg?14358281107398952302"></div>
{% else %}
{% endif %}
{% if product.tags contains "ryanair" %}
<div class="ryanair-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/ryanair_734b4c75-c1db-452f-93b1-61fc09939573.png?14358281107398952302"></div>
{% else %}
{% endif %}
{% if product.tags contains "british-airways" %}
<div class="britishairways-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/british_airways_bf46e962-6f35-43ba-b78a-dcec0179b12b.png?14358281107398952302"></div>
</div>
{% else %}
{% endif %}
{% endif %}
{% else %}
{% for image in product.images %}
<div class="product-image">
<img
alt="{{ image.alt | escape }}"
src="{{ image | img_url: '1024x1024' }}"
data-image-id="{{ image.id }}"
>
</div>
{% endfor %}
{% endif %}
</div>
<div class="product-details-wrapper">
<div class="product-details">
{% if section.settings.vendor %}
<a class="product-vendor" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
{% endif %}
<h1 class="product-title" itemprop="name"><div style="position:relative;"> {{ product.title }} <div name="secomapp-fg-image-{{ product.id }}" style="display: none;"> {{ "icon-freegift.png" | asset_url | img_tag: "Free Gift", "sca-fg-img-label" }} </div> </div></h1>
<p class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ sca_price_min | money_without_currency }}">
<span class="product-price-minimum money">
{{ variant.price | money }}
</span>
{% if variant.compare_at_price > variant.price %}
<span class="product-price-compare money original">
{{ variant.compare_at_price | money }}
</span>
{% endif %}
{% if product.tags contains "shipped-by-supplier" %}
<div class="supplier-delivery-icon"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/delivery.png?7054402976003297472" alt="Shipped by supplier"><p>Shipped by supplier</p></div>
{% else %}
{% endif %}
{% if product.available %}
<link itemprop="availability" href="http://schema.org/InStock">
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock">
{% endif %}
</p>
<form class="product-form"
id="product-form-{{ form_id }}"
action="/cart/add"
method="post"
data-product-form="{{ form_id }}">
{% if sca_product_variantCount > 1 %}
<div class="product-options">
{% include 'product-options-dropdown' %}
<div class="selector-wrapper no-js-required">
<label for="product-select-{{ form_id }}"></label>
<select
class="product-select"
name="id"
id="product-select-{{ form_id }}">
{% for variant in product.variants %}
{% unless variant.metafields.secomapp.freegifts %}
{% unless variant.title contains '(Freegifts)' %}
{% if variant.available %}
<option
{% if variant == selected_variant %}selected="selected"{% endif %}
value="{{ variant.id }}" data-variant-id="{{ variant.id }}" data-sku="{{ variant.sku }}">
{{ variant.title }} - {{ variant.price | money }}
</option>
{% else %}
<option disabled="disabled" data-variant-id="{{ variant.id }}" value="{{ variant.id }}">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{%endunless%}
{%endunless%}
{% endfor %}
</select>
</div>
</div>
{% else %}
<input
class="product-select"
name="id"
value="{{ product.variants[0].id }}"
type="hidden"
data-variant-title="{{ product.variants[0].title }}" />
{% endif %}
{% if product.available %}
<div id="infiniteoptions-container"></div>
<div id="uploadery-container"></div>
<div class="product-quantity inline-input-wrapper">
<label>{{ 'general.general.quantity' | t }}</label>
<input type="text" name="quantity" value="1" />
</div>
{% endif %}
{% if section.settings.share-buttons %}
{% include 'share-buttons' %}
{% endif %}
<div class="add-to-cart">
{% if variant.available %}
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" />
{% else %}
<input type="submit" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}" />
{% endif %}
</div>
<div class="product-message"></div>
</form>
{% if product.description != blank %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% endif %}
</div>
</div>
{% assign addToCartText = 'products.product.add_to_cart' | t %}
{%
include 'product-json',
id: product.id,
add_to_cart_text: addToCartText,
enable_history: true
%}
</section>
{% if section.settings.related-products %}
{%- assign related_products_position = section.settings.related-products-position -%}
{% include 'related-products' related_products_position: related_products_position %}
{% endif %}
<script>
// required for splitting variants
// see ProductView
window.products["{{ product.id }}"] = {{ product | json }};
FirstVariant["{{ product.id }}"] = {{ product.selected_or_first_available_variant.id | json }};
</script>

Add to Cart redirects to an Empty cart [Shopify]

I am facing problem in Add to cart button in my Website. (I am using Shopify).
Before this problem I had an add to cart button in my product page. When I click add to Cart button, my product is added into the cart. But you won't notice unless you look to the Cart icon in the top of the page which was impossible on mobile to see it while you're clicking it.
So my thoughts to improve it was to redirect to Cart page right after the click but I'm facing a problem. Some people when click on the Add to Cart button they're redirected to an Empty cart page.
First I tried to insert a code that I saw (and possibly is not the best one) on the bottom of my html file. And when I faced that problem I don't know why but I thought to insert the code on Google Tag Manager to load on all pages thinking that will resolve my problem. Wrong! All the same.
I'm not very good in javascript. I'm a designer but I've changed everything on this theme always trying to improve it.
I would love to have some Help please.
The Code that I was using at first was:
<script type="text/javascript">
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
</script>
Then I thought I should insert a delay to the script and I changed the code to:
<script type="text/javascript">
setTimeout(function() {
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
}, 750);
</script>
Everything was the same. Some people would have products on cart and other people won't.
Please keep in mind that I don't know javascript. Maybe this script that I'm adding is not the best one and some type of cookie is lost in the process or something like that and maybe some devices/browsers lose the product information when they're redirected.
My product_1column.liquid code is:
<div class="product-single">
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="product-media thumbnai-{{ thumbnai_position }}">
<div class="product-single-photos pull-{{ thumbnai_position }}">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<!-- ZOOM NO TOUCH -->
<a href="{{ featured_image | img_url: 'master' }}" class="cloud-zoom" data-rel="position: 'inside', useWrapper: false, showTitle: false, zoomWidth:'auto', zoomHeight:'auto', adjustY:0, adjustX:10">
<img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" title="Optional title display">
</a>
</div>
<!--<p class="visible-sm visible-xs a-center">Click on the image to zoom</p>-->
<div class="more-views">
<div class="swiper-container" data-margin="10" data-items="5" data-xs-items="5" data-direction="{% if thumbnai_position == "none" %}horizontal{% else %}vertical{% endif %}" >
<div class="swiper-wrapper">
{% for image in product.images %}
<div class="swiper-slide">
<a href="{{ image.src | img_url: 'master' }}" class="thumb-link" title="" data-rel="{{ image.src | img_url: '1024x1024' }}">
<img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt | escape }}">
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-7">
<div class="product-info">
<h1 itemprop="name">{{ product.title }}</h1>
{% if product_review %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
{% if product.available %}
{% comment %} <span class="available instock"><i class="fa fa-check-square-o"></i>{{ 'products.product.inStock' | t }}</span>{% endcomment %}
{% else %}
<span class="available outofstock"><i class="fa fa-check-square-o"></i>{{ 'products.product.outOfStock' | t }}</span>
{% endif %}
{% if product_vendor %}
<span class="product-vendor">{{ 'products.product.vendor' | t }}{{ product.vendor }}</span>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single-prices">
<span id="ProductPrice" class="price" itemprop="price">
{{ product.price | money }}
</span>
{% if product.compare_at_price > product.price %}
<s id="ComparePrice" class="product-single-sale">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
</div>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="product-options {% unless settings.color_swatch %} linked-options{% endunless %}">
<select name="id" id="productSelect" class="product-single-variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if settings.color_swatch %}
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
{% endif %}
</div>
<div class="product-actions">
<div class="product-single-quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
<label class="label" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<div class="quantity">
<span class='qtyminus' data-field='quantity'><i class="fa fa-angle-down"></i></span>
<input type='text' id="Quantity" data-field='quantity' name='quantity' value='1' class='quantity-selector' />
<span class='qtyplus' data-field='quantity'><i class="fa fa-angle-up"></i></span>
</div>
</div>
{% if product.available %}
<button type="submit" name="add" id="btnAddtocart" class="btn btn-primary btn-addToCart">
{{ 'products.product.add_to_cart' | t }}
</button>
{% else %}
<input type="submit" name="add" class="btn btn-primary btn-addToCart" id="product-addTocart" disabled value="{{ 'products.product.unavailable' | t }}">
{% endif %}
<div class="product-wishlist">
{% include 'add-to-wishlist' %}
</div>
</div>
</form>
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% if settings.social_sharing_products %}
<div class="product-sharing">
{% include 'social-sharing' %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% include 'product-info' %}
{% if settings.related_product %}
{% include 'related-products' %}
{% endif %}
Plus, this theme have a .js file that I think is super relevant to this problem:
https://privatebin.net/?28b4693d0a1e0a73#/JycpCfEEeAqmn2Fr/5+99VgOMilFkS3jMZz/3EQm5g=
And the original theme is http://gred-themes.com/landingpage/simolux/ so you can see how it was in the beginning.
Thank you in advance for your help.

When you do location.href='/cart' you are instructing the browser to jump to the cart. An empty cart is an empty cart if you go there.
Instead you want to submit the form with the added product(s) to the cart, in which case Shopify will add the products in the form to the cart, and in some cases may transfer the browser to the cart.
Sorry if that is confusing, but from your code, it seems you are indeed just sending yourself to the cart, without taking the time to add the products to the cart that you want to buy.
So to sum up.. you have a submit button that is supposed to submit the cart. Just let it do it's thing. Take out your event listener for onclick. You do nothing with that anyway, so get rid of it. Or in your click listener, do whatever you want, but also submit the form!! So you have to get a reference to the form, and use the submit() on it...

How to add variants to my cart - Storenvy

I am having difficulty getting my variants to carry over to my shopping cart on my product page for my custom storenvy store.
Any help would be much appreciated! I am not much a of a coder. I think I am close, but I could be wrong.
Here is the code I am using and the link to the live page is: http://apricotmantle.storenvy.com/collections/259687-merch/products/17058861-bloody-beach-zombie-limited-edition-pinup-print
CODE:
<div class="slide products_{{product.id}} active">
<div class="home-content">
<img class="artwork" src {{product.photo.url}}" alt="{{product.name | escape }}" />
<div class="artworkContent">
<h1>{{ product.name }}</h1>
<div id="add_notice" style="display:none;"></div>
{% if product.description != blank %}
{{ product.description | auto_link | paragraphs }}
{% endif %}
{% if product.image_count > 1 %}
<div id="slider-code">
<div class="viewport">
<ul class="overview" id="thumbs">
{% for photo in product.photos offset:1 limit:3 %}
<li>
<a href="{{photo.url}}" class="product_thumb" {%if forloop.first %}id="first_thumb" {%endif%} rel="product_photos">
<img src="{{photo.medium_url}}" height="100" width="145" alt="{{product.name | h}} - Thumbnail {{forloop.index}}"/>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if product.coming_soon %}
<h3>Coming soon!</h3>
{% else %}
{% for variant in product.variants limit:1 %}
<div class="add {{ variant.status }}">
{% if variant.quantity < 1 %}
<img src="/themes/default/images/btn_sold_out-v2.png" />
{% else %}
<p id="price">{{ product.price | money_with_sign }}</p>
<form id="add-to-cart" action="/cart/add" method="post" >
<select id="variant-select">
<option>Product Options</option>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{variant.title }} for {{ variant.price | money}}</option>
{% endfor %}
</select>
<input type="image" name="add" value="Purchase" id="purchase" src="{{ 'purchase.png' | asset_url}}" />
<span id="product-price">{{ product.price | money }}</span>
</form>
{% endif %}
</div><!-- end .add -->
<div class="{{ product.css_class }}">
{% if product.on_sale %}<div class="sale">On Sale</div>{% endif %}
{% if product.preorder %}<div class="preorder">Pre-Order</div>{% endif %}
{% if product.coming_soon %}<div class="soon">Coming Soon</div>{% endif %}
{% if product.sold_out %}<div class="soldout">Sold Out</div>{% endif %}
</div>
{% endfor %}
{% endif %}
Storenvy Marketplace Page
<!--<h6>Share This</h6>
<div id="share_product">
{{ product | facebook_like_button }}
{{ product | tweet_button }}
{{ product | wanelo_button }}
{{ product | pinterest_button }}
<hr/>
</div>-->
</div><!-- end .product_info --></div>
</div>