How do i make the selected variant button visible? Selecting the variant will make the button invisible, it is confusing to the buyers.
Topic summary
-
On a Shopify Craft theme product page, the selected variant (size) button appeared “invisible,” confusing buyers. Variants are rendered as radio-button “pills,” and the checked state wasn’t visually distinguished.
-
The store URL (offthecourt.store) was shared. Initial CSS added to theme.liquid before targeting .product-form__input–pill input[type=radio]:checked+label to swap background/text colors didn’t take effect.
-
Alternative fixes were proposed:
• Use a broader selector: .product-form__input input[type=radio]:checked+label with background black and text white.
• Add CSS in assets/section-main-product.css to set the checked label’s background to black and add a border to unselected labels.
• Another approach suggested inserting custom CSS before to ensure it loads and overrides theme styles, with screenshots showing the intended highlight for the selected option. -
Outcome: The user confirmed the final CSS approach worked. The issue is resolved; no remaining open questions.
1 Like
Can you share your store’s URL?
Hello @momowt
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Add this if this code not work then please share your store URL.
offthecourt.store
Hi, thanks for your suggestion but unfortunately it is not working. The url to my store is offthecourt.store
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
1 Like
-
Go to ‘Online Store’ → Themes → Edit Code
-
In the assets folder, locate the file ‘section-main-product.css’
-
At the end of the file add this code
/* Product Variant Selected Disappearing Problem */
.product-form__input input[type=radio]:checked+label{
background-color: black;
}
.product-form__input input[type=radio]+label {
border: 1px solid black;
}
- Here is the solution for you @momowt
- Please follow these steps:
- Then find the theme.liquid file.
- Then add the following code at the before tag and press ‘Save’ to save it.
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Thank you sir! it works!
1 Like