[Dawn v12 and below] How to Add Color Swatches To The Product Page Of The Free Shopify Themes
ฝัง
- เผยแพร่เมื่อ 27 ก.ค. 2024
- ⚠️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 Dawn 12 here
drive.google.com/file/d/1gQfg...
Dawn, Refresh, Spotlight... are all the same theme with different settings.
📄 Code snippets
amine-shopify.notion.site/ami...
🎁 Free video banner section:
amineammari.com/free-section/
👨💻 Do you need this feature on a premium theme?
amineammari.com/contact/
00:00 Intro
00:27 Installing the code snippets
02:59 Single-color swatch
04:47 Variant image as swatch
05:28 Multiple colors per swatch
06:09 Custom pattern swatch
07:28 Shape and size settings
08:13 Outro
Discover how to enhance your Shopify store with color swatches. Elevate your product pages effortlessly by learning how to add color swatches in Shopify, ensuring an immersive shopping experience for your customers. Dive into the specifics of incorporating Shopify color swatches on the product page, and unlock new features for the Shopify Dawn theme and the Free Shopify 2.0 themes with vibrant color options. Say goodbye to the ordinary and create a visually stunning online store that stands out. Watch now and elevate your Shopify game!
![How To Add Color Swatches On Product Page Shopify [Dawn 13.0.1]](http://i.ytimg.com/vi/OkJZbJyNNx8/mqdefault.jpg)
![เบิ้ล ปทุมราช - อ้ายกินดอง น้องลาบงัว ft. สแน็ก อัจฉรีย์ [Teaser]](http://i.ytimg.com/vi/n863TMuA1Ck/mqdefault.jpg)
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 64 [ซับไทย]](http://i.ytimg.com/vi/Pmsta0byEpk/mqdefault.jpg)
⚠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.
Do you know if the update will also include swatches for the catalog page?
can you make Dawn 13 please?
@@momocotton3049
We don't know yet, if it doesn't then I will make a video on that
@@user-zd3cf8fm4w
Shopify will release the color swatches feature soon
@@amine-ammari Do you know when? :)
Great, I already implemented your teachings on my page and you really make it very simple. Thanks for your time.
Amazing work!! Liked and subscribed!
Thank you soo much bro! this tutorial was on point 😍😍
Wow! This video is exactly what I was looking for. I really appreciate your hard work.
Thank you for your kind words 😄
Hi What a life saver just installed the code and my website looks amazing big thumbs up, thankyou
thank you very much for your time and effort .This is so helpful that i will ably it to my store ❤
Thanks man, that's what i needed, thanks a Lot!
Super easy and Helpful!!!!!
Merci pour tes vidéos Amine ! Elles sont vraiment utiles et facile à comprendre 🙂👍 Excellent mon ami
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
thank you so much!
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.
Glad I could help, Miguel 😄
Thank you.Helped alot
You're a MAGICIAN, L3ez
Paid apps will dislike this video, Great work and very easy. Thank you so much
That's true 😄
If you have topic suggestions please don't hestitate to share them
i appriciate your efforts for your viewers . this video is awesome
Happy to help 😄
Thank you for making this video. Clear steps and on the point. Keep up the good work!
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.
@@user-fd8tt1ie7c
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.
Don't stop uploading. Thank you
For sure 😄
Great work❤
Thanks!
Excellent!
Great vidéo keep up dude :)
Thanks will do 😄
Nice,helpfull
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.
Thanks for your feedback 😄
I will keep your suggestion in mind.
Thank you a lot, I love you !
You're welcome!
Love the name
@@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.
@@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
@@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
Thank youuuuuu 🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼😭😭😭
wonderfull🥰 for Amaazing video
Thanks 😄
Thank you very much for your time, very nice tutorial and well explained ! Is it possible to have the swatches on the collection page ?
Thanks Damien 😀
No not on the collection page, it will be in a future tutorial probably.
I can't believe it work! +1 subscriber
Thanks for the sub 😄
@@amine-ammarihey quick question, my color swatches seem to be affected by selected pill background, any quick way to disable that?
@@Klee87278
Do you mean the black border around the currently selected pill?
@@amine-ammari nvm i got it! Thanks for the reply
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 !
Glad it was useful for you!
Thanks for the video suggestion I will keep the size chart in mind.
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.
Thank you for your feedback, I will make a video about the collection page soon.
@@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!
@@TheRightSidePrints
No, not yet.
I will add it soon
niice vid bro
Hi Amine. Love your work. Will you be able to provide an update for Dawn 13.0.0?
Thanks, Tony
Yes there will be an update once Shopify releases color swatches natively
Another really useful Vid, thank you so much.
Is it possible to do sizes as well? I have rings so lots of size options
Thanks for the feedback.
Yes of course! You can have these swatches for any option name.
Thank you !
I may come back in confusion if I can't quite work it out@@amine-ammari
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
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.
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
You just need type Color,Style in the first option name field
Then select the variant image swatch style
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 for the feedback
You will need to write additional code to change the size
thank you for this amazing video, is it compatible with kolosal themes ?
Hi Hamza,
No, it's only compatible with the Free themes.
i dont have on my page product variant to paste the code what should i do ?
Please use the Dawn theme version that you can find in the description
Woww🎉🎉
😄👍🏼
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?
It's either the before or after pseudo-element of the swatch.
Unless you know CSS I advise you to hire a dev.
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
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?
thanks, please rewatch the video everything is explained
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
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? :)
Thanks for the feedback
When Shopify releases their native feature I'll make a video on the collection and search pages
@@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.
@@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/
Wooow., can you make a video for color swatches (feature collection? in collection page also please 🙏
Yes that's in the pipeline.
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?
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
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?
This will require some additional code edits, I will make a video on that once Shopify releases their native color swatch solution
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. 😭
This tutorial doesn't work on Dawn 13, please download the Dawn theme v12 in the description
Aweseome Vide THX! Is there any way that i also have the colour options on the featured Product Section.
Yes but you will need to write more code
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?
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
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
You can choose your own color codes based on the products that you are selling.
I show how to do that in the video
Nice Video! Do you know if this is also applicable for Dawn Version 11.0?
Thanks!
Yes it's compatible with Dawn 11
AMAZING!!!!!♥@@amine-ammari
Great tutorial. Thank You. Is it possible to extend this functionality to display the color swatches on collection page also?
I will soon make a video for the collection page.
@@amine-ammari Thank You!
i dont find where to put the second copy file, because in my case is not from line 25 to 28, anyone else?
This code doesn't work for Dawn 13 only 12 and below
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
Please finish the video you didn't setup the colors yet
Love your videos! Any chance an update on Dawn 13?
Shopify will release color swatches natively on Dawn 13, once they do I will make a video on it
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
Make sure you are using a theme version 12 or below, maybe you didn't install the code snippet properly
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?
Ok, I will look into that.
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!
Yes this works only for free themes version 12 or below
Hey amine, can you make one video for custom image megamenu for shopify dawn theme or any free theme
thanks for the suggestion
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?
Unfortunately, these code snippets don't have this feature, you will need to hire a dev for that.
@@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
Thank you so much for the video! mine is not working. Do I have to add all of my colors manually?
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.
@@amine-ammari thanks
hello great video thanks, but the first code does not let me change it, why? help please
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
how we can display this also on categories/collection pages?
You will need some code edits for it, once shopify releases the color swatches I will if that can be done
Hello, Great video! Quick question though. Do you have the craft 12 version?
This works for Craft 12
@@amine-ammari What about Craft 14? Does it work?
@@christianazzi6340 No unfortunately
maybe in my theme empire i cant add two colors?
how can i check??
This tutorial is only for the Free themes it won't work for the empire theme
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
Hi Cooper,
No unfortunately this will require additional code edits.
If I update the video I will make sure to implement this feature
@@amine-ammari Thanks for the reply, looking forward to that video if you make it!
Your Golden
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 :)
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
@@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?
@@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
@@amine-ammari That sounds awesome, i'll keep an eye out
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!
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
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
Please don't use quotes in the file name and make sure that the option name of the rule is the right one
bro Thanks for this video! but also same like this how to show color swatches on collection page??
Bro Thanks for the feedback
Once Shopify releases color swatches natively on the platform, I will make a video for the collection page
Hi there on sense theme the swatches are not selecting
Please make sure you are using a sense version 12 or below
i did everything exactly the same way you did but its not working brother
can you kindly do it
Please sure you are using a Free Shopify theme version 12 or below
this code is not working properly on mobile version website, when we select the variant after sliding two or three photos of product.
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.
@@amine-ammari thanks for your reply, can you fix this
@@bhagvaangodiswarallahkhudaparv
If a lot of people request it I will make a video on that for sure 😄
@@amine-ammari I understand... I also take my car out for long drives only when all the traffic lights in the city are green.
Please make a video for product image slider
Thanks for the suggestion!
Someone knows if this feature is available on Potsy theme?
Yes it's there
Please create a video on how to show color swatches on collection page and home page too
Thanks for the suggestion
But with Dawn 13 you will soon have color swatches natively
with an early access feature. How useless.@@amine-ammari
can I as well add different images for every variant?
Can you please be more specific in your question?
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
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
@@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
@@daaaniyalx Sense and Dawn are the same theme, they just have different settings
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?
As long as it's the same color value you only have to do it once
can I do it separately?@@amine-ammari
I want to make changes to only one product
@@chipmunk9784
You will need further coding changes unfortunately
Ok thank you
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
You must have made a mistake when installing the code
Please go through the installation process again
@@amine-ammari Thank you for your response! I re-did all your steps and it looks like in 2:07 I didn't delete Line 25-28. Appreciate you
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?
Please update your theme, you must be using an older version of Dawn. The file is under a different name.
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
Hi Luiz,
thanks for the video suggestion
I will add it to my list :)
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?
I thin you didn't copy paste the schma code
@@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?
@@isabellesui7473
You will need to add the option name in the settings as well
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
Thanks for the suggestions, I will keep that in mind if I update the video.
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 :(
That's strange normally they are round by default
Try the square one or if you know css you could fix it
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
which means for each product this is to be done ?
No you just add settings in your theme.
@@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..
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.
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
@@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?
@@amine-ammari Bravo! Hats off!
Any limits on the amount of Variants per product?
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
Does it work with Kalles Theme?
No only free themes
Hi Bro thanks for the Video, nur you wrote the German word for colour wrong: you wrote Fabre but it is Farbe
Ich spreche kein Deutsch
the white cirlce is black how to fix?
Brother help me , It's not working
@user-rq4oh2uw1p
Please follow the video and add new colors in the settings and your color swatches should appear
@@clashlegend3547
Please make sure you are using a Free Shopify theme, this doesn't work on the premium themes.
Then follow the video to setup the colors
It is free theme dawn . I have done properly which shows in video. Brother will you please help me personally I am facing problem
@@clashlegend3547
1. Make sure that you are using a recent version of Dawn, you can download a new one
2. Follow the installation process
3. Add the color codes for your products in the settings
Besides that I don't how I can help you further
Why did you stop uploading?
I didn't stop, a new video is coming soon 😄
WHAT????? It cant be that hard. Dislike
You can use an app if you want an easier way but you will have to pay for it.
Shopify will soon release an easier way to do this, once they do I will make a video about it.
You’re going to dislike his video bc you lack the ability to follow a step by step process?… he’s even giving you a link with pre written code and showing you exactly where to paste it…
Hello, thank you for this tutorial, i'm on sense theme and i can't find were i put code on "product variant-picker.liquid"
{%- for option in product.options_with_values -%}
{%- liquid
assign swatch_count = option.values | map: 'swatch' | compact | size
assign picker_type = block.settings.picker_type
if swatch_count > 0 and block.settings.swatch_shape != 'none'
if block.settings.picker_type == 'dropdown'
assign picker_type = 'swatch_dropdown'
else
assign picker_type = 'swatch'
endif
endif
-%}
{%- if picker_type == 'swatch' -%}
{{ option.name }}:
{{- option.selected_value -}}
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
{%- elsif picker_type == 'button' -%}
{{ option.name }}
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
{%- else -%}
{{ option.name }}
{%- if picker_type == 'swatch_dropdown' -%}
{% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
{%- endif -%}
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
{% render 'icon-caret' %}
{%- endif -%}
{%- endfor -%}
i have all this code, so were can i put it ? thx
You are using Sense version 13
The tutorial is not compatible with the latest version
Please use the Dawn version in the description
Man! you nailed it! I dont use to post comments on YT but you deserve it! keeping doing it! and post your paypal if you have! will be my pleasure send you some gift! Gracias!
Thanks for the awesome feedback 😄
I appreciate your generosity, but watching and sharing my content is enough for me 👍🏼
@@amine-ammari Gracias! One question … how to link product color variations to a different (corresponding) page? 🙏
@@sunilcornejomoreno8508
You can create a separate product for each color, or you can show variants as separate products
I made a video on the topic
th-cam.com/video/Ezm817Ozz8k/w-d-xo.html