Unfortunately, this does not work if you have a product with multiple variants. The indexes will show incorrectly and therefore select the wrong colors
Hi very useful thanks, but taken you select a color, the button is not “highlighted”, basically you don’t know what’s selected currently, how to solve this please?
Thanks for a perfect tutorial! Is there a way to make them rounder and make them to cross between procuts? Examples: 4 colors to select and if you select "blue" you will be redericted to the acutally product thats blue?
Thank you so much!! I was going crazy to fix that and I did it!! Perfect tutorial! I would like to change de button, make it perfect rounded... You could teach this too!!! 😁
Hey guys, does anyone know how to give the variant selected an active state? As it would be great to indicate to the user which one is currently selected. Thank you!
This is great, thank you very much for making this tutorial! Is there a easy way to make it show an image instead of a solid color? Edit: Ok so I fiigured it out.. instead of creating a color metafield, create a text one, this will hold the url of the image you want to use for the button background. On the product page where you enter the metafield data, paste the url of the image you want to use in the available text area. Next, in the code instead of style = background color, it needs to be background image and then wrap the metafield info in the url tag like this: style="background-image: url({{ product.variants[forloop.index0].metafields.color.value }}) this should now show the image as the backgound of the button. Next you will need to style the button, it will shrink once the text has been removed.
tried this but didn't work for me. wondering if my size 1 and size 2 varients mess up the colour setting as some colours didn't show up for me despite being picked correctly in the product page
Excellent job on this! Thank you! Is there a way for the customer to know exactly what color they are selecting in addition to just what color they see? Sometimes the colors can very similar and it's helpful for them to see the title of the color as well when it's selected. Is that possible in the Dawn template?
Heyy, this worked for me, but I want it to update the background color on hover and select, then change back to white when not selected. any tips on how to do that?
Hello. Thankyou for this tutorial. This doesn't seem to work for me if my second variant has multiple options EG: 4 sizes. I am using Dawn theme version 7.0.1.
Good morning, Very good video. My question: on the same product the customer must choose the color of the bag (I managed to put the samples) but the second variant is the handle of the bag or he can also choose his color (the same as the bag) and the I can't submit the color samples. Am I missing some code? thank you for your reply
In the current version of dawn it looks like you have to use the product variant snippet, not the main product page under sections. Still, the code in the product variant snippet does not look quite the same as what you have here (although it is similar) and as I result I could not get this to work - an updated vid would be massivley appreciated from me
There's the first file you found which you found with the name "product-variant-picker.liquid", but that one only combines everything for the variant picker together. There's another subfile which is referenced in product-variant-picker.liquid named product-variant-options.liquid. In there you'll find the liquid/html that actually handels the radio buttons of the variant picker. Hope this helps :)
Hello , hope you are doing well, I have thise problem , where i want to customize the collection such that when the customer clicks the blue then red color, it overrides the blue color then filters only the red color
Sir i have a question please help me. i installed impulse theme on my store but problem is that in collection filters when click on one color filter it shows related products according to color, when i select second color it does not deselect the previous one and also select the another color and now shows the result of two colors products. but i want select only one at one time and other is deselect automatics. give me solution
Hey, do you maybe know, how to show different band color variations for different watches on the product page? (Variation1: Watch; Variation2: Band Colour) I would be so grateful! 🌟
Hey, can you make a video on how to add just image section and just like column and we can put a link too. When someone clicks on the image that should go the image's link which we have set through images. I have seen it somewhere, now not able to find it.
Or if you have this working, you could try: To add images, instead of creating a color metafield, create a text one, this will hold the url of the image you want to use for the button background. On the product page where you enter the metafield data, paste the url of the image you want to use in the available text area. Next, in the code instead of style = background color, it needs to be background image and then wrap the metafield info in the url tag like this: style="background-image: url({{ product.variants[forloop.index0].metafields.color.value }}) this should now show the image as the backgound of the button. Next you will need to style the button, it will shrink once the text has been removed.
Great tutorial ! I want to use dawn but it has 2 issues. Unfortunately, Dawn's product page is confusing when you have multiple colors and images; when you click a color option, the image order changes. they should only display the selected options images and toggle the rest. Also, Dawn doesn't show the product's color options in the collection page; I really think they should add an option to turn this feature on.
i want to make swatches but not on colors . i want to show some relevant product on One Product just like swatch . when user click on swatch product navigate to that specific product . can you help me
To add images, instead of creating a color metafield, create a text one, this will hold the url of the image you want to use for the button background. On the product page where you enter the metafield data, paste the url of the image you want to use in the available text area. Next, in the code instead of style = background color, it needs to be background image and then wrap the metafield info in the url tag like this: style="background-image: url({{ product.variants[forloop.index0].metafields.color.value }}) this should now show the image as the backgound of the button. Next you will need to style the button, it will shrink once the text has been removed.
Hi! I have just one request plz make a vedio on create something (POST) with Rest Admin Api's with Vanilla PHP and one Graphql mutation example. Or just share one example of Shopify Call Method type Post function. Thank You
![How To Add Color Swatches [Dawn 15.1.0]](/img/n.gif)
Learn more Shopify Theme Development here:
✅ Shopify Liquid Programming Course (Use COUPON CODE: 6XZXDGG2):
weeklyhow.com/courses/learn-shopify-liquid-programming-in-1-hour/
✅ Shopify Theme Development w/ TailwindCSS & Shopify CLI
weeklyhow.com/courses/shopify-theme-development-tailwindcss/
✅ Shopify Liquid Programming Course:
www.udemy.com/course/learn-shopify-liquid-programming/?couponCode=9BAEB3A223BB6BA4D37E
✅ Shopify Theme Development w/ TailwindCSS & Shopify CLI
www.udemy.com/course/shopify-theme-development-tailwindcss/?couponCode=AUGMENTEDREALITY
OH WOW WHAT A PERFECT TUTORIAL!!!! - You are the best. Even got it to work within the prestige theme :)
Gr8 tutorial... I am working on shopify ecommerce ... Thank you..
It worked for me! Thanks a lot!
Happy it worked on your end! 🙏
Very useful video, exactly what I was looking for. Very easy to follow even if you don't have any specialized knowledge in Liquid. Thank you!
THANK YOU!!!!!!! 👍 Useful!!!!!!
Unfortunately, this does not work if you have a product with multiple variants. The indexes will show incorrectly and therefore select the wrong colors
ua-cam.com/video/dSpB53XgmIo/v-deo.html
Thank you man! You just really helped me out!
Thank you so much, amazing works
Hi very useful thanks, but taken you select a color, the button is not “highlighted”, basically you don’t know what’s selected currently, how to solve this please?
Can you make video of how to display/ enable breadcrumbs .?
Very helpful, and well presented. thank you
Thanks for a perfect tutorial!
Is there a way to make them rounder and make them to cross between procuts?
Examples: 4 colors to select and if you select "blue" you will be redericted to the acutally product thats blue?
Thank you so much!! I was going crazy to fix that and I did it!! Perfect tutorial! I would like to change de button, make it perfect rounded... You could teach this too!!! 😁
Hey guys, does anyone know how to give the variant selected an active state? As it would be great to indicate to the user which one is currently selected.
Thank you!
Thx, Works in sense
This is great, thank you very much for making this tutorial! Is there a easy way to make it show an image instead of a solid color?
Edit: Ok so I fiigured it out.. instead of creating a color metafield, create a text one, this will hold the url of the image you want to use for the button background. On the product page where you enter the metafield data, paste the url of the image you want to use in the available text area. Next, in the code instead of style = background color, it needs to be background image and then wrap the metafield info in the url tag like this: style="background-image: url({{ product.variants[forloop.index0].metafields.color.value }}) this should now show the image as the backgound of the button. Next you will need to style the button, it will shrink once the text has been removed.
THANKS MAN!!!!!!!!!!!!!1
Gran video, 👍
tried this but didn't work for me. wondering if my size 1 and size 2 varients mess up the colour setting as some colours didn't show up for me despite being picked correctly in the product page
Do you have a tutorial for the Symmetry Shopify theme?
Excellent job on this! Thank you! Is there a way for the customer to know exactly what color they are selecting in addition to just what color they see? Sometimes the colors can very similar and it's helpful for them to see the title of the color as well when it's selected. Is that possible in the Dawn template?
How about instead of color, we you sa variant's image? Is that possible?
Heyy, this worked for me, but I want it to update the background color on hover and select, then change back to white when not selected. any tips on how to do that?
Not working in Dawn 9.0
do you know what about refresh theme? thats very popular theme
Hello. Thankyou for this tutorial. This doesn't seem to work for me if my second variant has multiple options EG: 4 sizes. I am using Dawn theme version 7.0.1.
Good morning,
Very good video. My question: on the same product the customer must choose the color of the bag (I managed to put the samples) but the second variant is the handle of the bag or he can also choose his color (the same as the bag) and the I can't submit the color samples. Am I missing some code? thank you for your reply
I cannot see variant_picker when control finding on 5 minutes 30 seconds into the video. If this does not appear, what do you suggest?
Thanks, This is very helpful :)
Hi, thanks for the video, but when you change the position of the option, it stops working
Genius!
In the current version of dawn it looks like you have to use the product variant snippet, not the main product page under sections. Still, the code in the product variant snippet does not look quite the same as what you have here (although it is similar) and as I result I could not get this to work - an updated vid would be massivley appreciated from me
There's the first file you found which you found with the name "product-variant-picker.liquid", but that one only combines everything for the variant picker together. There's another subfile which is referenced in product-variant-picker.liquid named product-variant-options.liquid. In there you'll find the liquid/html that actually handels the radio buttons of the variant picker.
Hope this helps :)
can you make a video on "how to create a products slider on the product page (Dawn Theme)
Thanks
Thank you Umair, I'll keep this in mind!
Thumbs up! Very cool tutorial. But how do we make the swatches a perfect circle? (It's currently an oval and doesn't look as clean.)
please also give link to any repo where you can save all the code that you wrote so it can save time to write everything from screen.
Hello , hope you are doing well, I have thise problem , where i want to customize the collection such that when the customer clicks the blue then red color, it overrides the blue color then filters only the red color
Do I need to do it to every product, one by one ?
How about in Prestige? Can you show how is this done in prestige?
Hi! What about when you have multiple products? Because it seems like this code sticks to just one product and it doest apply on others. Thanks!
tysm
Do you know how to display dual color?
I have more than 100 products, There is any easy way to do it bulk?
Hi! Did you have any ideas how Shopify app proxy work with custom php. Did it work with custom Shopify App ??
Sir i have a question please help me. i installed impulse theme on my store but problem is that in collection filters when click on one color filter it shows related products according to color, when i select second color it does not deselect the previous one and also select the another color and now shows the result of two colors products. but i want select only one at one time and other is deselect automatics. give me solution
Hey, do you maybe know, how to show different band color variations for different watches on the product page? (Variation1: Watch; Variation2: Band Colour)
I would be so grateful! 🌟
How to disable Auto Select for variant?
Hi, what if I have a lot of variable products and don't want to recreate the color? Is there any faster way? Thanks
Hey, can you make a video on how to add just image section and just like column and we can put a link too. When someone clicks on the image that should go the image's link which we have set through images.
I have seen it somewhere, now not able to find it.
ua-cam.com/video/x3zAaxzyugs/v-deo.html is this what you're looking for?
Or if you have this working, you could try:
To add images, instead of creating a color metafield, create a text one, this will hold the url of the image you want to use for the button background. On the product page where you enter the metafield data, paste the url of the image you want to use in the available text area. Next, in the code instead of style = background color, it needs to be background image and then wrap the metafield info in the url tag like this: style="background-image: url({{ product.variants[forloop.index0].metafields.color.value }}) this should now show the image as the backgound of the button. Next you will need to style the button, it will shrink once the text has been removed.
Great tutorial ! I want to use dawn but it has 2 issues.
Unfortunately, Dawn's product page is confusing when you have multiple colors and images;
when you click a color option, the image order changes.
they should only display the selected options images and toggle the rest.
Also, Dawn doesn't show the product's color options in the collection page;
I really think they should add an option to turn this feature on.
real color options make me so confused. Can't set a default image.
ua-cam.com/video/dSpB53XgmIo/v-deo.html
i want to make swatches but not on colors . i want to show some relevant product on One Product just like swatch . when user click on swatch product navigate to that specific product . can you help me
same thing but instead use the url or image
i was following till i got to a t junction then i couldn't find my way.
Hi, how would I do if I want to add swatches images or textures instead of colors? help pleasev
To add images, instead of creating a color metafield, create a text one, this will hold the url of the image you want to use for the button background. On the product page where you enter the metafield data, paste the url of the image you want to use in the available text area. Next, in the code instead of style = background color, it needs to be background image and then wrap the metafield info in the url tag like this: style="background-image: url({{ product.variants[forloop.index0].metafields.color.value }}) this should now show the image as the backgound of the button. Next you will need to style the button, it will shrink once the text has been removed.
Cool tutorial, but if you add any other variant, is gonna color it too. So this cannot be used with products with more than one variant.
ua-cam.com/video/dSpB53XgmIo/v-deo.html
{% if option.name == 'Color' %} and so and so
Hi! I have just one request plz make a vedio on create something (POST) with Rest Admin Api's with Vanilla PHP and one Graphql mutation example. Or just share one example of Shopify Call Method type Post function. Thank You
I'll take a note of that. Thanks
works!
🌟👍
👌👍
🙌
r u a filipino?
vilken shuno bre