I recently created my Shopify store using Debut theme, but i faced one issue when i checked how my customer chooses his/her product. So the problem is that when the customer enters the product page they see photos of the product,that they can select, and a little dropdown that actually selects the variant that he/she wants to add to cart. The issue is that my product has a lot of variants and they may get confused by which name to which photo belongs so i thought that it would be great if i could add color swatches so that they can navigate and checkout easier. I would be pleased if someone could help me with this.
Thanks in advance!
Solved! Go to the solution
Follow instruction as per the document http://docs.minionmade.com/shopify/add-color-swatches-to-products-in-shopify
If you are not comfortable to do it then you can send me direct mail, I will help you to do it from my side.
Thank you,
Tejas
Hello Tejos_Naptada,
thank you for sharing the swatch tutorial. I managed to add the swatch.liquid snippet but i don't know where to paste the following code:
{% if product.available and product.variants.size > 1 %}
{% render 'swatch' for product.options as swatch %}
{% endif %}
That is my product.liquid template:
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}
{% section 'product-template' %}
{% section 'product-recommendations' %}
{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>
{% assign current_variant = product.selected_or_first_available_variant %}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
<!-- RYVIU APP :: WIDGET -->
<div class="lt-block-reviews">
<ryviu-widget
handle="{{product.handle}}"
product_id="{{product.id}}"
title_product="{{product.title}}"
total_meta="{{ product.metafields.ryviu.r_count }}"
image_product="{{ product.featured_image.src | img_url: '180x' }}"></ryviu-widget>
</div>
<!-- / RYVIU APP -->
Also i can't manage to find the selectCallback function. Should i create it and how?
Go to the product-template.liquid file and paste the code like following:
Let me know if you have still any confusion.
Thank you,
Tejas
Send me your store URL, I will send you request for the Shopify collaborate account so I can access the theme code and fix the issue from my side.
Thank you,
Tejas
It requires to check in code file, difficult to tell you directly with inspect element.
Thank you,
Tejas
User | Count |
---|---|
24 | |
20 | |
17 | |
16 | |
13 |