A space to discuss online store customization, theme development, and Liquid templating.
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
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.
Solved! Go to the solution
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
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