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
    21 Jul, 2023 12:36am

    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
    17 Feb, 2022 09:30am

    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
    22 Nov, 2021 09:04pm

    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
    29 Sep, 2021 07:46pm

    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
    11 Aug, 2021 08:11am

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

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

    Awwwwesommmmmme! Thank you Webflow!!!! ❤️

  • Blake Folgado commented
    2 Nov, 2020 11:49pm

    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
    26 Oct, 2020 07:58am

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

  • James Bravo commented
    21 Oct, 2020 08:26pm

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

  • Seth Ferguson commented
    1 Jul, 2020 04:26am

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

  • Hatim Daoudi commented
    6 Jun, 2020 04:31pm

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

  • James Bravo commented
    17 May, 2020 08:30pm
  • Alexandre Kantjas commented
    10 May, 2020 04:37pm

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

  • Josh Graef commented
    5 May, 2020 04:48pm

    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
    2 May, 2020 12:02pm

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

  • Jose Lopez commented
    28 Mar, 2020 03:35pm

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

  • Russell Mikesell commented
    10 Oct, 2019 04:00pm

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

  • Alexander Zaxarov commented
    2 Sep, 2019 10:28am

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

  • Arnaud Lafosse commented
    5 Apr, 2019 12:35am

    That would be awesome, especially for Ecommerce!

  • +130