Add colour swatches to your custom Shopify theme built in Webflow converted with Udesly (NO PLUGINS)

[@tompoynor1189]

Thank you!!

[@joaomacaumaia3834]

amaizing stuff

[@JimmyTRUELOVE]

AWESOME!!!!!!

[@AlternatePro]

Thanks for watching!!

[@aymericgin9954]

Link in the description is broken for the Java Script.. So here it is : // Prepend classes to recreate the combo class by finding the data class of "find-swatch" document.querySelectorAll('[data-class="find-swatch"]').forEach(el => el.className = " color-swatch " + el.className);

[@elombekisala941]

you're a real one

[@nicklawhon]

Amazing stuff! Have you run into any issues using this on multiple pages? For instance, I have a grid of 4 products on the homepage and it is working correctly, but not working correctly on the product pages themselves. I have double checked all attributes.

[@alimardani2221]

Thanks for what you do! Can you do a video for creating custom sections?

[@AlternatePro]

Thanks man. I have a sections tutorial already (but it is older) are you looking for something specific?

[@danc2647]

Thanks for this, very helpful. Is there a way to hide the colour label e.g. ("white") and leave the colour swatch only?

[@AlternatePro]

Hi you could always add a class to the colour label then set it to display:none.

[@danc2647]

@@AlternatePro I think Webflow's add to cart component doesn't give us access to specific labels. Adding a class to one label seems to add it to all labels (size, colour, etc). Am I missing something?

[@AlternatePro]

@@danc2647 hi you could always use a bit of JavaScript to target the label selector nested within the button and then apply the style.

[@AlternatePro]

Hi @danc2647 Here is a little script to help you out. //START // Change class to what the label class is..if you call it size for example then the class will most likely be 'size-lable' > check your html. var elements = document.getElementsByClassName('color-lable'); // Then we loop through the NodeList and set the display property for each element with the class of 'color-lable' to 'none' for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } //// END Hope that helps

[@danc2647]

Many thanks for that!

[@rabbiemcadam-duff7600]

Awesome my dude! Here's me always wanting the next thing here, but have you figured a way to add the variant image onto the variant button? :D

[@AlternatePro]

Thanks man will work on it

[@stephanieberbec5060]

@@AlternatePro Curious about this too!

[@stephanieberbec5060]

I followed your tutorial adding images rather than colors as swatches. Instead of adding a color to Webflow, I added a small .webp image to each combo class. It works as expected in Shopify. From Shopify's side, you can also add a specific image to the variant if you want it to switch to a corresponding image when that color swatch is selected. Thanks for the tutorial!