[Dawn v12 and below] How to Add Color Swatches To The Product Page Of The Free Shopify Themes

[@amine-ammari]

⚠Updated video using Metafields ⚠ kzbin.info/www/bejne/aKStY4ioaZdjias

[@miguelribeiro6879]

Fisrt of all thanks a lot! I was searching for swatches for about 1 day and none of the videos worked, and you in only 5 minutes did it all.

[@amine-ammari]

Glad I could help, Miguel 😄

[@amine-ammari]

⚠This tutorial is Not compatible with Dawn 13⚠ Shopify will soon release color swatches natively on Dawn without code edits This tutorial is valid for Dawn 12 and below You can download the theme here drive.google.com/file/d/1gQfg_BYt8zOO9yQJXqNMbm10YFBHsXtg/view?usp=sharing Dawn, Refresh, Spotlight... are all the same theme with different settings.

[@momocotton3049]

Do you know if the update will also include swatches for the catalog page?

[@user-zd3cf8fm4w]

can you make Dawn 13 please?

[@amine-ammari]

@@momocotton3049 We don't know yet, if it doesn't then I will make a video on that

[@amine-ammari]

@@user-zd3cf8fm4w Shopify will release the color swatches feature soon

[@craftycare]

@@amine-ammari Do you know when? :)

[@they.notreal]

Thank you soo much bro! this tutorial was on point 😍😍

[@Mohamed.IbrahimYT]

Don't stop uploading. Thank you

[@amine-ammari]

For sure 😄

[@alexandros-t4e]

This video was the most helpful out of everything i viewed. Thank you!!!! would you be able to make a video to show how to see the color swabs from collections? so they can see the color options before they click on the product???? thank you!

[@amine-ammari]

Thanks, Alexandros for your comment 😄 Yes I will make that video, can you give me more details about how you would like it to be? Do you want the color swatches to take you to the product page once clicked? Or to change the product image?

[@nikarose]

@@amine-ammari I would love to see the same. I use color swatch of images since some of my products have heather colors for example. I would love to be able to display them on the collections page. If I could choose, I would have this: when the customer clicks on the color swatch on the collection page, that variant image is shown to them while still on collection page.

[@amine-ammari]

Thank you for your feedback, I will make a video about the collection page soon.

[@TheRightSidePrints]

@@amine-ammari This was a GREAT video - Have you been able to add the collection page video, yet? I don't see it, I could just be missing it though. Appreciate your work!

[@amine-ammari]

@@TheRightSidePrints No, not yet. I will add it soon

[@decotipshorts]

Great, I already implemented your teachings on my page and you really make it very simple. Thanks for your time.

[@Lumi_World_]

Wow! This video is exactly what I was looking for. I really appreciate your hard work.

[@amine-ammari]

Thank you for your kind words 😄

[@Zigzag3Dprint]

thank you very much for your time and effort .This is so helpful that i will ably it to my store ❤

[@kevindoyle730]

Hi What a life saver just installed the code and my website looks amazing big thumbs up, thankyou

[@rolandhawbibata8029]

You are a gem 🎉thanks a bunch🙏🏼 you owned a new subscriber

[@galdesgagal2335]

Merci pour tes vidéos Amine ! Elles sont vraiment utiles et facile à comprendre 🙂👍 Excellent mon ami

[@meesonyhoo]

Salut comment as-tu fait pour passer la deuxième étape stp car après avoir supprimé et coller ça n’enregistre pas pcq apparemment le code n’est pas juste

[@jeronimolopez5455]

NICE VIDEO! that hack gives a proffesional feeling to any page 🔥

[@FaniBloger-k3l]

i appriciate your efforts for your viewers . this video is awesome

[@amine-ammari]

Happy to help 😄

[@cadevski]

Hi Amine. Love your work. Will you be able to provide an update for Dawn 13.0.0?

[@amine-ammari]

Thanks, Tony Yes there will be an update once Shopify releases color swatches natively

[@simbayns]

You're a MAGICIAN, L3ez

[@jeronimolopez5455]

AMAZING VIDEO! SO HELPFUL 🔥

[@nicowendler9077]

