Customise sorting option on Collection page

Topic summary

Customizing the collection “Sort by” in Shopify (Narrative/Dawn): users want to remove options, rename labels, add new sorts (e.g., by SKU), and control mobile behavior.

Key constraints

  • Sort options are generated by Shopify; you cannot add new back-end sort types (e.g., SKU) or rename built-in labels dynamically.
  • Supported sort values: manual, best-selling, title-ascending, title-descending, price-ascending, price-descending, created-ascending, created-descending.

Workarounds/solutions

  • Hide options: edit Sections > collection-template.liquid, loop over collection.sort_options, and exclude values with an unless condition (e.g., hide title-ascending/Z-A).
  • Rename labels: replace the dynamic loop with a hard-coded
Summarized with AI on December 18. AI used: gpt-5.

If you want to add custom option then we have total this option:

<select name="sort_by" id="SortBy" aria-describedby="a11y-refresh-page-message" class="collection-sort__input">
    <option value="manual">Featured</option>
    <option value="best-selling" selected="selected">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-ascending">Date, old to new</option>
    <option value="created-descending">Date, new to old</option>
</select>

Remove below code and add this above code:

<select name="sort_by" id="SortBy" aria-describedby="a11y-refresh-page-message" class="collection-sort__input">
    {% for option in collection.sort_options %}
        <option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
    {% endfor %}
</select>

In this you can change text of this option as you want but cant change value

4 Likes