Remove the "Sort By" option completely from Collections page

Store Design
, ,

Topic summary

A user working with the Atom theme wanted to remove the “Sort By” option from their Collections page.

Solution provided:

  • Add CSS code to the app.css file to hide the sort dropdown on desktop
  • The code targets the specific class .col-md-6.text-right.px-0 with display: none

Follow-up request:
The user also needed to remove the filter icon on mobile Collections pages.

Mobile solution:

  • Additional CSS code using a media query for screens under 767px width
  • Targets the filter/sort container with display: none !important

Status: Both issues were successfully resolved with the provided CSS snippets. The conversation included screenshots demonstrating the elements to be hidden.

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

Hello! I am currently using the Atom theme and I am trying to remove the “Sort By” option entirely so it no longer appears on the Collections page. How can I do this?

2

what’s your store url ?

3
4

go to your online store edit code and in app.css file paste this code

.col-md-6.text-right.px-0 {
    display: none;
}

AsadMahmood_0-1743546448234.png
AsadMahmood_0-1743546448234.png1914×806 105 KB

1 Like
5

Thank you so much, that fixed it! Do you, by chance, know how to remove the filter icon that appears on the Collections page on the mobile site? I don’t know how to attach a screenshot to show you.

6

use this code for that

@media (max-width: 767px) {
    .col-md-12.filter-sort-by-top.d-flex.align-items-center.justify-content-between.my-4 {
        display: none !important;
    }
}

AsadMahmood_0-1743547186913.png
AsadMahmood_0-1743547186913.png308×607 42.7 KB

1 Like
7

Thank you so much. You are a rockstar!

2 Likes
8

Thanks for appreciating :slightly_smiling_face:

1 Like
9

All sorted but thanks for reaching out!