Super easy and Helpful!!!!!

[@momocotton3049]

Nice Video! Do you know if this is also applicable for Dawn Version 11.0?

[@amine-ammari]

Thanks! Yes it's compatible with Dawn 11

[@momocotton3049]

AMAZING!!!!!♥@@amine-ammari

[@apogadgets]

thank you so much!

[@Witrastore]

Thanks man, that's what i needed, thanks a Lot!

[@luizjr7293]

Amazing work!! Liked and subscribed!

[@yuang7027]

Thank you, I just have one issue, how can I change the circle color from black to orange or other colors. probably from the box-shadow part?

[@amine-ammari]

It's either the before or after pseudo-element of the swatch. Unless you know CSS I advise you to hire a dev.

[@clackclacken9616]

Another really useful Vid, thank you so much. Is it possible to do sizes as well? I have rings so lots of size options

[@amine-ammari]

Thanks for the feedback. Yes of course! You can have these swatches for any option name.

[@clackclacken9616]

Thank you ! I may come back in confusion if I can't quite work it out@@amine-ammari

[@clackclacken9616]

Unfortunately didn't work. Only after entering the code did I work out what you where doing exactly. Unfortunately my Variants are all used up on inclusions wining the resin setting for the rings, so need to find a way of having colour choice outside of the 3 variants. I already have your custom liquid “long text input”, I wonder if I could work out how modify that to show imported images as choices. @@amine-ammari

[@LIGE-FRANCE]

Incredible video thank you very much, but there are some collections and products where this function does not work, it stays the old way, what do I do?

[@amine-ammari]

thanks, please rewatch the video everything is explained

[@mysticrain32]

Great video, but just wondering if there is a way I can use this with dropdowns also. So color swatches for color and then dropdown for size etc

[@amine-ammari]

Hi Cooper, No unfortunately this will require additional code edits. If I update the video I will make sure to implement this feature

[@mysticrain32]

@@amine-ammari Thanks for the reply, looking forward to that video if you make it!

[@IK-rj7yp]

Great tutorial. Thank You. Is it possible to extend this functionality to display the color swatches on collection page also?

[@amine-ammari]

I will soon make a video for the collection page.

[@IK-rj7yp]

@@amine-ammari Thank You!

[@bhagvaangodiswarallahkhudaparv]

this code is not working properly on mobile version website, when we select the variant after sliding two or three photos of product.

[@amine-ammari]

Hi, I really appreciate your feedback. I just tested the swatches on a mobile I did notice your problem when you drag the slider to see the other images and then select a color the image doesn't update. Although this problem is present on Dawn before making the code edits of the video.

[@bhagvaangodiswarallahkhudaparv]

@@amine-ammari thanks for your reply, can you fix this

[@amine-ammari]

@@bhagvaangodiswarallahkhudaparv If a lot of people request it I will make a video on that for sure 😄

[@bhagvaangodiswarallahkhudaparv]

@@amine-ammari I understand... I also take my car out for long drives only when all the traffic lights in the city are green.

[@julianmoroni5412]

Thank you for the video! Very helpful, unfortunately my product page is only showing the colors but when i press the option to show the images it doesn’t change. Do you have any tip? Thank you

[@amine-ammari]

Make sure you are using a free theme version 12 or below and repeat the installation process again on a new theme

[@lrr7926]

Hello, thanks for the video! Could you do an update on how to put the swatch on the collection page and in the featured collection sections?

[@amine-ammari]

This will require some additional code edits, I will make a video on that once Shopify releases their native color swatch solution

[@LetIToutDivineTime]

Hey, this was a very helpful video, I just have one question, where could I get the color codes for the colors that did not automatically show up after installing the color codes.? TIA

[@amine-ammari]

You can choose your own color codes based on the products that you are selling. I show how to do that in the video

[@faysalzulfiqar]

Hey amine, can you make one video for custom image megamenu for shopify dawn theme or any free theme

[@amine-ammari]

thanks for the suggestion

[@_neslo_]

great tutorial, i was just wondering tho, i would only like the color swatches on some of my products and it is showing up on all of my products. on a couple of my products i want words not colors. do you know how to only have colour swatches on selected prducts?

