Changing Swatch Selection Background Color

Store Design
, , , , , , , ,

Topic summary

Main issue: In the Turbo theme, the selected swatch/variant should display a black background with white text, instead of only a darkened border.

Proposed fix (CSS):

  • Use the :checked adjacent sibling selector to style the chosen option:
    .swatch_options input:checked + .swatch-element { background: #000; color: #fff; }
  • Placement options:
    • Add to styles.css (via Online Store → Theme → Edit code).
    • Alternatively, add CSS in theme.liquid (either above or before ), depending on theme setup.

Notes:

  • Multiple replies suggest the same CSS approach; two include screenshots showing the intended visual result (black swatch with white text). The posted code blocks in those replies appear empty in the transcript, but the images indicate success.
  • Ensure the selector matches the theme’s HTML structure (.swatch_options, input, .swatch-element).

Status/outcome:

  • No confirmation from the original poster that the solution is applied. The thread appears open with a clear CSS-based solution proposed and demonstrated via images.
Summarized with AI on December 30. AI used: gpt-5.
3

Add This Css In your edit Code > Style.css File

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}