All Tutorials

Add a “Sort by” menu to collection pages

All Tutorials

Add a “Sort by” menu to collection pages

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

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. From the drop-down menu at the top of the page, or from the Templates menu on mobile, select Collection pages.

  3. Click Collection or Collection pages.

  4. Check if there is an Enable collection sorting setting. If the setting exists, then check Enable collection sorting.

  5. Click Save.

If you can't 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:

Create a code snippet

To create a code snippet for the sorting option:

  1. In the Snippets directory, click Add a new snippet.

  2. Name your snippet collection-sorting, then click Create snippet. Your snippet file opens in the code editor.

  3. In your new collection-sorting snippet file, paste the following code:

    <div>
        <label for="SortBy">Sort by</label>
        <select name="SortBy" id="SortBy">
            {% for option in collection.sort_options %}
                <option value="{{ option.value }}" {% if option.value == collection.sort_by %}selected{% endif %}>{{ option.name }}</option>
            {% endfor %}
        </select>
    </div>
    
    <script>
    // Save existing sort parameters
    Shopify.queryParams = {};
    if(location.search.length) {
        for(var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
        aKeyValue = aCouples[i].split('=');
            if (aKeyValue.length > 1) {
                Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
            }
        }
    }
    
    // Add existing sort parameters to current URL
    document.querySelector('#SortBy').addEventListener('change', function(e) {
        var value = e.currentTarget.value;
        Shopify.queryParams.sort_by = value;
        location.search = new URLSearchParams(Shopify.queryParams).toString();
    });
    </script>
  4. Click Save.

Include your snippet in the collection template

  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 the following code:

    {% render 'collection-sorting' %}

    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.