[@amine-ammari]

Unfortunately, these code snippets don't have this feature, you will need to hire a dev for that.

[@_neslo_]

@@amine-ammari all good i fixed it by using different themes, thanks for the reply and the awesome video tho. those colour swatch make a site look so much more professanial

[@charllylim3382]

Thank you very much for the tutorial which is so easy to follow! Is it possible to have a tutorial on how to add swatches on the collection page, featured collection and search results? :)

[@amine-ammari]

Thanks for the feedback When Shopify releases their native feature I'll make a video on the collection and search pages

[@charllylim3382]

@@amine-ammari Is it possible to show a slash sign on a particular color swatch which is sold out? So that at a glance user will know the item is sold out.

[@amine-ammari]

@@charllylim3382 Yes it's possible If you need to hire a developer to help you build that feature please reach out here amineammari.com/contact/

[@mwa2411]

Thanks Amine .. I subscribed in your channel nice video and description . please I have under the featured product a link says see more details for more details about the product that doesn't look so nice do you know how can I fix or customize it ?

[@amine-ammari]

Glad you liked the video. You can change the colors font and overall theme in the settings You will need to hire a dev to change that button's appearance only.

[@ProDuBai]

i dont have on my page product variant to paste the code what should i do ?

[@amine-ammari]

Please use the Dawn theme version that you can find in the description

[@fewsproducts]

Thank you so much for the video! mine is not working. Do I have to add all of my colors manually?

[@amine-ammari]

Please make sure you are using the latest version of the Free Shopify themes, this doesn't work on the premium ones. And yes you have to add colors manually.

[@fewsproducts]

@@amine-ammari thanks

[@damien4801]

Thank you very much for your time, very nice tutorial and well explained ! Is it possible to have the swatches on the collection page ?

[@amine-ammari]

Thanks Damien 😀 No not on the collection page, it will be in a future tutorial probably.

[@SportStore-t3z]

thank you, but i have alittile problem , after i do every thing step by step, on the product page i see white circiles , i cant see colors

[@amine-ammari]

Please finish the video you didn't setup the colors yet

[@BDN-j3f]

Thank you for this useful tutorial. I was wondering if it is also possible to add the following: I would like that when someone clicks on, for example, the color 'black', he is redirected to the product page of this variant, so that the title and description also change. . It would be great if you could respond to me and help me further! Thanks!

[@amine-ammari]

Hi, thanks for the feedback You will need to hire a dev to get that feature on your store. Unfortunately, I don't have the code for it

[@marcjan2500]

Thanks for making this video Amine, very helpful. I'm curious if its possible to automatically display the product variant images for the swatches, taken straight from the product variant options. Any help on this would be greatly appreciated :)

[@amine-ammari]

Please explain in more detail If you mean display only the blue images when you click on the blue colors I made a video on that

[@marcjan2500]

@@amine-ammari Hey Amine, what I mean is this: Automatic variant swatches without having to upload the variant images to the swatch editor. With some code the swatch could simply load the variant image from the product data, right? Would this be difficult to set up?

[@amine-ammari]

@@marcjan2500 If you want to use metafields to store the color and images, Shopify will soon release this feature in the coming months No code needed

[@marcjan2500]

@@amine-ammari That sounds awesome, i'll keep an eye out

[@chipmunk9784]

Thank you so much sir! I have one question tho. It automatically adjusts these colors to other products as well but I want to have it only on one product. Does this make sense?

[@amine-ammari]

As long as it's the same color value you only have to do it once

[@chipmunk9784]

can I do it separately?@@amine-ammari

[@chipmunk9784]

I want to make changes to only one product

[@amine-ammari]

@@chipmunk9784 You will need further coding changes unfortunately

[@chipmunk9784]

Ok thank you

[@filippotoscano7280]

Hi, thank u for all these info, i would ask you something. In one product I have two variants, Color and Style, and i would like to put variant images for both of them. how can i do it? please help me

[@amine-ammari]

You just need type Color,Style in the first option name field Then select the variant image swatch style

[@suchbatboy7686]

