Remove Part of "Sort By" options on Collection Page

Store Design
,

Topic summary

A user sought to remove specific sorting options (Alphabetically A-Z/Z-A, Featured, Date old to new) from their collection page, particularly on mobile devices.

Solutions Provided:

Multiple developers offered CSS-based approaches:

  • Mustafa_Ali: Suggested adding code to theme.liquid before the closing body tag
  • Moeed: Provided similar solution with code placement above </body> tag in theme.liquid, including a visual result screenshot
  • ZestardTech: Recommended mobile-specific CSS targeting .collection-toolbar__button-container:nth-child(2) in base.css file with media query for screens ≤768px
  • DaisyVo: Proposed hiding the entire collection toolbar by adding CSS to theme.css file

Resolution:

The issue was successfully resolved. The original poster confirmed Moeed’s solution worked perfectly and marked it as the accepted answer. All solutions involved custom CSS code additions to theme files, with variations in targeting specificity and file placement.

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

I want to delete part of the sort by options, like:

“Alphabetically, A-Z”
“Alphabetically, Z-A”

“Featured” options"

“Date, old to new”

But I can’t find where to do this in the code.

Very important to me remove it on mobile !

https://www.atiqot.com/collections/living-room

Thanks in advance for any help. Liya

2 Likes
2

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->

Mustafa_Ali_0-1745906285607.png
Mustafa_Ali_0-1745906285607.png210×429 51.2 KB

before the body ----->
if this code work please do not forget to like and mark it solution

3

Hey @Atiqot

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

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

RESULT:

Moeed_0-1745906654935.png
Moeed_0-1745906654935.png349×758 49.1 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Hello @Atiqot ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:768px){
.collection-toolbar__button-list > .collection-toolbar__button-container:nth-child(2) {
    display: none !important;
}
}

ZestardTech_0-1745908734680.png
ZestardTech_0-1745908734680.png409×758 98.2 KB

Let me know if you need further assistance!

5

Hi @Atiqot

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

height-observer.collection-toolbar.full-bleed {
    display: none;
}

Result

DaisyVo_0-1745911516258.png
DaisyVo_0-1745911516258.png348×614 71.2 KB

Best,

DaisyVo

6

Great Solution! It’s work perfect :heart_eyes:

Thanks a Lot Moeed