Increase Shopify Conversion Rates with Product Variant Swatches

[@theprompted]

This tutorial was designed for v14 of the free Shopify themes (ex: Dawn, Refresh, Sense, Origin, etc). If you are using the newest v15 themes, then check out the updated version here: kzbin.info/www/bejne/gHrRZXSZarF_oMk

[@SandhyaSharma-l2u]

Hiii, when I add JSON to metaobject field its invalid and saying JSON is invalid, please tell me what could be the reason, I tried so many times.

[@MStatus-jn9tj]

Thank you very much. It works well. Is there a tutorial or explanation for running the color switches on the collection for this version?

[@theprompted]

Yes! Just came out this morning: kzbin.info/www/bejne/pIvYdZ6cYrllpck

[@MStatus-jn9tj]

@@theprompted Ok, thank you very much for your hard work, your wonderful effort, and the accuracy and simplicity of your content

[@davidabreu2836]

Thx and Perfect tutorial.If you could do a tutorial on how to change the size of the swatches on the collection page only and not based on the size in the product page itself it would be awesome.

[@theprompted]

Thanks and glad you like it! An updated video showing the collection page swatches is in the plans

[@davidabreu2836]

@@theprompted TYSM would really apreciate if you could do it

[@MemorifyStore]

You are amazing! Is it possible for the second variant lets say "Design Placement" to have pill options as text only like Center or Left Chest?

[@theprompted]

Thank you! And yes, you can have pills with text - just use the pills like normal and don't specify that variant option in the json. You'll see in the video that we left the Size variant option pills as text too, so it would be the same approach.

[@davidabreu2836]

What if i already did the other version on my store and if i want to implement this new one,do i need to erase all the code or go to my backup store or i can just write the code and it will not conflict with the other one?Thx and great Tutorial

[@theprompted]

You can go with either option. Just make sure to duplicate whichever theme you're editing in case anything goes wrong. If you used the previous v13 of the Swatches v2, then you can replace the old code with the new (+ add the new files).

[@bennysblanks]

Does this work with your other video on having different products be variants?

[@theprompted]

That’s the next video :)

[@TeamRhinoMarketingConsultants]

I am using Dawn version 15.1.0, on product detail page color swatch are showing perfectly like your video but on clicking swatch it does not change image and on add to cart also it just takes default varriant color (even we select 2nd or 3rd)

[@SelfImprovement-pk2gn]

First of all amazing video! I just have a small issue with the code. As soon as i put in my colors and hexcodes in the json file metafield, the color variant swatches get white (not the intended hexcode color)? Do you maybe know what the reason for that could be? (Images work normally) Thank you for your help! :)

[@theprompted]

Sorry! Seems like a wayward character made its way into the code. Just re-copy and paste the code for product-variant-swatch-custom.liquid and it should work now.

[@SelfImprovement-pk2gn]

@@theprompted Nice, now it works, thank you!

[@MadLaVolpe]

Is it possible to show the variants on the "collection page" as different products? I am wondering because the only solution i found was using a third party app that is conflicting with a lot of functions my theme (dawn 13.01) has. Again, you might have already done a video for this particular request and if so, i am sorry again for the redundancy. Thank you in advance.

[@theprompted]

This video is probably what you're looking for: kzbin.info/www/bejne/mIGnoXeke9ifjNU

[@RosemaryBarnabic]

This video was so clear and the code was easy to implement however when I click on the different swatches, the product image does not change. I am using Dawn version 15 and I have 3 style swatches and 20-30 pattern swatches.

[@theprompted]

Glad you found it useful! Unfortunately the base code changed in Dawn v15. I will have a new version out shortly that's compatible with v15. Stay tuned!

[@theprompted]

Just wanted to let you know that Dawn v15 compatible swatches just released! Check it out here: kzbin.info/www/bejne/gHrRZXSZarF_oMk

[@nsgaharwal]

Really a superb video. Can you please create a video for tag filtering please😊

[@theprompted]

You're welcome! Do you mean collection page filters? Or you're looking for filters elsewhere?

[@nsgaharwal]

@@theprompted collection filter. I know we can use search and discovery app but it would be great if we can group by tags that is separate by comma through settings

[@theprompted]

Is this because you don't feel like you have enough control over which tags are included in the filters?

[@nsgaharwal]

@@theprompted exactly

[@NavjeetSingh-p9i]

@@theprompted bump for it

[@calia-ij9qd]

When I type in the title variant-swatch-mapping, it says "Value is not the correct format." ? Did I do something wrong? Thanks for the helpful video!

[@theprompted]

