How to modify sort functions in the Dawn theme?

Store Design
5

To the themes , or template, or sections, custom css

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

Try the following CSS bandaids

Options color (keep in mind changing a background means changing text to high contrast color, and form inputs have limited styling as they are mainly controlled by the operating system)

[name="sort_by"] option { 
 color: white;
 background-color: black;
}

Removing which ones you want to keep from this rule (do not leave a trailing comma):

[value="manual"],
[value="best-selling"],
[value="title-ascending"],
[value="title-descending"],
[value="price-ascending"],
[value="price-descending"],
[value="created-ascending"],
[value="created-descending"] {
  display: none;
}

i.e.

[value="manual"],
[value="title-ascending"],
[value="title-descending"],
[value="created-ascending"],
[value="created-descending"] {
  display: none;
}

Swapping option positions is more advanced and required modifying theme code directly to build an entirely custom dropdown.

For dawn based themes that’s in several places in the facets.liquid snippet

https://github.com/Shopify/dawn/blob/main/snippets/facets.liquid#L479

1 Like