Removing some "sort by" options

Store Design
, ,

Topic summary

A user customizing the Dawn theme wants to remove most “sort by” options from their collection page, keeping only ascending and descending price sorting.

Solutions Provided:

Multiple respondents offered CSS-based solutions:

  • Adding CSS code to theme.liquid (before </body> tag) to hide unwanted options using display: none on specific select options
  • Adding CSS to component-facets.css targeting specific child elements with nth-child selectors

The original poster confirmed one solution worked successfully.

Follow-up Issues:

  • Another user requested the opposite configuration: keeping “Featured,” “Best seller,” “Newest first,” and “Oldest first” while removing price and alphabetical options
  • A user reported that while the solution works, the dropdown label displays one of the hidden options and asked how to change it

The discussion remains open with these additional customization requests unresolved.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I’m coostumizing Dawn Theme, and I’ve ran into a problem:

I’d like to remove some of the options within “sort by”…
I only like to keep ascending price and decending price and remove the others…

My collection: to the page

anyone know how to do this?

Thanks in advance,

Andy

Screenshot 2024-08-23 at 12.06.56.png
Screenshot 2024-08-23 at 12.06.56.png856×906 145 KB

2

Hi @larsvilhelmsson

Please follow these steps:

  1. Go to Online Store

  2. Click edit code

  3. Find your theme.liquid file

  4. Add the following code in the bottom of the file above tag

This will hide all the sort by options except for ascending price and descending price.

Hope this helps :slightly_smiling_face:

Kind Regards,

Futuremerce

3

Hi @larsvilhelmsson , I hope you are doing well.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
/* Hide all sorting options initially*/ 
select[name="sort-by"] option {
  display: none;
}

/* Show only the Ascending price and Descending price options */
select[name="sort-by"] option[value="price-ascending"],
select[name="sort-by"] option[value="price-descending"] {
  display: block;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

4

Hello @larsvilhelmsson
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-facets.css
add this code at the end of the file.

.facet-filters__sort div:nth-child(1),.facet-filters__sort div:nth-child(2),.facet-filters__sort div:nth-child(3),.facet-filters__sort div:nth-child(4),.facet-filters__sort div:nth-child(7),.facet-filters__sort div:nth-child(8).facet-filters__sort div:nth-child(1), .facet-filters__sort div:nth-child(2), .facet-filters__sort div:nth-child(3), .facet-filters__sort div:nth-child(4), .facet-filters__sort div:nth-child(7), .facet-filters__sort div:nth-child(8) {
    display: none;
}

result

16.png
16.png951×552 250 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Amzing! Thanks for the help, this worked!

6

Thanks a lot…!!!
Please hit the like button also.

7

Hi can I request to keep he ‘Featured’, ‘Best seller’, ‘Newest first’, and ‘Oldest first’ instead on the coding and remove the price <> and the alphabetical?

8

This works for me, but the dropdown label is one of the hidden options. How do I change it?