How to alter variant pill outline and background color in dawn theme?

Store Design
,

Topic summary

Main issue: change the outline and background colors of variant “pills” in the Shopify Dawn theme.

Solution provided: support advised editing the theme code (Online Store → Theme → Edit code → open theme.liquid) and pasting custom code before the tag. The exact code snippet is referenced but not visible in the thread, which is central to reproducing the solution.

Outcome so far:

  • Original poster confirmed the guidance worked and expressed thanks.
  • Another participant reported success changing background and outline colors, but noted two remaining issues:
    • On hover, the pill outline reverts to black and needs customization.
    • The text color for the selected pill needs editing.

Current status: partially resolved. Background/outline changes work; hover outline color and selected pill text color remain unaddressed.

Next needs:

  • Specific CSS (or theme settings) to override the hover state outline color.
  • Specific CSS to set the selected pill’s text color.
  • Visibility of the original code snippet (currently missing) to ensure consistent implementation.
Summarized with AI on January 20. AI used: gpt-5.
1

do you know how to change the outline color and background color for variants pills in dawn theme?

1 Like
2

Hello @cj18

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like
3

gempages always comin in clutch. thanks!

4

thanks

5

Hi,

This is really helpful! It has worked to change the background colour and the outline colours, however when I hover over the pill the outline colour turns to black is there a way to edit that too please? And the selected Pill colour text.