You're welcome! If you added the "regular expression" when creating your metaobject, then the title can only accept letters, numbers, dashes and underscores. No spaces or other characters are allowed.

[@ilumineightArabia]

@@theprompted I have the same problem - i don't have anything in the title except letters. Is there any way to fix this?

[@theprompted]

That's strange. Can you try to remove the regular expression and see if you get the same error?

[@JustMyTwoCentz]

when i follow your guide,. the swatches get implemented, but selecting any swatch other than the first in the row, will immediately jump back to the first swatch

[@theprompted]

The code was designed with Dawn v14 and it looks like you tried this tutorial on the day Dawn v15 was released. There's some changes in v15 with the variant change logic, so I'll be uploading an updated video that's v15 compatible

[@theprompted]

Just wanted to let you know that Dawn v15 compatible swatches just released! Check it out here: kzbin.info/www/bejne/gHrRZXSZarF_oMk

[@Sereno-p6p]

can you make one for refresh theme v15 please

[@theprompted]

Yes - will have a new version soon!

[@theprompted]

Just wanted to let you know that Dawn v15 compatible swatches just released! Check it out here: kzbin.info/www/bejne/gHrRZXSZarF_oMk

[@jayukekan3778]

Add to Cart button should be shown on hovering the product card on the home page make this type of video (please...............................................................)🥺🥺🥺🥺🥺🥺🥺🥺🥺

[@theprompted]

Thanks for the suggestion! Added this to the list to look in to.

[@nsgaharwal]

Also if have variant then show variant button with add to cart button

[@jeromearong]

@thepromted after following the instructions. Swatches doesn't show and using the latest version of Dawn 14.

[@theprompted]

This tutorial was designed for Dawn v14. Is it possible you have other customizations or apps that might interfere with it? What I suggest is to use a fresh new install of Dawn as a sandbox testing theme and try it again to see if you get a different result.

[@SandhyaSharma-l2u]

@SandhyaSharma-l2u 1 hour ago Hiii, when I add JSON to metaobject field its invalid and saying JSON is invalid, please tell me what could be the reason, I tried so many times.

[@theprompted]

Are you missing a comma somewhere? Also make sure you have all required fields: variant_name, variant_value, and variant_swatch

[@hellobigboi_7961]

my store doens't have a "product-variant-picker.liquid" file, what do I do?

[@theprompted]

This customization was designed for the free Shopify 2.0 themes like Dawn, Refresh, Origin, Sense, etc. Are you using a different one?

[@justame7638]

Just realized I that after pasting schema, I od NOT have circle, square, none like yours. :-( do I have to follow old tuts? I haven't done this as I was using an app for sawtches. How can I have to colors in one? i have shades like gold so I have 2 different hexs colors in one. Im so confused, in variant picker.liquid I do no have Button... I'm assuming I cannot do this now... f'n gay... cause I'm using dawn v12

[@justame7638]

hope youre online soon. has to be a way to do this with V12. i do not have the : {%- elsif picker_type == 'button' -%}

[@theprompted]

For v12, I suggest using our Swatches v2 solution: kzbin.info/www/bejne/Y6PElmeve5ahg7M

[@justame7638]

@@theprompted same thing with version 2 tut, wants this: {%- elsif picker_type == 'button' -%}, but mine dosnt have that at all

[@NesliNecipoğlu]

I tried many times for 2 days finally It workss !!!! Thank you so much ! I watch your this tutorial before; kzbin.info/www/bejne/rmTdcpSur96ondU. But images are not changed. But this video is perfect for new version. By the way; i am using shopify 15.0. It works perfect ! I can say that you were amazing to share with this with us ! Many many thanks from Turkey !

[@theprompted]

Glad it works for you!

[@NesliNecipoğlu]

@@theprompted Can i display variant colors on custom section? I tried something like that but it did not work. Color {% for block in section.blocks %} {% liquid assign product = block.settings.product_handle %} {% for option in product.options %} {% if option == 'Color' or option == 'Colour' %} {% assign index = forloop.index0 %} {% assign colorlist = '' %} {% assign color = '' %} {% for variant in product.variants %} {% capture color %} {{ variant.options[index] }} {% endcapture %} {% unless colorlist contains color %} {{ color }} {% capture tempList %} {{colorlist | append: color | append: ' '}} {% endcapture %} {% assign colorlist = tempList %} {% endunless %} {% endfor %} {% endif %} {% endfor %} {% endfor %}

[@theprompted]

It's possible to integrate the swatches into your custom section, but it's likely going to require custom development to get it to integrate with the rest of your code.