I want to be able to style Product Option Button Groups separately to one another. Currently any changes to the class of ANY button will mirror to ALL buttons under the Product Option List.
for example I would like to be able to style them like this:
I feel like this might be a work around but I would rather not have to do this:
Hi all, I have this design for a product page. I need to put the image of each variant as a background in the option list (button style) as you see in the design. The problem is that when I put the image element inside the button variant, I can’t link the main image of each product variant.
Maybe I need some javascript?
edit: I’ve seen this thread that is related: Outputting Variant images
Thank you!
[desktop-product-detail-2-colors]
Here is the page I am working on (Read-Only):
https://p…
See products template page.
Read only link:https://preview.webflow.com/preview/lakes-cult?utm_medium=preview_link&utm_source=designer&utm_content=lakes-cult&preview=e774e4e8da9a53a7721d54e9f90188be&pageId=640a67fa8929fe73d4aef7e5&itemId=640a6c0d539b7f5f5b317eae&workflow=preview
Almost!
this creates this effect:
The desired effect is only the ‘red’ option to be red and none of the sizes.
e.g. select 2nd ‘product-button’ child within the 1st ‘button-group’ child of the ‘product-option’ parent.
Does that make sense? haha
xx
So for some reason this works here:
but not here:
and I can’t figure out why…?
@steplabs YES!!
I realise now its the whole product option that is cloned which is why my method wasn’t working. DUHH!
Thanks a lot
With an embed, target each nth-child and tie that to a image or color field.
