Remove Part of "Sort By" options on Collection Page

Solved

Remove Part of "Sort By" options on Collection Page

Atiqot
Tourist
10 1 4
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

Accepted Solution (1)

Moeed
Shopify Partner
7466 2021 2481

This is an accepted solution.

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 </body> tag

<style>
.popover__value-option[value="created-ascending"], .popover__value-option[value="title-descending"], .popover__value-option[value="title-ascending"] {
    display: none !important;
}
</style>

RESULT:

Moeed_0-1745906654935.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 5 (5)

Mustafa_Ali
Explorer
391 39 72
<style>
@media screen and (max-width: 767px) {
.collection-toolbar__button-container+.collection-toolbar__button-container {
    display: none !important;
 }
}
</style>

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

Mustafa_Ali_0-1745906285607.png

 

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

Moeed
Shopify Partner
7466 2021 2481

This is an accepted solution.

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 </body> tag

<style>
.popover__value-option[value="created-ascending"], .popover__value-option[value="title-descending"], .popover__value-option[value="title-ascending"] {
    display: none !important;
}
</style>

RESULT:

Moeed_0-1745906654935.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Atiqot
Tourist
10 1 4

Great Solution! It's work perfect 😍

Thanks a Lot Moeed

ZestardTech
Shopify Partner
6142 1097 1473

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

Let me know if you need further assistance!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

DaisyVo
Shopify Partner
4402 488 581

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

 

Best,

DaisyVo

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution