How can I add a 'sort by' option to the Dawn theme filter?

Topic summary

Adding a “Sort by” option to the Dawn theme’s filter drawer on the collection page. The goal is to place sorting inside the filter drawer (blue-marked area in a provided screenshot).

Proposed solution:

  • Enable sorting in the theme editor (Settings → Enable sorting), as shown in a screenshot.
  • Edit code (Actions → Edit code → Assets → base.css) and add CSS to adjust visibility: show the mobile filter/sort section and hide the default sort block using the selectors .mobile-facets__details.js-filter.medium-hide.large-up-hide { display: block !important; } and facet-filters-form.facets.small-hide { display: none !important; }.

Alternative advice:

  • Hire a Shopify developer or contact the theme provider for customization support.

Outcome:

  • The original poster confirmed the guidance helped.

Open question:

  • A follow-up asks whether the same appearance and behavior can be applied on tablet and desktop; no solution provided yet, so this remains unresolved.

Notes:

  • Images are used to indicate the desired placement and the setting to enable sorting; they are helpful for understanding the configuration steps.
Summarized with AI on December 23. AI used: gpt-5.

Hi guys,

I would like to add sort by option into the filter by drawer. Please see the screenshot. Where the blue mark is i want to add the sort by option there. I would appreciate your help.

URL: https://basicbastard.co/collections/all

Hello @basicbastardco

Your question needs Customize.
You should hire someone who knows coding or an expert in Shopify programming, they can help you with this.
In addition, you can contact the theme provider you are using, maybe they can help you fix it.

Kind & Best regards,
GemPages Support Team

1 Like

Hi @basicbastardco ,

Please follow the steps below:

  • Step 1: Click ‘Enable sorting’ at settings.

  • Step 2: Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.mobile-facets__details.js-filter.medium-hide.large-up-hide {
    display: block !important;
}
facet-filters-form.facets.small-hide {
    display: none !important;
}

Hope it helps!

1 Like

Thank you so much for your help!!!

1 Like

Is there a way to get that same appearence and behaviour on tablet and desktop screen sizes? Thank you!