Streaming live at 10am (PST)

Product variant display

Here is my current e comm website:

I’m looking for a way so that my customers can select their variant directly on the page as opposed to dropdown (therefore eliminating two unnecessary clicks. The final result would be more like this:

Any suggestions?
Thanks!

You’re in luck, Webflow recently released a feature that allows for you to switch between dropdowns or buttons for your variant options:

Since this overrides the way that the old implementation works, you’ll need to add a new “Add to Cart” element to your project page in order to see the toggle:

image

If you’ve applied any styles, make sure your new element has those same class names applied (it may help to keep the old “Add to Cart” element while you migrate the styles over), and then select the “Option” or “Option List” parent container to see the new toggle in the Settings panel to the right:

image

Once you’ve chosen the “Buttons” option, you’ll be able to style the buttons just like you can with any other element in the Designer.

Feel free to reach out if you get stuck or have any questions :+1:

Hi, I just went into the add to cart button options, but I can’t find the Option List Settings. I’ve attached a picture

The Option List settings only show up when selecting either the Option or Option List element:

image

Hi again Mikey,
The original issue was solved, thanks! I now have another problem.
My product has two variables, color and size. I have added the appropriate pictures to each variant. However, the picture only changes when I select both variables. Is there a way so that the picture changes as soon as they select the color? Maybe hace a default size always selected?
I’ve attached a video:

Here is my read only: