How to change sort by drop down colour

Store Design

Topic summary

User wants the “Sort by” dropdown in Shopify’s Dawn 15.4.1 theme to match store color #1d1d1d.

Key approaches suggested:

  • Check theme settings first for form/input colors or the filter/search bar block. If not sufficient, add custom CSS.
  • Add CSS in Assets → base.css targeting the select element used by Dawn:
    • .select__select with background #1d1d1d, white text, matching border, plus focus and option styles for consistency and readability.
    • Alternatively target select#SortBy (and its option elements) with the same colors.
    • One suggestion targeted .facet-filters__sort background (using var(–gradient-background)), though other replies focused on the select itself for full control.

Practical steps: Edit code → base.css, paste CSS at the end, save, and refresh to see changes. Ensure hover/focus states keep the same palette for accessibility and consistency.

Other guidance: Link to Shopify’s CSS extension docs was provided. Advice to search the forum first and to share a direct page URL (not just the homepage) when asking for help.

Status: Multiple workable CSS solutions were provided; no confirmation from the original poster yet, so resolution unconfirmed.

Summarized with AI on December 10. AI used: gpt-5.
1

I’m using Dawn 15.4.1 and would like to match the sort by drop down box colour to the rest of the shop. The Hex colour is #1d1d1d and the URL for the store is walkerarmoury.com

Please could someone help?

1 Like
2

Hi @xneruaL :waving_hand: First double check the theme settings for colors relating to forms and inputs, or in the filter/search bar section/block itself, etc.

In a custom css setting , either for the entire theme or just certain sections, try the following.
:warning: and make a note somewhere you have done this:

.facet-filters__sort {
  background-color: var(--gradient-background ) !important;
}

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

In the future SEARCH FIRST , it’s a rule and shows you put in even the barest effort to respect others time.
Maximizing the chance of others giving you that time, or when you have a serious problem avoiding just getting ignored.
https://community.shopify.com/search?q=sort+color+dropdown
Just use the keywords of the problem as you describe it and optionally the theme name.

When sharing a url for a problem don’t just link to the homepage link to an actual page with that thing.
You wouldn’t give a customer a link to the homepage when they ask about a product would you?
Of course not you’d respect their time and link directly to the thing and not make them dig.

3

Hi there,

You can definitely match the “Sort by” dropdown color in Dawn 15.4.1 to your store’s color (#1d1d1d). This can be done by adding a small CSS snippet to your theme.

Here’s how to adjust it:

:check_mark: Step 1: Go to Your Theme Editor

  1. In Shopify admin, go to Online Store → Themes

  2. Find Dawn 15.4.1 → Click … → Edit code

:check_mark: Step 2: Add Custom CSS

  1. In the left panel, open:
    Assets → base.css

  2. Scroll to the bottom and paste this code:

.select__select {
  background-color: #1d1d1d !important;
  color: #ffffff !important;      /* Text stays readable */
  border-color: #1d1d1d !important;
}

.select__select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #1d1d1d;
}

.select__select option {
  background-color: #1d1d1d !important;
  color: #ffffff !important;
}

This updates:

  • The dropdown background

  • The border

  • The selected option color

  • The options inside the dropdown

All matched to your #1d1d1d theme color.

:check_mark: Step 3: Save your changes

Click Save, then refresh your storefront to see the updated dropdown styling.

4

Hi,

Hope this will help

Edit code base.css and add css (applies your #1d1d1d brand color and white text for readability)

css example

select#SortBy,
select#SortBy option {
  background-color: #1d1d1d !important;
  color: #ffffff !important;
  border: 1px solid #1d1d1d !important;
}
5

Hi @xneruaL

You can style the sort by dropdown by adding custom CSS to the select element inside the collection toolbar.A6Apply your #1d1d1d background and play with text contrast, and make sure hover and focus state have the same color palette, so your entire storefront is consistent visually to deliver the most unified visual experience!