How to insert a Sort by menu to collection pages in Shopify

Sort by menu is considered very important for any e-commerce store because of its convenience. It could be a smart feature that helps customer sort out all of the available products may be by their prices (from low to high, or from high to low) or by date, by sellers, and by the first alphabet of their names. You can now allow your customers to change the default order of the products by including a Sort by drop-down menu right on your collection pages. However, please keep reading our instructional writing on How to insert a Sort by menu to collection pages to know more deeply about this topic.

Please note that the method given below can be employed not only for the sectioned themes but also for the non-sectioned ones.

How to insert a Sort by menu to collection pages

Step 1: Check your theme settings

Most themes do include a setting to get a Sort by menu enabled on collection pages. If your theme does include this setting, then you are able to enable it from the theme editor.

  • Step 1: Go to the theme editor.

  • Step 2: In the theme preview, direct to any collection page on your online store.

  • Step 3: You must now see the Collection pages or the Collection tab right in the theme editor:

g

Tap this tab to see the settings for collection pages.

  • Step 4: Check whether there is a setting to Enable collection sorting:

n

In case the setting does exist, then check Enable collection sorting.

  • Step 5: Tap Save. In case you can’t find the option to enable collection sorting then you may need to edit your theme code. Please follow these steps below.

Step 2: Edit your theme code

On Desktop

  • Step 1: You may need to add some codes to the collection template of your theme if it does not include the option to enable collection sorting in the theme settings.

Or search for the theme that you want to edit and then choose Actions > Edit code.

  • Step 2: Click collection-template.liquid in the Sections directory. If you use Brooklyn, then click the collection-template.liquid file that is in the Snippets directory.

  • Step 3: Paste this code hosted on GitHub into the place in the code where you need to include the Sort by menu. The placement varies from theme to theme. Also, it depends on personal preference. You are able to experiment with pasting the code in sêarated places and checking to know how it looks on your collection pages. For several themes such as Brooklyn, you are allowed to paste the code right above the code {% if section.settings.collection_tags_enable %}.

  • Step 4: Tap Save.

On iPhone/Android

  • Step 1: From the Shopify app, tap Store.

  • Step 2: Tap Online Store in the Sales channels section.

  • Step 3: Tap Manage themes.

  • Step 4: Choose the theme you need to edit, and then tap Actions > Edit code.

  • Step 5: Click collection-template.liquid in the Sections directory. If you use Brooklyn, then click the collection-template.liquid file that is in the Snippets directory.

  • Step 6: Paste this code hosted on GitHub into the place in the code where you need to include the Sort by menu. The placement change from theme to theme, and according to personal preference. You are able to experiment with pasting the code in sêarated places and checking to know how it looks on your collection pages. For several themes such as Brooklyn, you are allowed to paste the code right above the code {% if section.settings.collection_tags_enable %}.

  • Step 7: Tap Save.

Conclusion

We hope that you could find this instruction helpful! Find out more related topics by searching for our previous posts!