Is it also compatible with the App "Sternify"? because in the liquid code, my code differs from yours in the Video

[@amine-ammari]

No only free themes vers 12 and below

[@Klee87278]

I can't believe it work! +1 subscriber

[@amine-ammari]

Thanks for the sub 😄

[@Klee87278]

​@@amine-ammarihey quick question, my color swatches seem to be affected by selected pill background, any quick way to disable that?

[@amine-ammari]

@@Klee87278 Do you mean the black border around the currently selected pill?

[@Klee87278]

@@amine-ammari nvm i got it! Thanks for the reply

[@PorygonTV]

Hi, I would love the option variant images as you show it in this video, but it doesn't work for me. I am using Craft version 15.2.0. Can you help me? Thanks

[@amine-ammari]

This tutorial won't work for new theme versions Updated video using Metafields kzbin.info/www/bejne/aKStY4ioaZdjias

[@WeiwenChen-i8q]

Thank you for making this video. Clear steps and on the point. Keep up the good work!

[@WeiwenChen-i8q]

One thing I would like to clarify is the Swatch size in the Theme settings > color swatches. The rounded color seems to be squashed when I tried to reduce the size (px) of the swatch. Any advice on this? Thank you in advanced.

[@amine-ammari]

@@WeiwenChen-i8q You will need to change the height as well, you will need to add some custom CSS You should hire dev to do it, it won't cost a lot.

[@michaelh8137]

Exactly what I needed 👏🏻 I am having slight trouble when selecting variant image. I named the file: “colour”.jpg and followed your instructions but they aren’t showing

[@amine-ammari]

Please don't use quotes in the file name and make sure that the option name of the rule is the right one

[@AskSpectra]

Cant get this to work at all, Im using Trade, and on the second steep the code looks nothing like your video. I cant seem to find which part to cut. I tried about 10 diffrent ways....

[@amine-ammari]

Please follow the updated video kzbin.info/www/bejne/aKStY4ioaZdjias

[@AskSpectra]

Yea that is no help. I guess a Shopify update messed everything up again.

[@JohnClasher]

Great video. But its not working for me, i copied and pasted the exact code from you and did it in the right position but its not working. In the file "product-variant-picker.liquid" i have 2 fieldset attributes and not just one like in your video. I tried all opportunities but its still not working :(. Could we get in touch for help or do you have an idea?

[@JohnClasher]

so i just see vertical lines as the different variants but no images even though i have uploaded a picture for each variant for each product

[@amine-ammari]

Please use the updated video kzbin.info/www/bejne/aKStY4ioaZdjias

[@TanimaWadhwa]

Please create a video on how to show color swatches on collection page and home page too

[@amine-ammari]

Thanks for the suggestion But with Dawn 13 you will soon have color swatches natively

[@TanimaWadhwa]

with an early access feature. How useless.@@amine-ammari

[@justinfyk4470]

Big help, great tutorial! Thank you. How do i reduce the size of the swatches evenly? When I set the size lower (round), my swatches just look oval. Thanks.

[@amine-ammari]

Thanks for the feedback You will need to write additional code to change the size

[@AZ-EDDINEER-RAMI]

Great vidéo keep up dude :)

[@amine-ammari]

Thanks will do 😄

[@anyelavelarde9485]

hello great video thanks, but the first code does not let me change it, why? help please

[@amine-ammari]

Please copy and paste the code again If it doesn't let you save it means that there is an error, the code was pasted in the wrong spot

[@golakotidevendra6714]

Please make a video for product image slider

[@amine-ammari]

Thanks for the suggestion!

[@mbtv2591]

how can i add more than one pic to each variant

[@amine-ammari]

kzbin.info/www/bejne/fomxYYeGqbGLjaM

[@cadevski]

Hi Anime. The hide variants works fine now, it was my error. i had issues responded on that particular post. Thank you With this tutorial, the color swatches. How would you display the name of the size selected. when you select a color it now displays the color name selected, how would you do this for the size selected?

[@amine-ammari]

Happy to see that everything worked for you The code doesn't have that feature for other options like size You will need to hire a dev to have that feature

[@hmzateh5820]

