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

  • @WebSensePro
    @WebSensePro2 ай бұрын

    Watch this for Dawn 13.0.1 kzread.info/dash/bejne/gZ9-vMSDqbG0qJs.html

  • @santhosh6246
    @santhosh62465 ай бұрын

    Awesome Dude. Badly waiting for your video on adding swatches to collections pages

  • @WebSensePro

    @WebSensePro

    5 ай бұрын

    kzread.info/dash/bejne/iKKK15SnmNGofbg.html

  • @4502422300
    @45024223004 ай бұрын

    Great tutorial! Thanks a lot!

  • @WebSensePro

    @WebSensePro

    4 ай бұрын

    Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

  • @carlosdiaz5906
    @carlosdiaz590628 күн бұрын

    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?

  • @MuzammilBilal-tc6ww
    @MuzammilBilal-tc6ww3 ай бұрын

    Job saver Love you and lot of thanks!

  • @WebSensePro

    @WebSensePro

    3 ай бұрын

    Your welcome

  • @marknance6699
    @marknance66995 ай бұрын

    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

    @WebSensePro

    4 ай бұрын

    Icons meaning images?

  • @Aiden2work
    @Aiden2work5 ай бұрын

    Super 👍

  • @WebSensePro

    @WebSensePro

    5 ай бұрын

    Thank you 👍

  • @kingabrigittapalko3934
    @kingabrigittapalko39344 ай бұрын

    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

    @WebSensePro

    3 ай бұрын

    Hmm... unfortunately thats not going to work with this

  • @ichooseluna
    @ichooseluna4 ай бұрын

    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

    @WebSensePro

    4 ай бұрын

    With a little more CSS code

  • @user-oo2jr5dz4h
    @user-oo2jr5dz4h4 ай бұрын

    Great! Thanks. Can you make a tutorial fot this feature fot Dawn v13.0.0 theme, please?

  • @xthepfandyi5855

    @xthepfandyi5855

    4 ай бұрын

    Yes, that would be really great.

  • @WebSensePro

    @WebSensePro

    3 ай бұрын

    In progress

  • @ecomdrako

    @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

    @WebSensePro

    3 ай бұрын

    @@ecomdrako Great, can you share store link?

  • @shirfaygrossman8208
    @shirfaygrossman82082 ай бұрын

    Thank you. Unfortunately, it doesn't work for me on "Be Yours" theme, can you guide?

  • @WebSensePro

    @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

  • @villokse4842
    @villokse48424 ай бұрын

    Hi, How can we make this workable in dawn 13.0, the fieldset code which you have mentioned to replace is not appearing.

  • @WebSensePro

    @WebSensePro

    4 ай бұрын

    Yes, new tutorial in progress

  • @user-ys1gl8wd5f

    @user-ys1gl8wd5f

    4 ай бұрын

    Really waiting for it. Your videos are always the best! Thank you for your time and work! @@WebSensePro

  • @tryingtobreakaway

    @tryingtobreakaway

    3 ай бұрын

    any update when this will be available to add swatches for dawn 13.0 thanks@@WebSensePro

  • @user-yy6fu3vn4n
    @user-yy6fu3vn4n4 ай бұрын

    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

    @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

    @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

    @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??

  • @thebartongroup4612
    @thebartongroup46123 ай бұрын

    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

    @WebSensePro

    3 ай бұрын

    Hmm... good idea, will add that option on next tutorial

  • @aimbotdad
    @aimbotdad5 ай бұрын

    This is great, but how do you get this option to work on the collection pages?

  • @WebSensePro

    @WebSensePro

    5 ай бұрын

    Next video is for collection page

  • @aimbotdad

    @aimbotdad

    5 ай бұрын

    Sneak peak?

  • @jairocamacho8308
    @jairocamacho83084 ай бұрын

    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

    @WebSensePro

    4 ай бұрын

    Make sure you mentioned "Color" in your own language in Customize settings

  • @achintyajainbusinessconsul8831
    @achintyajainbusinessconsul88314 ай бұрын

    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

    @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

    @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

    @WebSensePro

    4 ай бұрын

    New tutorials on the way

  • @OmniShop-COL
    @OmniShop-COL4 ай бұрын

    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

    @WebSensePro

    3 ай бұрын

    Will have to check whats the issue is

  • @MuzammilBilal-tc6ww
    @MuzammilBilal-tc6ww3 ай бұрын

    hey there I want to do something like changing product on when clicking on that swatches how can I do that?

  • @WebSensePro

    @WebSensePro

    2 ай бұрын

    Not clear about your requirements

  • @MuzammilBilal-tc6ww

    @MuzammilBilal-tc6ww

    2 ай бұрын

    NVM btw thanks for reply ❤️

  • @user-jg5dl2fd2t
    @user-jg5dl2fd2t4 ай бұрын

    I'm working on debut theme but I can't find product-variant-options snippet. how to solve this issue ?

  • @WebSensePro

    @WebSensePro

    3 ай бұрын

    Its not for debut theme

  • @PathshalaDigitalAcademy
    @PathshalaDigitalAcademy2 ай бұрын

    Did now work on my Dawn theme

  • @WebSensePro

    @WebSensePro

    2 ай бұрын

    Please check updated video for Dawn 13.0.1

  • @ankitajain1463
    @ankitajain1463Ай бұрын

    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

    @WebSensePro

    13 күн бұрын

    Video is coming, soon!

  • @milestonyembog932
    @milestonyembog9323 ай бұрын

    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

    @WebSensePro

    2 ай бұрын

    Yes it works only with 1 option, we cabt have multiple options unfortunately

  • @olgabaykova8338
    @olgabaykova833827 күн бұрын

    Does now work with Crave ( Theme settings do not have this option...😢

  • @WebSensePro

    @WebSensePro

    14 күн бұрын

    Please contact via websensepro.com/contact-us for paid support

  • @user-du4om2ie2t
    @user-du4om2ie2t5 ай бұрын

    can't get it to work on dawn theme

  • @WebSensePro

    @WebSensePro

    5 ай бұрын

    That's weird it's tested upto Dawn 12.0.0

  • @jonathanohayon3022
    @jonathanohayon30224 ай бұрын

    great tutorial, however, it's not working on the new Dawn 13 :(

  • @user-yy6fu3vn4n

    @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

    @WebSensePro

    4 ай бұрын

    Correct, yes they added latest "Category Metafield" which is not yet available. Let's see when it roles out

  • @ScrollWithKhan3
    @ScrollWithKhan35 ай бұрын

    Aoa Bro Kia Hall Hain please TikTok agency Account ka Tareqa bata Dy jes mai Pakistan location enable hu please bro

  • @WebSensePro

    @WebSensePro

    5 ай бұрын

    Sure, will do

  • @AthlIndia
    @AthlIndia3 ай бұрын

    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

    @WebSensePro

    3 ай бұрын

    Latest tutorial in progress

  • @keenenwalker8708
    @keenenwalker87083 ай бұрын

    yeah not working on sense theme

  • @WebSensePro

    @WebSensePro

    3 ай бұрын

    Which version?

  • @learn.withnuman
    @learn.withnuman3 ай бұрын

    i also try this code but not working .. bro please upload correct coding material thanks

  • @WebSensePro

    @WebSensePro

    3 ай бұрын

    Shopify is introducing swatch with in the system so there will be no need for customization. Feature has not rolled out yet

  • @Ninasee19
    @Ninasee193 ай бұрын

    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

    @WebSensePro

    3 ай бұрын

    No one forcing you to use it. Use it if you like

  • @jka808
    @jka8082 ай бұрын

    Bruh they updated to spotlight theme. The second code to replace doesn't exist anymore. Coud you do an update

  • @WebSensePro

    @WebSensePro

    2 ай бұрын

    Yes already created an updated video for that

  • @Unknown-ki8yk
    @Unknown-ki8yk4 ай бұрын

    Great video, thank you. You are killing 3rd party businesses that provide app for this :))

  • @WebSensePro

    @WebSensePro

    4 ай бұрын

    Hahaha Shopify has killed them all already. Swatches is coming natively shortly

  • @user-vv1in4mv4y
    @user-vv1in4mv4y3 ай бұрын

    Hello sir it's not working ?

  • @WebSensePro

    @WebSensePro

    3 ай бұрын

    Yes, updated tutorial will soon come. It will work on dawn > 12

  • @vinovault
    @vinovault3 ай бұрын

    didn't work

  • @WebSensePro

    @WebSensePro

    3 ай бұрын

    This works in Dawn 12, updated tutorial coming shortly which will work on Dawn 13.0.1

Келесі