My Variant Pills & Add To Cart Button On Product Page Randomly Went Transparent! Please Help!

Store Design
,

Topic summary

A user’s product page elements—variant pills, add to cart button, and collection filter backgrounds—suddenly became transparent. The variant pill borders disappeared, and selected states are no longer visible.

Technical Details:

  • Issue affects multiple UI components simultaneously
  • Occurred randomly during website editing
  • User is running Dawn theme

Proposed Solution:
A developer suggested inspecting CSS selectors in Chrome Inspector, specifically:

  • .product-form__input input[type=radio]:checked+label for variant pills
  • .product-form__submit for the add to cart button
  • Recommended editing section-main-product.css file via Theme Editor
  • Provided sample CSS properties to adjust (background-color, border-color, margin)

Current Status:
The original poster lacks coding experience and is unsure how to implement the suggested fixes. The developer is exploring whether changes can be made through Shopify’s customizer or if professional developer assistance is needed. Discussion remains open with no resolution yet.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Ive been doing lots of edits to this website and i release that my add to cart, variant pills and the background to my filter on collection pages are all transparent. The varient pills border isn’t showing up and it doesn’t show when you’ve selected something. The other ones are just transparent.

If you could take a look at my website, and help is really appreciated!

https://www.wildandheart.com/?_ab=0&_fd=0&_sc=1

Thank you

2

Hi @wildandheart ,

I see what you’re talking about.
Are you using chrome inspector?

Try find this selector in the inspector.
.product-form__input input[type=radio]:checked+label

Or Go to Online Store-> Theme->Edit code-> Asset-> section-section-main-product.css ->and play around with the values below…

To edit variants, play around with these properties:

.product-form__input input[type=radio]:checked+label {
    background-color: blue;
    color: rgb(var(--color-background));
    border-color: red;
}

For ‘Add to Cart’ Button:

.product-form__submit {
    margin-bottom: 1rem;
    background-color: aqua;
    color: black;
}

Hope that makes sense.

3

Im not a coder… so im not to sure what to play around with! It just randomly happened. Any ideas on how to fix it!

4

Ohhh got you!

No worries, what theme are you using. See if I can point you in the right direction.

Could be something you can edit in the shopify customizer… else you may need a developer to make these changes.

5

Im using the dawn theme! Thank you for your help