thank you for this amazing video, is it compatible with kolosal themes ?

[@amine-ammari]

Hi Hamza, No, it's only compatible with the Free themes.

[@meesonyhoo]

Hello, could you please help me? For the second part of this tutorial, I can't find the code to delete in "product-variant-picker". For your information, I have the Dawn 13.01 theme in French. 😭

[@amine-ammari]

This tutorial doesn't work on Dawn 13, please download the Dawn theme v12 in the description

[@cyberspider78910]

which means for each product this is to be done ?

[@amine-ammari]

No you just add settings in your theme.

[@cyberspider78910]

​@@amine-ammari ..OK..I got that....only improvement desired as display of mulitple variant images when clicking on color swatch...However, video and code are sort of Gold Standard.Thanks..

[@darkrock2696]

Wooow., can you make a video for color swatches (feature collection? in collection page also please 🙏

[@amine-ammari]

Yes that's in the pipeline.

[@mohamed_chami]

Great tutorial Amine! t This is exactly what I'm looking for. Can you make a tutorial about size char for free Shopify themes. Thanks !

[@amine-ammari]

Glad it was useful for you! Thanks for the video suggestion I will keep the size chart in mind.

[@RATNBATRA]

Hi How to Show Color Swatches on Collection pages please try to make the video

[@amine-ammari]

Thanks for the suggestion!

[@RATNBATRA]

@@amine-ammari 😊

[@nimrariaz9702]

Grear tutorial, will this work on dawn version 11 as well? Also, i have product variant with multiple images of one product how can i modifiy this code so, when the required color is selected multiple images of that product are shown?

[@amine-ammari]

Will it work on Dawn 11? Yes Can I show only the images related to a selected color? No this code is only for color swatches

[@mex8960]

maybe in my theme empire i cant add two colors? how can i check??

[@amine-ammari]

This tutorial is only for the Free themes it won't work for the empire theme

[@jannis6472]

Aweseome Vide THX! Is there any way that i also have the colour options on the featured Product Section.

[@amine-ammari]

Yes but you will need to write more code

[@SurprisedDivingBoard-yt8hr]

Great work❤

[@amine-ammari]

Thanks!

[@_n_schneider]

can I as well add different images for every variant?

[@amine-ammari]

Can you please be more specific in your question?

[@MaryamAlghazai]

Thank youuuuuu 🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼😭😭😭

[@iraqlov1]

Hello brother, amazing video and infomation! Thank you very much for you work. That said, my theme code does not have product-variant-picker or color-option on it. Would you know why and if there is a fix for that. Thanks again!

[@amine-ammari]

Yes this works only for free themes version 12 or below

[@gerrynap]

Fantastic, this is exactly what I was looking for, but I'm encountering a small issue and I'm not sure if it's related to the Refresh theme. I'm using the selector with variant images, but when I change the variant, the variant name doesn't change; it remains fixed on the first one.

[@amine-ammari]

Hi, I'm glad the tutorial was helpful for you Indeed there was an issue with the code, but I fixed it recently and updated the code. So please install the code snippets again and replace the previous code. It would be better to install the code on a completely new Refresh theme and you shouldn't have the issue anymore

[@bahrainhala7609]

Dude, you are awesome !! really nice job you are doing. you're videos are on the point and clean. Could you please do a video where you edit the variant picker to allow for choosing swatches for color variants and dropdown let say for size variants? I hate installing apps, they suck really. And I didnt find any code solution tbh.

[@amine-ammari]

Thanks for your feedback 😄 I will keep your suggestion in mind.

[@BauerPower]

i have lets say 15 Variants, could you include a scroller with the swatches. Rows apon rows of variants looks ugly. I would also ask, how could you include the name of the Variant color inside the pill box

[@amine-ammari]

Thanks for the suggestions, I will keep that in mind if I update the video.

[@Studio28-p8h]

need to add custom images for colors and other variants in Dawn theme 15.2. Any snippets or tutorial available?

[@amine-ammari]

Yes I will make an update soon in the upcoming weeks. You can use just the native shopify feature

[@IgorBouw]

Hi Brother, thank you everything worked, but only one question my swatches turned vertical stacked on each other instead of horizontal next to each eather, how to fix this?

[@amine-ammari]

Normally they are supposed to be next to each other. You will need to write some code Add style="display:flex" inside the div that holds the swatches

[@Lush.ByLeah]

Hello, I can't copy the second code because I do not have the product-varient-picker.liquid file. I'm using the template dawn, is there any way to fix this issue?

[@amine-ammari]

Please update your theme, you must be using an older version of Dawn. The file is under a different name.

[@dsilverreviews598]

product variant picker doesnt show up when i search it in the code. please help

[@amine-ammari]

This tutorial is Not compatible with Dawn 13 and above

[@LassaneOuedraogo-fw1vm]

everything is working but the collor isn´t showing on my product page are i doing something wrong

[@amine-ammari]

Check the settings

[@Muhammad.AwaiS-]

Great video! It solved my problem in seconds. I really appreciate your hard work. However, I noticed that while selecting a variant image, if I choose any variant, it won't change the name of the swatcher heading. Please help me resolve this issue.

[@amine-ammari]

Are you using the latest version of the free themes? Try installing the code on a new theme and see if the issue is still there

[@Muhammad.AwaiS-]

​@@amine-ammari Appreciate your prompt reply. I'm using the latest theme. While testing with other products, I noticed that headings are changing automatically. Then, I realized that when the heading consists of two words, like "xyz color," the heading does not change. However, when I converted it to a single word heading, like "color" the heading name change started working when picking a swatcher.

[@amine-ammari]

​ @Muhammad.AwaiS- Thanks for explaining the issue in details that was really helpful to help me solve the issue. I updated the code, you just need to re install again, preferably in a new version of theme to avoid making mistakes when you are replacing the code. Can you give me some suggestion of topics you would like me to tackle on the Dawn theme? what type of products are you selling?

[@Muhammad.AwaiS-]

@@amine-ammari Bravo! Hats off!

[@beyondthemapx]

not working in sense! the code in product-variant file is too complicated to understand theres like 15 lines of code for (fieldset) and if i replace all with the given code it doesnt work, nor is it owrking if i replace only some, please check and let me know

[@amine-ammari]

Please make sure you're using Dawn v12 or below, this doesn't work on the recent versions You can download an old version of Dawn in the description

[@beyondthemapx]

@@amine-ammari dude why would i use dawn my store of 1 year is on sense i cant just change the theme, youre a big coder all im sayiing is find a way around that 10 line code in the product-variant file and make it work on sense too

[@amine-ammari]

​@@beyondthemapx Sense and Dawn are the same theme, they just have different settings

[@luciano.enrique]

Hi if I also click on the variant the the color swatches it stands active color swatches and if I click on it, nothing happen

[@amine-ammari]

Make sure you are using a theme version 12 or below, maybe you didn't install the code snippet properly

[@fuzion-clips6845]

I didnt work for me how can I restore the code

[@amine-ammari]

On top left there is a file versions menu, you can go to the original if you didn't make a theme copy Please follow updated tutorial kzbin.info/www/bejne/aKStY4ioaZdjias

[@paulomiguel20]

is there a way to mark them when the size/color it's not available?

[@amine-ammari]

Yes but not with this code

[@amazonfindss-iu4cv]

bro Thanks for this video! but also same like this how to show color swatches on collection page??

[@amine-ammari]

Bro Thanks for the feedback Once Shopify releases color swatches natively on the platform, I will make a video for the collection page

[@NyashaMadzokere-pk8lp]

Thank you.Helped alot

[@Sukhdevsandhu3165]

hallo Sir i have refresh theme there is no Fieldset found.plz help me

[@amine-ammari]

You probably have a new version of refresh this tutorial isnt compatible with the new versions

[@redonmuqolli]

Hey brother, right now Dawn 15 is out, i guess this doesnt work anymore? I cant even get to second step, because the code isnt the same as yours.

[@amine-ammari]

Yes I will make an update

[@joandominguezperona]

i dont find where to put the second copy file, because in my case is not from line 25 to 28, anyone else?

[@amine-ammari]

This code doesn't work for Dawn 13 only 12 and below

[@LaCouilleVaincra]

Thank you a lot, I love you !

[@amine-ammari]

You're welcome! Love the name

[@LaCouilleVaincra]

@@amine-ammari Could you explain how to make little swatches appear in collections page, for example on product cards? At least, just to see the colors variants on the collection page, even without interaction on them.

[@amine-ammari]

@@LaCouilleVaincra I don't have the code for that Once Shopify releases color swatches natively I will release a video for that I don't know when

[@LaCouilleVaincra]

@@amine-ammari the color swatches of shopify are ugly for Dawn13. Yours are very nice ! Is there no way to adapt the variant picker code to work in card-product ? Any idea ? :p

[@luizjr7293]

Hello, Amine! the footer menu on shopify free themes are very poor! Can you teach us how to make a dropdown menu on footer to make it smaller? Big thanks from Brazil

[@amine-ammari]

Hi Luiz, thanks for the video suggestion I will add it to my list :)

