Change variant pills color across store in Dawn theme

Store Design
, , ,
1

I am struggling to find a way to change the variant pills colour in the Dawn theme. I have tried countless ways but nothing seems to work.

I’d like to change them from Black to this blue #6dc3e8

Screenshot 2026-07-26 at 4.12.04 p.m.
Screenshot 2026-07-26 at 4.12.04 p.m.850×406 15.7 KB

2

Those buttons are output by Globo App, so you should check its configuration.

3

Hey @peterotoole

You can either add this below code in the Custom CSS option by going into Theme Settings from your theme editor

.globo-swatch-product-detail ul.value li.select-option input:checked+.globo-style--button {
    background: #6dc3e8 !important;
    border-color: #6dc3e8 !important;
}

OR

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </body> tag
<style>
.globo-swatch-product-detail ul.value li.select-option input:checked+.globo-style--button {
    background: #6dc3e8 !important;
    border-color: #6dc3e8 !important;
}
</style>

RESULT:

image
image512×562 24 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

4

Hi @peterotoole,

The CSS provided above by Moeed should work great if you are using the Globo Product Swatches app!

Just a quick tip: If you want this change to apply specifically to the selected state without affecting other custom swatches, make sure to clear your browser cache after saving the CSS in theme.liquid.

If you run into any layout glitches or need help adding a custom color transition, feel free to drop me a Direct Message (DM). I’d be happy to assist you!

Best,

Hridoy

5

Since those variant pills are being rendered by Globo Product Swatches rather than Dawn’s native variant picker, changing Dawn’s default CSS alone won’t always take effect.

The cleanest approach is to override Globo’s selected state with CSS:

/* Selected Globo Product Swatch */
.globo-swatch--selected,
.globo-swatch input:checked + label,
.globo-product-option .selected {
  background: #6dc3e8 !important;
  border-color: #6dc3e8 !important;
  color: #fff !important; /* Optional for better contrast */
}

You can add this either:

  • Online Store → Themes → Customize → Theme settings → Custom CSS (if your theme supports it), or

  • In Assets → base.css/theme.css, or just before the closing </body> tag in theme.liquid.

If the colour still doesn’t change after saving:

  • Clear your browser cache (or test in an incognito window).

  • Inspect the selected pill in DevTools to confirm the exact class Globo is outputting, as different Globo versions can use slightly different class names.

The key takeaway is that this isn’t a Dawn issue, it’s the Globo Product Swatches app controlling the variant UI, so your CSS needs to target Globo’s selected state rather than Dawn’s native variant selector.

7

hi, This is possible use inspect and find the related css and apply changes to it or override the css.

8

Go to:

Online Store → Themes → Edit code → Assets → base.css (or theme.css depending on your theme)

Add the following CSS at the bottom:

/* Globo Product Swatches - Selected Button Color */
.globo-swatch-product-detail ul.value li.select-option input:checked + .globo-style--button,
.globo-product-options .globo-style--button.active,
.globo-product-options .globo-style--button.selected {
    background: #6dc3e8 !important;
    border-color: #6dc3e8 !important;
    color: #ffffff !important;
}