Buttons as variant selectors

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

 

  • Barrett Johnson
  • Feb 7 2019
  • Shipped
  • Oct 21, 2020

    Admin response

    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.

  • MAGE commented
    July 21, 2023 00:36

    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! :)


  • Arturo Díaz commented
    February 17, 2022 09:30

    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

  • Pablo Lopez commented
    November 22, 2021 21:04

    Hey Webflow,


    Where can I actually acommplish this?! Because I have tried everything and this is not possible!


    Please help.


    Regards,

  • Admin
    Webflow Admin commented
    September 29, 2021 19:46

    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.

  • John Smith commented
    August 11, 2021 08:11

    Awesome - if this is possible we can "finally" move from shopify to webflow - jeah!!!

  • Kaleb - Webflow Developer Australia commented
    June 21, 2021 11:57

    Awwwwesommmmmme! Thank you Webflow!!!! ❤️

  • Blake Folgado commented
    November 02, 2020 23:49

    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

  • Arran Ching commented
    October 26, 2020 07:58

    this is really exciting! Can we have the option to switch between dropdown & button based on product conditions?

  • James Bravo commented
    October 21, 2020 20:26

    OHHH YES. THANK YOU THANK YOU THANK YOU!!!!

  • Seth Ferguson commented
    July 01, 2020 04:26

    I'm so over dealing with our workaround for this. Please build it.

  • Hatim Daoudi commented
    June 06, 2020 16:31

    it is really frustrating it is really affecting the sales from other platforms i used in the past .

  • James Bravo commented
    May 17, 2020 20:30
  • Alexandre Kantjas commented
    May 10, 2020 16:37

    Variants dropdown list on a PDP can be a major UX deficit

  • Josh Graef commented
    May 05, 2020 16:48

    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.

  • Stefan commented
    May 02, 2020 12:02

    This is the one things that hinders me from switching my shop to Webflow from Shopifiy.

  • Jose Lopez commented
    March 28, 2020 15:35

    This is probably one of the biggest updates Webflow can do for e-com product detail pages.

  • Russell Mikesell commented
    October 10, 2019 16:00

    I was just thinking this same thing. Glad I found this.

  • Alexander Zaxarov commented
    September 02, 2019 10:28

    Dropdowns are a bit ugly, especially when we have a lot of options. I hope it will be delivered soon :)

  • Arnaud Lafosse commented
    April 05, 2019 00:35

    That would be awesome, especially for Ecommerce!

  • +130