At the moment you can only toggle between variants using the default dropdown element, but it'd be great to have a set of buttons per selector that you could style with different colors, background images, and more to create more custom experiences. Example image attached
Hi everyone - excited to share that you can now create and style variant selector buttons for your store to create a frictionless shopping experience. Read more in our release notes.
.svg){kind=logo}
Hi! I have solved this issue with a little code.
First - either add a div block inside the button and give the div a class of 'variant' or just give the button that class.
Include the text element within the variant button and write into the text element the name of the variant. For example 'purple, blue, pink' or whatever
Next, upload the images you want for the background into webflow.
Then simply add a HTML embed element and add this code:
<script>
window.onload = function() {
var divs = document.getElementsByClassName('variant');
/* Here you create an image map for each variant mapped to the text element within the variant button and then add the URL you get from the webflow assets folder.
var imageMap = {
'Purple': 'https://uploads-ssl.webflow.com/649c2ee9fe9968230510f80b/64b5363f44d1b41a215b09c0_Purple.webp',
'Blue': 'https://uploads-ssl.webflow.com/649c2ee9fe9968230510f80b/64b5363f126c2cc7c6299296_Blue.webp',
'Pink': 'https://uploads-ssl.webflow.com/649c2ee9fe9968230510f80b/64b5363f052ede2f51ec10ee_Pink.webp',
};
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
var textContent = div.textContent.trim();
if (textContent in imageMap) {
div.style.backgroundImage = "url('" + imageMap[textContent] + "')";
div.style.backgroundSize = "cover";
}
}
};
</script>
Works like a charm! :)
Hi
what about having something like the image attached where you might have a table with all variants and the ability to increase the items to add to cart independently and add all them once you click to add to cart?
Regards
Hey Webflow,
Where can I actually acommplish this?! Because I have tried everything and this is not possible!
Please help.
Regards,
We have created a follow up idea to add more customization options for variant buttons. Head over to the new idea if you'd like to vote for it.
Awesome - if this is possible we can "finally" move from shopify to webflow - jeah!!!
Awwwwesommmmmme! Thank you Webflow!!!! ❤️
There is still no option to allow colours swatches that represent the colour option in the CMS. This currently just leads to lots of unstyled button
this is really exciting! Can we have the option to switch between dropdown & button based on product conditions?
OHHH YES. THANK YOU THANK YOU THANK YOU!!!!
I'm so over dealing with our workaround for this. Please build it.
it is really frustrating it is really affecting the sales from other platforms i used in the past .
Doesn't this do this?
https://www.udesly.com/webflow-resources/ecommerce-variation-swatches/
Variants dropdown list on a PDP can be a major UX deficit
Checkboxes that can be custom styled are honestly keeping me from using Webflow for e-commerce clients. Almost all products have sizes/colors/options and using a bunch of drop downs is not helping sales at the most CRUCIAL moment - the “add-to-cart” moment.
This is the one things that hinders me from switching my shop to Webflow from Shopifiy.
This is probably one of the biggest updates Webflow can do for e-com product detail pages.
I was just thinking this same thing. Glad I found this.
Dropdowns are a bit ugly, especially when we have a lot of options. I hope it will be delivered soon :)
That would be awesome, especially for Ecommerce!