Remove some Sorting Options On Collection Page

Store Design

Topic summary

Goal: Hide specific sort options on a Shopify collection page (Chromium theme v4.0): “En Vedette,” “Meilleures Vente,” “Alphabétique A→Z,” “Alphabétique Z→A,” and “Date de la plus ancienne à la plus récente.” Initial CSS attempts by the store owner did not work.

  • Proposed fix: A CSS selector was suggested to hide the first four list items and the 7th item in the sort dropdown (using .collection-toolbar ul.dropdown-select li:nth-child(…)) with display:none !important. The store owner added it in theme.liquid but the options still appear.

  • Access/request: A collaborator invite (via Settings > Users and Permissions > Collaborators) was requested for debugging; the store owner currently can’t add a collaborator due to seat limits and is waiting for a user removal.

  • Placement guidance: Another contributor advised placing the code above in theme.liquid and provided steps and a screenshot. However, no concrete CSS was included in that message (only placement instructions).

Status: No confirmed resolution. Next steps depend on correct CSS placement/selector verification or granting collaborator access. Images/screenshots are used to indicate where to add code.

Summarized with AI on January 9. AI used: gpt-5.
1

Theme : Chromium version 4.0

Hi,

In the sorting options on my Collection Page, I’d like to be able to remove the following options :

  • “En Vedette”
  • “Meilleures Vente”
  • “Alphabétique, de A à Z”
  • “Alphabétique, de Z à A”
  • “Date de la plus ancienne à la plus récente”

I’ve tried CSS code but nothing is working on my end. Could you please help me find the right CSS code or an app that could help me hide those fields from the collection pages?

Thanks very much

2

@LucieGuilbault_1 add the below code to a CSS file.

.collection-toolbar ul.dropdown-select li:nth-child(-n+4), .collection-toolbar ul.dropdown-select li:nth-child(7) {
    display: none !important;
}
3

Hi @KabirDev ,

Thanks for your reply. I have added the code in the theme.liquid file but all the sorting options still show. Do you need the store password in order to be able to inspect the theme’s code?

Thanks

Thanks

4

@LucieGuilbault_1 no I don’t need your password. You can invite me as a Collaborator from Settings > Users and Permissions > Collaborators so that I can debug this for you.

5

Hi @LucieGuilbault_1

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1703639170622.png
PageFlyRichard_0-1703639170622.png1383×953 122 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

6

Hi @KabirDev ,

I’m sorry don’t have any more space to add someone on the account unfortunately. I’m waiting on my client to delete a user.

@PageFly-Richard Thanks for your reply, . Just to be sure, is this where I’m supposed to put the code? (See screenshot)

Thanks in advance

7

@LucieGuilbault_1 Regards your question

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

The instructons above is where to add the code