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.

alt

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 Customize theme page.

  1. Go to the Customize theme page.

  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:

    alt

    Click this tab to view the settings for collection pages.

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

    alt

    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, click Actions, and then click 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 Customize theme page.

  1. Go to the Customize theme page.

  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:

    alt

    Click this tab to view the settings for collection pages.

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

    alt

    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, click Actions, and then click 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.

Want to discuss this page?

Visit the Shopify Community