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

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. Find the theme you want to edit, and then click Actions > Edit code.

  2. 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.

  3. 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 %}.

  4. 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. Find the theme you want to edit, and then click Actions > Edit code.

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

  3. 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 %}.

  4. Click Save.

Ready to start selling with Shopify?

Try it free