How To Add Color Swatches - Shopify Product Page - Multi Color And Custom Image
Ғылым және технология
Color Swatches Shopify Product Page
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
🎨 Features:
Multi-color swatches
Dual color swatch
Tri-color swatch
Display variant image with a simple button click
No need for Shopify apps
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
Code: websensepro.com/blog/how-to-a...
Timestamps:
00:00 - Introduction
00:55 - Features of the color swatches
05:23 - Announcement: Shopify store promotion
07:20 - Adding code to settings_schema.json
08:10 - Replacing code in product_variant_picker.liquid
09:40 - Adding a new snippet: color_option.liquid
10:41 - Display Variant image swatches
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us
Пікірлер: 82
Watch this for Dawn 13.0.1 kzread.info/dash/bejne/gZ9-vMSDqbG0qJs.html
Awesome Dude. Badly waiting for your video on adding swatches to collections pages
@WebSensePro
5 ай бұрын
kzread.info/dash/bejne/iKKK15SnmNGofbg.html
Great tutorial! Thanks a lot!
@WebSensePro
4 ай бұрын
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Awesome content, very useful, question. is there a way to add a conditional option to the color swatches, for example: radio button with 1 color products and 2 colors products, and when you click in the corresponding radio button will display only that swatch and hide the other one?
Job saver Love you and lot of thanks!
@WebSensePro
3 ай бұрын
Your welcome
This was great! Would this also work with icons if I wanted add the styles I offered a print in? For example if the customer had a icon choice of a T-shirt, a long-sleeve tee or a sweatshirt?
@WebSensePro
4 ай бұрын
Icons meaning images?
Super 👍
@WebSensePro
5 ай бұрын
Thank you 👍
Hi! How can I do this for multiple variant options? Let's say you have "Color" variants, and also have "Pattern" variants as an option on the product. So basically we need image swatches for the both options. Thanks!
@WebSensePro
3 ай бұрын
Hmm... unfortunately thats not going to work with this
worked! but i got a question, is it just me or is the circles of the swatches not really round? but a bit flated out? how can we make it perfectly rounded? thanks!
@WebSensePro
4 ай бұрын
With a little more CSS code
Great! Thanks. Can you make a tutorial fot this feature fot Dawn v13.0.0 theme, please?
@xthepfandyi5855
4 ай бұрын
Yes, that would be really great.
@WebSensePro
3 ай бұрын
In progress
@ecomdrako
3 ай бұрын
I figured it out... *Firstly, the part of his code where he wrote:* Replace this with: *Secondly, this part:* {% render 'product-variant-options', product: product, option: option, block: block %} Replace it with: {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} *Finally, v13 has 2 different .* The you are to replace is directly under this line: {%- elsif picker_type == 'button' -%}
@WebSensePro
3 ай бұрын
@@ecomdrako Great, can you share store link?
Thank you. Unfortunately, it doesn't work for me on "Be Yours" theme, can you guide?
@WebSensePro
2 ай бұрын
It's not for "Be Yours" theme, if you want us to add that on your behalf. Contact via websensepro.com/contact-us for paid support
Hi, How can we make this workable in dawn 13.0, the fieldset code which you have mentioned to replace is not appearing.
@WebSensePro
4 ай бұрын
Yes, new tutorial in progress
@user-ys1gl8wd5f
4 ай бұрын
Really waiting for it. Your videos are always the best! Thank you for your time and work! @@WebSensePro
@tryingtobreakaway
3 ай бұрын
any update when this will be available to add swatches for dawn 13.0 thanks@@WebSensePro
Hi, As new update 13.0 is released with inbuilt ability to do swatches. I went through the documentation and it says "The Variant Picker now supports color swatches! This depends on the Product Taxonomy feature, which is rolling out gradually over the coming weeks." I tried to do swatches in 13.0 but i think category meta fields is yet not available on our store.Can you throw some light on this, as your code is working perfectly fine in 12.0. but we need to be updated with latest versions of theme also. It would be kind of you if you guide as how to do the same in 13.0 version. Thanks in advance.
@WebSensePro
4 ай бұрын
Correct, Shopify added latest "Category Metafield" which is not yet available. Let's see when it roles out to our stores
@user-yy6fu3vn4n
4 ай бұрын
@@WebSensePro Thanks for your prompt reply. Even Taxonomy is being updated and all will be updated by feb end. so i think it will be available soon.
@CliftonLo
3 ай бұрын
I'm using the v13.0 & follow the steps until color.options.liquid but not working. I then saw the swatches can be setup if I have category metafields setup but not clue how to setup that ?! Will you be having a video tutorial on how to setup this with category metafields??
How do I change or add a border around the swatches? It's difficult to see which swatch is selected on a dark background. Thanks!
@WebSensePro
3 ай бұрын
Hmm... good idea, will add that option on next tutorial
This is great, but how do you get this option to work on the collection pages?
@WebSensePro
5 ай бұрын
Next video is for collection page
@aimbotdad
5 ай бұрын
Sneak peak?
I tried it in the sense theme and I could not. if the store is in colombia in spanish is there a different step to do?
@WebSensePro
4 ай бұрын
Make sure you mentioned "Color" in your own language in Customize settings
Unfortunately, this method is not working with Dawn 13.0.0. Can you guide ??? I think we have to make small changes in the 'product-variant-picker.liquid' file. Can you help in this ???
@user-yy6fu3vn4n
4 ай бұрын
When we publich 13.0 theme its showing "Your code changes won't be included because one or more changes conflict with the update. After the updated theme is added to your theme library, you will be able to copy your code over or re-configure some apps. " Did you edit the code with same process as mentioned in the video?
@achintyajainbusinessconsul8831
4 ай бұрын
@@user-yy6fu3vn4n Yeah, I did so. But it's not working for Dawn 13.0.0 I even updated the theme, but custom code never gets copied.
@WebSensePro
4 ай бұрын
New tutorials on the way
Hey! So i did everything and it worked! However, when my page is translated to Spanish the color doesn't show.. I did put the color in Spanish along with the hex code and it still doesn't work. Help please
@WebSensePro
3 ай бұрын
Will have to check whats the issue is
hey there I want to do something like changing product on when clicking on that swatches how can I do that?
@WebSensePro
2 ай бұрын
Not clear about your requirements
@MuzammilBilal-tc6ww
2 ай бұрын
NVM btw thanks for reply ❤️
I'm working on debut theme but I can't find product-variant-options snippet. how to solve this issue ?
@WebSensePro
3 ай бұрын
Its not for debut theme
Did now work on my Dawn theme
@WebSensePro
2 ай бұрын
Please check updated video for Dawn 13.0.1
How can I make this work if I have 2 variants. I don't need color or image for the second one, it can remain a simple pill. But the color swatch should work. Currently It isn't working, the swatch circle came out distorted for me. Also, using Dawn 14.0.0. Thanks a lot.
@WebSensePro
13 күн бұрын
Video is coming, soon!
Hey, it only works on one name of variant, for exemple it’s gonna work on all my products with the variant “Color” but not those with the name varant “Shape”, i already tried to put multiple names in the name section : “Color, Shape” but it only work on the first word, how can i do that correctly please? Thanks in advance 🙂
@WebSensePro
2 ай бұрын
Yes it works only with 1 option, we cabt have multiple options unfortunately
Does now work with Crave ( Theme settings do not have this option...😢
@WebSensePro
14 күн бұрын
Please contact via websensepro.com/contact-us for paid support
can't get it to work on dawn theme
@WebSensePro
5 ай бұрын
That's weird it's tested upto Dawn 12.0.0
great tutorial, however, it's not working on the new Dawn 13 :(
@user-yy6fu3vn4n
4 ай бұрын
13.0 version is just released. In our store category metafields is not showing. i think It will be available gradually.I think after that we will be able to do variants with swatches without any code.
@WebSensePro
4 ай бұрын
Correct, yes they added latest "Category Metafield" which is not yet available. Let's see when it roles out
Aoa Bro Kia Hall Hain please TikTok agency Account ka Tareqa bata Dy jes mai Pakistan location enable hu please bro
@WebSensePro
5 ай бұрын
Sure, will do
this did not work for me. i followed all the step as mentioned. i am using Ride theme and recenly updated the version. Also the part where the data needs to be replaced. that is different to what is mentioned by you. Pls guide
@WebSensePro
3 ай бұрын
Latest tutorial in progress
yeah not working on sense theme
@WebSensePro
3 ай бұрын
Which version?
i also try this code but not working .. bro please upload correct coding material thanks
@WebSensePro
3 ай бұрын
Shopify is introducing swatch with in the system so there will be no need for customization. Feature has not rolled out yet
I like ur video but I deleted everything because you added a CODE to appear on Shopify Customization page (the massage to Subscribe to ur channel) that makes me NOT to trust ur code.
@WebSensePro
3 ай бұрын
No one forcing you to use it. Use it if you like
Bruh they updated to spotlight theme. The second code to replace doesn't exist anymore. Coud you do an update
@WebSensePro
2 ай бұрын
Yes already created an updated video for that
Great video, thank you. You are killing 3rd party businesses that provide app for this :))
@WebSensePro
4 ай бұрын
Hahaha Shopify has killed them all already. Swatches is coming natively shortly
Hello sir it's not working ?
@WebSensePro
3 ай бұрын
Yes, updated tutorial will soon come. It will work on dawn > 12
didn't work
@WebSensePro
3 ай бұрын
This works in Dawn 12, updated tutorial coming shortly which will work on Dawn 13.0.1