How To Add Color Swatches On Product Page Shopify [Dawn 13.0.1]
Vložit
- čas přidán 24. 07. 2024
- How To Add Color Swatches On Product Page Shopify [Dawn 13.0.1]
Hello everyone and welcome back to another tutorial! In this video, I'll guide you through the process of adding custom color swatches to your Shopify product page without using any apps in Dawn 13.0.1
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
Code: websensepro.com/blog/color-sw...
👉👉 How To Add Wishlist Without APP • How To Add Wishlist in...
👉👉 How To Show Discount/Sale Badge in Shopify: • How To Show Discount/S...
👉👉 How To Add Password Protected Collection For Shopify - Updated: • How To Add Password Pr...
👉👉 How To Add Video On Shopify Homepage With Autoplay: • How To Add Video On Sh...
Timestamps:
00:00 - Introduction
01:25 - Overview of tutorial
05:10 - Step-by-step implementation guide
12:17 - Adding custom variant images
14:30 - Conclusion
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us
Hire Us On Upwork: www.upwork.com/freelancers/~0...
Hire Us on Fiverr: www.fiverr.com/websensepro - Věda a technologie
![Designing a Clothing Store COLLECTION Page [Shopify Dawn Theme]](/img/n.gif)
FANTASTIC! This was EXACTLY what we were looking for! You're a life saver!
Glad it helped! Please share this on your network as a favor
This content is pure gold. Thanks a ton for the precious info bro 🙏❤
My pleasure!
Absolute legend. I owe you my life.
This video is fantastic and easy to follow; many, many thanks!
Your welcome, don't forget to share and like
Just wanted to leave this comment here to let you know that you are doing a great service to all of us! I pray your channel grows a lot every day!
Thank you so much!
Saved me good time, cheers legend!
Your welcome, don't forget to subscribe our channel
This works to perfection in Dawn 13.0.1. Today I tried it in Dawn 14.0.0, which Shopify must have released in the past few days, but it doesn't work with the 'Quick Add' buttons. If you have any advice, that would be greatly appreciated. Once again, thank you so much for making these really helpful videos.
Thanks for notifying we will definitely check it
It works now
many thanks! you are a hero
You're welcome!
This is great thank you!! Is there a way to put the color and size variants side by side instead of one above the other?
Yes it's possible with Liquid and CSS customization
New suscriber, thank you every much
Thanks for the sub!
Thank You so much sir this video is very helpful thanks alot..
Most welcome
ur the man
Very nice video bro ✌🏽 Now just a Video with Color Swatches on collection page is missing 😁
Would be happy to see this.
Will do soon
Thank you so much brother
Always welcome
Thanks for this video, i tried to use the comma to control multiple variations and it seems to work but by putting different variation ID, the label above the swatch does not change, as i click had emailed you, see whether i can get it to recognize other ID instead of Just Color.
Noe clear what you mean here
Great update! Had a question though on where it pulls the hex code. I have a large number of products that each contain a big set of unique colors attached to each product. In the past before Dawn 13 i set up a metafield Color under the Variant of each product. Is there any way to have to hex code pulled from that metafield of the variant?
Hmm... thats doable
@@WebSensePro just wanted to follow up to see if you had any luck with this? Your content is awesome and keep up the great work!
Thank you for this!!! Is there a way to line-out the swatches when a variant is out of stock?
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
❤❤❤❤very thanks sir
Most welcome
Legend
worked good cheers
Glad it helped
Thank you for the great work! Can you share a way to make color swatches work also on other languages versions as well? Now I only see them in the English version of the store.
Please contact via websensepro.com/contact-us for paid support
Is it possible to make the variant image swatches go in a different color if it has sold out? or at least disappear from the menu...Like a shirt that I do have size small in yellow but I don't have anymore in size X, so when you click size x the yellow color turn dark or disappear.....is there an easy fix for that?
Please contact via websensepro.com/contact-us for paid support
Hello my friend.
First of all thank you very much for your Tutorials!
I have a question and I am sure you can help me.
I have a dark themed store, which meanns you can not really see which color is selected, because the black border around the color swatch is not visible on a dark backgriund. I want to customize the Border around the round color swatch with a differnet color than Black. for example white or something different.
can you help me where to do that?
I have fixed it myself. Stll thanks for the turorial
Great!
Hello.. May I know how to make it smaller while maintaining the circle ratio? The swatches get oval shape when making it smaller. Thank you.
Please contact via websensepro.com/contact-us for paid support
Thanks a lot
Welcome 😊
Is there a way to change the outline color of the variant pills?
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
I accidently hit the publish button from the duplicate dawn theme and color swatches didn't appear on my product page. what should i do to appear it on my product page? the new dawn version is 14
Switch back to the old theme
This does seem to break in Dawn 15.0. Any chance you have a fix in the works? It looks like Shopify has changed the logic around looping through the variant options {%- for value in option.values -%}
Yes, if it's functioning correctly, and if not, please reach out for paid support at websensepro.com/contact-us.
You are my hero. I was afraid it would not work with Dawn 14.0.0, but it did, I do admit that my shop don't have "quick Add" buttons like someone mention it in the comment...for me it worked perfect
Great, thanks for letting us know
Hi! I loved your video! It worked perfectly with Dawn 14.0! However, I have multiple color variants, and the images are taking up a lot of space. Could we make the image swatch slide instead of occupying multiple rows on the product page? I have over 10 images for colors for my product. It would save so much space and look much nicer. Could you share the code or make a video about it? Thanks, your work is amazing! Keep it up!
Please contact via websensepro.com/contact-us for paid support
I have encountered a bug, when i click one of the colors it immediately switches to another. Do you have any suggestions?
Hi! Is there any way to add swatches to collection pages? I'm using dawn v15
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
I implemented transparent header everything is ok but it can't change custom icon color like search icon cart icon and account icon also
Can you please explain it how can i change it also thanks
Please share which theme and version you are using?
@@WebSensePro dawn 13.0.1
This is amazing, but I can only add 1 product image per colour - and it still shows the other images of each.
How do I add multiple variant images and only show the chosen one.
Please contact via websensepro.com/contact-us for paid support
Will this tutorial work for Dawn 14.0.0? (i had a typo in my prior comment where i referenced 4.0.0)
Yes, it's worked for Dawn v14
How to use for Multiple Variations - For example if I have Top Color & Base Color, in that case how can I show multiple swatches ?
Please contact via websensepro.com/contact-us for paid support
This is not working in the sense version 15.0.0 theme, how to fix it, after clicking that variant is not opening 😢
Please contact via websensepro.com/contact-us for paid support
Could you make an updated video for v14.0?
Coming, soon!
how do you make the swatches smaller while maintaining the circle ratio ?
You can do that via customize settings on this section
@@WebSensePro hello can you explain this further? May I know how to make it smaller while maintaining the circle ratio? The swatches gets oval shape when making it smaller. Thank you.
does this work for the new Dawn 15.0 version?
No, please contact via websensepro.com/contact-us for paid support
does this still work for dawn theme 14.0.0?
Yes
it will work in xtra theme
How Can I do for the version 15.0?
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Hello, thank you! But with Dawn 14 it does not help (
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Good but its only support one swatches, how can apply on multiple swatches?? I subscribed your channel
This feature is not yet available on this but soon will create a new video on that too
everything fine but when i change color swatches the name stuck at black
That's weird it should work fine
Will this tutorial work for Dawn 4.0.0?
You try this tutorial - czcams.com/video/GmrzT-QHtwg/video.htmlsi=MEqE5KeQSmnvrelA
Nice bro your channel is incredible don't make it paid
I will try my best
will this work on Dawn 14.0?
You can try this tutorial and if it doesn't work, please contact via websensepro.com/contact-us for paid support
I don't understand how this guy in the video has different functions in Shopify than me. I don't have the same functions under SETTINGS as he does. how did he do that?
Please contact via websensepro.com/contact-us for paid support
my not working
Will have to check for Premium Support contact websensepro.com/contact-us
How can I achieve the following:
I created a contact Lens store for someone and they want dropdown options for eyesight numbers for powered Lenses..
For example:
Left eyesight No: -0.00..more options
Right eyesight No: -0.75..more options
How can I achieve this on Dawn.
I'm currently using App for this option but I want to do this through code and have option inside the dawn theme.
They also want more complex scenario..
Buy 2 lens pack:
Select 1st lens Color:
1st lens left eyesight Number:
1st lens right eyesight number:
Select 2nd Lens color:
2nd lens left eyesight Number:
2nd Lens right eyesight Number:
Please contact via websensepro.com/contact-us for paid support
why sir
??
please never make your channel paid for code and other things like another making because this is just a way to lose your audience.
Noted
So far by Color Hex Code it works on Dawn 14.0.0. Thanks a lot mate!
However, I have SKUs that are MULTI / MISC Color - which I tried to follow the instruction "You can also add image files instead of using colors, in lowercase with spaces replaced by hyphens. Example: Green kaki: green-kaki.png"
My SKU Color Name: Misc
Field Entry: Misc: misc.png
Any idea why this is not working ?!?! 🤔
Will have to check
Legend
Will this work on Dawn 14.0.0 too?
Color swatches dawn v14 tutorial is coming, soon!