TRANSPARENT VARANT PILLARS

Technical Q&A
, , ,

Topic summary

Goal: Style product option “variant pills” (radio button labels) so all are transparent, and only the selected one shows a thicker black border instead of a solid black fill.

Context: Request included a reference product link and the store/product URLs for implementation.

Proposed solution: Add custom CSS in the theme’s main CSS file (base.css/style.css/theme.css) via Online Store > Themes > Edit code. The snippet targets .product-form__input–pill input[type=radio]:checked+label to set background: transparent, color: #000, and box-shadow: 0 0 0 2px (to create a thicker border).

Evidence: A screenshot was shared demonstrating the expected visual result after applying the CSS.

Latest update: The store owner applied the provided CSS but saw no change and requested further help.

Status: Unresolved. Next step needed is troubleshooting why the CSS didn’t take effect (e.g., confirming correct file/selector or overrides), but no follow-up guidance has been provided yet.

Summarized with AI on December 16. AI used: gpt-5.
1

Hello, is there any way to make the variant pillar transparent, while the selected one has a thicker black border instead of being fully black? Here is a reference.

https://jcwatchmod.com/collections/in-stock-seiko-mods/products/datejust-blue-sunburst-custom-seiko-nh35-automatic-watch

1 Like
2

Hi @edwinsoltan

Please, share your store URL. Thanks!

1 Like
3

https://timecraft.se/

https://timecraft.se/products/sakura-custom-seiko-nh35-automatic-watch

4

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-form__input--pill input[type=radio]:checked+label {
    background: transparent;
    color: #000;
    box-shadow: 0 0 0 2px;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

5

Hi, this is exactly what I’m looking for! However, it didn’t work on my end. I pasted the code in, but nothing happened. Please help me!