Skip to main content

Insert a 'Sort by' menu to collection pages

Last updated: October 16 2024

Written and researched by experts at Avada Learn more about our methodology

Having a Sort by menu on collection pages is crucial for any e-commerce store, offering customers a convenient way to sort products and browse them efficiently. However, many store owners are unsure how to insert a Sort by menu into collection pages in Shopify. This guide will walk you through the simple steps to add this feature, improving your store’s user experience and helping customers find what they need faster.

How to insert a Sort by menu to collection pages

Let’s view the process of inserting a Sort by menu to collection pages on Shopify:

Step 1: Open Theme Editor

  • Log into your Shopify admin.
  • Go to Online Store > Themes.
  • Click the Customize button next to your active theme.
insert a Sort by menu 1

Step 2: Go to Collection Pages

  • In the theme editor, use the top dropdown menu to select Collection pages or a similar option.
insert a Sort by menu 2

Step 3: Enable Sorting

  • Look for a section related to collection settings.
  • There should be an option like “Enable filtering” or “Enable sorting
  • Check the box to enable the Sort by menu.
insert a Sort by menu 3

Step 4: Save Changes

  • Click the Save button in the top right corner of the theme editor.

Bonus: Edit Your Theme Code (Advanced)

You can insert a Sort by menu to collection pages by editing the theme code of your Shopify store (which requires knowledge of Liquid and HTML). Here are the steps to follow:

#1 - Access Code Editor

  • Go to Online Store > Themes > Actions > Edit code.
insert a Sort by menu 4

#2 - Open Collection Template

  • Find and open the collection.liquid file (or similar) in the “Templates” folder.
insert a Sort by menu 5

#3 - Insert Code Snippet

  • Find the appropriate place within the collection.liquid file where you want the Sort by menu to appear. Usually, it’s near the top of the page, above the product grid.
  • Paste the following code snippet:

<label for="sort_by">{{ 'collections.sorting.title' | t }}</label>
<select name="sort_by" id="sort_by">
  <option value="manual">Featured</option> 
  <option value="best-selling">Best Selling</option>
  <option value="title-ascending">Alphabetically, A-Z</option>
  <option value="title-descending">Alphabetically, Z-A</option>
  <option value="price-ascending">Price, low to high</option>
  <option value="price-descending">Price, high to low</option>
  <option value="created-descending">Date, new to old</option>
  <option value="created-ascending">Date, old to new</option>
</select>

insert a Sort by menu 6

#4 - Save changes

Conclusion

This guide has explored how to enhance your Shopify store’s user experience by adding a “Sort by” menu to your collection pages, either through theme settings or code customization. Have you implemented a Sort by menu in your store, or are you considering adding one? We’d love to hear about your experiences and any additional tips you might have in the comments below!

linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.