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

Store Design
, , , ,

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.
1

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

Screenshot 2022-12-20 at 5.03.24 PM.png
Screenshot 2022-12-20 at 5.03.24 PM.png2880×1800 257 KB

2

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
3

Hi @basicbastardco ,

Please follow the steps below:

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

Screenshot.png
Screenshot.png447×803 21.3 KB

  • 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
4

Thank you so much for your help!!!

1 Like
5

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