Product Variant Options - Broadcast Theme

Store Design

Topic summary

A user is customizing product variant buttons on their product page and encountering styling issues with size selection buttons.

Current Problem:

  • Selected variant button displays in yellow (working as intended)
  • Unselected buttons have a shaded background that looks too similar to selected state
  • Goal is to make unselected buttons transparent for clear visual distinction
  • Attempted setting color to black, but this made selected and unselected buttons nearly identical

Status: Discussion is ongoing. Another user has requested the store URL to provide specific assistance. No solution has been provided yet.

Visual Reference: A screenshot was shared showing the current button appearance.

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

Hi there,

I am placing the finishing touches to my product page and have come unstuck with my ‘Product Variant’ section.

Specifically the buttons selecting the size of my products is the issue. I would like to the buttons to be very clearly different so that the customers know which size they are selecting.

At the moment I have the selected product button as the yellow colour. But this is where the problem is… I would like the size button that is NOT being selected to be transparent. At the moment it is almost like it is a shaded background but when I set the colour to black they look almost identical. I feel as though I’ve tried most things to try and change but have been unable to do so this far.

Any help would be much appreciated - I will leave a screen shot for better reference.

Screenshot 2025-01-12 at 13.54.25.png
Screenshot 2025-01-12 at 13.54.25.png902×192 10.9 KB

2

Hi @HubbaStubba

How are you?

Can you please share your store URL?