Product variant display

Here is my current e comm website:

https://preview.webflow.com/preview/somosmonono?utm_medium=preview_link&utm_source=designer&utm_content=somosmonono&preview=8d3452d5c81bdeb90985a1cc137d913a&pageId=5f8c862952d66f18ee343a34&itemId=5fa372504a9c2c18f6049b0b&mode=preview

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:
https://vimeo.com/483614949

Here is my read only:
https://preview.webflow.com/preview/somosmonono?utm_medium=preview_link&utm_source=designer&utm_content=somosmonono&preview=8d3452d5c81bdeb90985a1cc137d913a&pageId=5f8c862952d66f18ee343a34&itemId=5fa372504a9c2c18f6049b0b&mode=preview

Hey @rmarcosb did you manage to achieve separate styling for each variant option list (e.g. size & colour). Trying to do this myself now… is it possible?

Did not… Still have customers complaining

When you were creating the product variants, did you select a default for each variants?

Running into a similar issue where I can not get the Variant image to show up. The text (Name) outputs fine, but the Image does not. Default is set as well. Any help would be great.

1 Like

Hi Dmitry,

Did you find any solution on this, any update on this would be appreciated.

I have the same problem,

Anyone knows how to customize product variants individually?

I have the same problem? Webflow any updates??? This essential for ecommerce

This is not solved!
I have read nearly every forum post on this issue and none of them are solved.
I have a default variant set (color)
I have the updated add-to cart button (it was from a theme purchased two years ago anyway)

Clicking the buttons does nothing.

Screenshot 2024-07-24 at 4.41.15 PM