Liquid, JavaScript, themes, sales channels
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
Still Stuck
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
Hello Tejas,
I'm struggling with the same problem, try several times but doesn't work.
Would you have the kindness to check my swatches code, please? or to guide me.
Thank you in advance
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>
Hi Tejas, I need similar help where wanting to either have color based variants to switch in drop down when user selects variant photo or have this swatch.liquid work for me with radio buttons. Right now doesn't seem to be working. Let me know if I can get some help from you.
I am using Debut Theme
Hi there,
I had encounter the same trouble to add the swatch module to my debut theme.
So I created a repository with the step to follow if you want to give a try and feedback please. shopify-debut-swatch
Cheers,
hi,
I used the link you posted. The swatches are popping up on my product page however, i am having some issues with the swatches actually working as buttons. I cant click the other color options. Also the name of the color does not display. Any chance you could help out with that.
Hello @zainmarfani ,
Do you have a screen shot or something I could look at it ?
@Adrien2p Thanks for the detailed step-by-step. Worked like a charm. I have one small request. Do you know how to display the Color text on Mouse-over (hover) or if a color variant is selected?
Hello @PSM ,
Since the color is the second part of your color option code in the variant of the product, depending on your value (hex or text) you could had a tooltip management https://www.w3schools.com/css/css_tooltip.asp and then put your color text here.
Thanks @Adrien2p. So I assume I add the styling into the custom.css file right? Sorry for the newbie questions.:) Still getting a hang of this. Thanks in advance
No problem at all 😉
Yes you can add it to the custom.css file and then you just have to surround the swatch element with that
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Hey @Adrien2p . Thanks for the step by step doc. I am unable to find href="{{ 'theme.css' | asset_url }}" in theme.liquid. Can you help me out please? THanks
Hi,
Either you should bind theme.css or theme.min.css depending your improvement
@Adrien2p thanks so much for your step by step guide! It worked perfectly for me! Would you happen to have a guide, or point me in the direction of another guide, that explains how to do this process for sizes, and other custom variant options?
For example, here is a product that offers a color variant of gold, rose gold or silver (I still need to add the color hex codes), and a size variant:
I would want the color variant to sit above the size variant rather than side by side as they currently are.
Here's another unique example of a product that comes in either gold or silver but also has a secondary color option to choose from:
Next is another product we have that comes in either gold, rose gold or silver but you can also choose the letter you want on the necklace:
And this last example shows a product that does not have a color option, it only comes in gold, but has a unique birth month/flower option to choose from:
Any idea on how I can create the same swatch look for all these other unique variant options?
Much appreciated!
Adrien2p - I believe that document might be outdated as there are a few sections I don't have in my debut code.
href="{{ 'theme.css' | asset_url }}" in theme.liquid
variantOption.value in theme.js
Can you please help? Thank you so much!
I need help adding color swatches
cant find selectCallback function
i am using debut theme
@Tejas_Nadpara
Hello
I am facing the same issue. can you please help me with setup color and size swatches in the latest Debut theme?
Thanks
@Tejas_Nadpara can please post the solution here.
@virender21 if want color swatch in the New debut theme them DM on the my Email Id gausiya.s.siddiqui@gmail.com
@Gaushiya you can share the solution
I would like to recommend our application. Our app displays swatches on product pages, collection pages and homepage. It integrates with all popular themes. By default it uses the images assigned to the variants to render the swatches. You can customize the swatches by uploading images in the app panel. It's easy to use & no coding required.
I am also facing this issue. Please let me know how can we fix this in updated debut theme.
They never respond and it’s sucks. Been trying to fix this issue for weeks and don’t want to pay for an app to do this for me
It is not worthed it to make it yourself. Instead, get the Debutify theme and pay for it. It's a headache.
Dear Tejas,
I read your post above, and followed your advises but i have issues and questions :
1) the dropdown for colors still appear
2) In the developper tool on Safari there are 10 errors, and I’m very not familiar with js
3) when i click on a different color, it doesn't call for the right picture ...
Please help me
my url is blumkine.myshopify.com and for now, i only put color swatches in https://blumkine.myshopify.com/collections/tops-en-jersey/products/dee-dee-top?variant=3701951715753...
I thank you in advance,
Best regards,
Tb1313
Hi @Tejas_Nadpara ,
I just saw your reply to the swatches buttons in the debut theme. I managed to add them to my product pagen, but still have the dropdown shown. Also, when I select a size button and add to cart it uses the sizes from the dropdown. Are you able to help?
Hi Tejas,
I'm trying to create swatches for my Shopify store but unfortunately, I can't find the picture upload option in variants, Could you please help me.
Hello Tejas,
Unfortunately if you need to show images, you have to update the code yourself to show the correct image according to the selection.
Hello Tejas!
I also want to add color swatches to my Shopify page and was wondering if you could help me out, thank you so much! If you prefer, you could contact me via email at karinalang2299@gmail.com
Thank you so much!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024