How can I modify the sort by function in Dawn theme?

Store Design
, ,

Topic summary

Main issue: Styling inconsistencies in the Dawn theme’s “Sort by” dropdown—font appears different from the label “SORTIEREN NACH” and the dropdown’s look doesn’t match the filter UI. Images are central to understanding the visual differences.

Feedback and constraints:

  • A store preview link is requested to inspect fonts and CSS directly; screenshots alone aren’t sufficient to diagnose the font discrepancy.
  • The observed font may be the same but rendered in uppercase on the label, which could explain the perceived difference.
  • Native HTML select dropdown options cannot be reliably styled with CSS (a known browser limitation).

Proposed approach:

  • To achieve consistent styling, rebuild the dropdown as a custom (“fake”) select using JavaScript and CSS, which allows full control over fonts and appearance. References to StackOverflow and W3Schools guides were provided.

Status and next steps:

  • No resolution yet. Action item: share a preview link. Key constraint: native select option styling is limited; custom component likely required.
Summarized with AI on January 23. AI used: gpt-5.
1

Adjust sort by function - Dawn theme

  1. In the selection field in the sort by function, a different font is used.

I would like to use the same font as with ‘SORTIEREN NACH’ (see attached image).

Bildschirmfoto 2023-07-18 um 18.33.04.png
Bildschirmfoto 2023-07-18 um 18.33.04.png640×222 4.69 KB

  1. The selection menu does not fit optically to everything else (see attached image).

Bildschirmfoto 2023-07-18 um 18.33.15.png
Bildschirmfoto 2023-07-18 um 18.33.15.png710×516 106 KB

I would like it to be the same as with the filter function (see attached image).

Bildschirmfoto 2023-07-18 um 18.38.33.png
Bildschirmfoto 2023-07-18 um 18.38.33.png844×642 23.9 KB

Looking forward to your help!

2

Two things:

  1. It would be a lot more helpful to include a preview link to your site so we can inspect it ourselves, the pictures are helpful but if there is a font issue we can’t really see why without a preview link.

  2. Using the pictures it actually looks like it might be the same font, just one is uppercase. That is of course unless you are referring to the actual dropdown options in which case you can’t really style those with just CSS: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element
    Your only method to style those would be to essentially remake a “fake” dropdown using javascript and CSS, but that’s a bit more involved (see: https://www.w3schools.com/howto/howto_custom_select.asp).