⚠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.
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!
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?
@@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 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!
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
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
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.
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 ?
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.
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.
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.
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
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?
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?
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 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
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 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?
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
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?
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
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. 😭
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.
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?
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!
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?
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!
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
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.
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
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 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 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 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
After following every step to the tea, all my variants are now showing twice. One with the original variants, and one with the new code I implemented from your instructions. How do I remove visibility of the old variants? P.S. I'm using Dawn 12.0.0 and did not miss any steps, I watched the video twice so I don't know what else it could be
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.
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?
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 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
Hey :) Amazing work thank you so much. I have one problem. My color swatches are not round but more like eggshaped. I didnt changed something in the code :(
Thanks for your quick respond. Seems like the problem is the that i can only change the vertical size. I cant find the option to change the horizontal size in the code. @@amine-ammari
Thanks for your quick respond. Seems like the problem is the that i can only change the vertical size. I cant find the option to change the horizontal size in the code.@@amine-ammari
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 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?
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 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.
@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?
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
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 ..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..
![[Dawn v12 and below] How to Add Color Swatches To The Product Page Of The Free Shopify Themes](/img/logo.svg){kind=logo}