[@asadmahmood8605]

Thanks, also how can i add strike through on sold out image swatches ?

[@amine-ammari]

This feature is not included unfortunately

[@asadmahmood8605]

@@amine-ammari Thanks again for the video. also I have added the strikethrough on sold out swatches using this css .product-form__input input[type='radio'] + label.color-swatch .visually-hidden { position: absolute !important; overflow: hidden !important; left: 0 !important; width: 125% !important; height: 15px !important; top: 47% !important; margin: -1px !important; padding: 0 !important; border: 0 !important; clip-path: inset(0 0 90% 0) !important; clip: unset !important; background: #FF0000 !important; transform: rotate(-45deg); }

[@nicowendler9077]

I have an additional question. I have two variants, Color and Style. Style 1 has 4 Colors (a-d) and Style 2 has 2 different colors (e+f). So the options I have are: 1A 1B 1C 1D 2E 2F The problem that I have is that it also shows me all the variants that are not existing: 1E, 1F, 2A, 2B, 2C, 2D I have deleted all the non existing variants in the product section of Shopify but it still shows me the non existing options. In your example, this would be equivalent to only having Grey + Oak and Beige and Hazelnut but not having Grey + Hazelnut or Beige and Oak but Shopify showing all options even though they don't exist. Is there a simple way to fix that to only show me the variants that are available?

[@amine-ammari]

Ok, I will look into that.

[@aleeyyynaa]

In Dawn 15 is it possible without any codes? Thank you so much, your videos are so valuable. BIG RESPECT AND GRATITUDE

[@amine-ammari]

Not with this tutorial but yes possible

[@Elcazalt]

Love your videos! Any chance an update on Dawn 13?

[@amine-ammari]

Shopify will release color swatches natively on Dawn 13, once they do I will make a video on it

[@nicklasrickeskar]

Updated version please

[@amine-ammari]

Will do

[@filippo2621]

how we can display this also on categories/collection pages?

[@amine-ammari]

You will need some code edits for it, once shopify releases the color swatches I will if that can be done

[@isabellesui7473]

Hi there! I was able to add all the code but when I go to the Theme Setting I do not have the option for Color Swatches. Any ideas as to why this is not showing up for me?

[@amine-ammari]

I thin you didn't copy paste the schma code

[@isabellesui7473]

​@@amine-ammari Thank you for your help! I fixed the Color Swatches but now all my variants are showing up as color swatches, except for the most recent product I created where the text is still showing instead of an empty circle. Any idea why this may be the case?

[@amine-ammari]

@@isabellesui7473 You will need to add the option name in the settings as well

[@official_youngspirit]

Any limits on the amount of Variants per product?

[@amine-ammari]

Yes there is a 100 variant limit per product on Shopify But you can go over this limit with a custom field I made a video on the topic

[@christianazzi6340]

Hello, Great video! Quick question though. Do you have the craft 12 version?

[@amine-ammari]

This works for Craft 12

[@christianazzi6340]

@@amine-ammari What about Craft 14? Does it work?

[@amine-ammari]

@@christianazzi6340 No unfortunately

[@qasimalirajput6032]

You are good man.