Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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
This is an accepted solution.
Thanks for accepting the request. I fixed the issue from your theme.
Cheers,
Tejas
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
Hello,
thank you for your assistance. It seems like i was looking in product.liquid not in product-template.liquid. I managed to place the code. I will now continue with the tutorial and hopefully will finish it without other issues
Hello,
I managed to add the swatches to my store. They now appear. But there are two problems:
1. The old selectors for color and size still appear.
2. When i click the swatches they don't select the color/size. The only way to select color/size is with the old selectors
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
Hi can i send you my store url and password so that you can access the code with inspect element and tell me what to change?
Thank you in advance!
It requires to check in code file, difficult to tell you directly with inspect element.
Thank you,
Tejas
Alright , would you send me a request?
Hi,
were you able to get it through? I am also stuck. Variant are not changing Whatso ever i do
I sent request for the Shopify collaborate account, accept it so I can fix the issue.
Thank you,
Tejas
This is an accepted solution.
Thanks for accepting the request. I fixed the issue from your theme.
Cheers,
Tejas
Hey Tejas,
You had been at least a theme savour for sure. What were the fixes that were done. Also prices are getting updated with the variants?
Yes, Also price are getting updated with variants.
If you are still facing any issue then send me an email with your store URL.
Thank you,
Tejas
Let me get my partner on it and i will send you the email
Hey there, I am having the same issue. Swatches appear along with the old selectors and when selecting the swatches both the picture of the variant doesnt come up and what is added to the cart is actual what is in the dropdown selector (not what is selected on the swatch). Could you provide guidance on what you did to fix this or help me as well>
User | RANK |
---|---|
40 | |
38 | |
29 | |
17 | |
12 |