How do I change the background of the variant select dropdown box?

Store Design
, ,

Topic summary

Goal: change the background color and remove the border of the product variant picker (dropdown/select) in a Shopify theme.

What worked:

  • Edit theme CSS: Online Store > Themes > Edit code > Assets (main.css/base.css/style.css/theme.css). Add at the bottom:
    • Set background (e.g., red) and optionally text color (white) for selectors: .select__select, .customer select, .select .icon-caret, .customer select + svg.
  • Remove the “border” appearance by disabling shadows:
    • .select:before, .select:after, .select:hover.select:after, .customer select:before, .customer select:after, .customer select:hover.select:after { box-shadow: none !important; }
  • Result screenshots show the new background and no border.

Alternate suggestion:

  • Another contributor advised adding code to theme.liquid above (Online Store > Themes > Edit code > theme.liquid). However, the provided code block was empty, so the exact snippet is unclear.

Notes:

  • “Variant picker” refers to the product option dropdown (select element).

Outcome:

  • Original poster expressed thanks after applying the CSS changes; the issue appears resolved. The theme.liquid approach remains unspecified due to missing code content.
Summarized with AI on December 25. AI used: gpt-5.
1

website: hvstl.co

password: tongai

I was wondering how I would change the background of this variant picker, and remove the border around it as well. Any help is appreciated!

hvstlco_0-1720726862024.png
hvstlco_0-1720726862024.png2440Ă—1202 213 KB

1 Like
2

Hi @hvstlco

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.select__select, .customer select, .select .icon-caret, .customer select + svg {
    background: red;
    color: white;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

How do I remove the border aswell?

4

Add this code.

.select:before, .select:after, .select:hover.select:after, 
.customer select:before, .customer select:after,.customer select:hover.select:after {
    box-shadow: none !important;
}

And Save.

result:

Made4uoRibe_0-1720730854084.png
Made4uoRibe_0-1720730854084.png533Ă—283 5.56 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hi @hvstlco

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

6

Thank you very much!

7

Thank you very much aswell!