Change the color of the variant box border to show what customer has chosen

Shopify Discussion

Topic summary

A user wants to modify variant selector boxes on their Shopify product page so that when customers select a size or color option, the chosen box displays a blue border instead of the current black border.

Current behavior:

  • Only the color selector shows a black border when selected
  • Size selector doesn’t show visual feedback

Desired outcome:

  • Both size and color selectors should display blue borders when selected

Solution provided:
A respondent offered CSS code to paste into the “Custom CSS” setting:

.opt-btn:checked + .opt-label {
  border: 2px solid var(--gw_main_color) !important;
}

The user is working with the Symmetry theme, which doesn’t have a color palette section in theme settings, requiring direct code editing. The discussion appears resolved with the CSS solution, though implementation confirmation is pending.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I want to change the color of the variant boxes to show what the customer has chosen for size and color. So if they choose 36" then that box border will be blue. Then when they choose the color orange, that box border will also change to blue:

https://www.ebodyboarding.com/collections/tribe/products/tribe-guard-adult-or-kids-bodyboard?variant…

Right now only the Color selector has a black border around it. I like that but I want it to be blue.

Does anyone know what code I need to change?

2

you can goto the theme setting at the color palette section you can see how indicate the colors you want , and change it to the effect you want it to be

let me know if you got it solved

3

It’s Symmetry theme. No color palette section. I assume I need to edit code in either a css or liquid file?

4

Go to “Custom CSS” setting of this section and paste this:

.opt-btn:checked + .opt-label {
  border: 2px solid var(--gw_main_color) !important;
}