Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Dawn theme selected variants don't change style

Solved

Dawn theme selected variants don't change style

dev22
Shopify Partner
34 1 10

I have my store set up with variants as 'pill' style for options, not dropdown.

The problem is that the radio inputs do not change to 'checked' when they are selected.

When a user selects a variant combination, the options chosen do not change styling at all, and I don't know how to target the CSS without the 'checked' or 'selected' class on the inputs.

So when a user selects the options, there is no way of knowing what has been selected. All the pills look exactly the same in every state.

Accepted Solution (1)

dev22
Shopify Partner
34 1 10

This is an accepted solution.

I figured it out. When I call the input by this class, I can change the styling: .product-form__input input[type=radio]:checked+label

View solution in original post

Reply 1 (1)

dev22
Shopify Partner
34 1 10

This is an accepted solution.

I figured it out. When I call the input by this class, I can change the styling: .product-form__input input[type=radio]:checked+label