How to change background and text color of variant dropdown box DAWN

Store Design
, , ,

Topic summary

A user seeks to modify the background and text color of the variant dropdown selector in Shopify’s Dawn theme.

Two CSS solutions provided:

  1. PageFly-Oliver’s approach: Add custom CSS to the theme.liquid file by navigating to Online Store → Theme → Edit code, locating the theme.liquid file, and pasting CSS at the bottom.

  2. LuffyOnePiece’s approach: Insert CSS directly into the base.css file targeting variant-selects .select__select with specific background (#5b6dd3) and text color (#fff) properties. Includes a visual example showing the styled dropdown with blue background and white text.

Both solutions involve editing theme code files and applying CSS to customize the variant selector’s appearance. The discussion remains open with no confirmation from the original poster about which solution was implemented.

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

How do I change the background of this variant box? -

I’m using the DAWN Theme

Image 30-03-2024 at 00.39.jpeg
Image 30-03-2024 at 00.39.jpeg1006×334 18.8 KB

2

Hi @EthanOSHOP

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

1 Like
3

Hi @EthanOSHOP ,

Add This Css in your Edit Code > Base.css File

variant-selects .select__select {
    background: #5b6dd3;
    color: #fff;
}

Result:

LuffyOnePiece_0-1711764489649.png
LuffyOnePiece_0-1711764489649.png460×513 13.9 KB

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

1 Like