Add a 'Sort by' menu to collection pages

You can include a Sort by drop-down menu on your collection pages to allow customers to change the order of the products.

A collection page showing products and a 'Sort by' menu

Sectioned and non-sectioned themes

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Check your theme settings

Most themes include a setting to enable a Sort by menu on collection pages. If your theme includes this setting, then you can enable it from the theme editor.

  1. Go to the theme editor.

  2. In the theme preview, navigate to any collection page on your online store.

  3. In the theme editor, you should now see the Collection or Collection pages tab:

    Collection pages tab

    Click this tab to view the settings for collection pages.

  4. Check if there is a setting to Enable collection sorting:

    Enable collection sorting setting

    If the setting exists, then check Enable collection sorting.

  5. Click Save. If you cannot find the option to enable collection sorting, then you will need to edit your theme code.

Edit your theme code

If your theme doesn't include the option to enable collection sorting in the theme settings, then you will need to add some code to your theme's collection template.

To edit your theme code:

  1. In the Sections directory, click collection-template.liquid. If you use Brooklyn, then click the collection-template.liquid file that is in the Snippets directory.

  2. Find the place in the code where you want to include the Sort by menu, and paste this code hosted on GitHub.

    The placement varies from theme to theme, and according to personal preference. You can experiment with pasting the code in different places and checking to see how it looks on your collection pages. For some themes, like Brooklyn, you can paste the code right above the code {% if section.settings.collection_tags_enable %}.

  3. Click Save.

Check your theme settings

Most themes include a setting to enable a Sort by menu on collection pages. If your theme includes this setting, then you can enable it from the theme editor.

  1. Go to the theme editor.

  2. In the theme preview, navigate to any collection page on your online store.

  3. In the theme editor, you should now see the Collection or Collection pages tab:

    Collection pages tab

    Click this tab to view the settings for collection pages.

  4. Check if there is a setting to Enable collection sorting:

    Enable collection sorting
    ]

    If the setting exists, then check Enable collection sorting.

  5. Click Save. If you cannot find the option to enable collection sorting, then you will need to edit your theme code.

Edit your theme code

If your theme doesn't include the option to enable collection sorting in the theme settings, then you will need to add some code to your theme's collection template.

To edit your theme code:

  1. In the Templates directory, click collection.liquid. If you use Brooklyn, then click the collection-template.liquid file that is in the Snippets directory.

  2. Find the place in the code where you want to include the Sort by menu, and paste this code hosted on GitHub.

    The placement varies from theme to theme, and according to personal preference. You can experiment with pasting the code in different places and checking to see how it looks on your collection pages. For some themes, like Brooklyn, you can paste the code right above the code {% if settings.collection_tags_enable %}.

  3. Click Save.

Ready to start selling with Shopify?

Try it free