Collection sort_by and filter URLs
Link to a sorted or filtered Shopify collection: every sort_by value and the filter.p / filter.v parameters for type, vendor, tag, price, stock and options.
- Sort
- ?sort_by=price-ascending
- Filter
- filter.p.* (product), filter.v.* (variant)
- Needs
- Filters created in Search & Discovery
- Works on
- Collection and search pages
- Last checked
In short
Collection URLs accept sort_by (best-selling, price-ascending, created-descending and five more) and storefront filter parameters in the form filter.p.<attribute> for product data or filter.v.<attribute> for variant data, such as /collections/all?filter.v.option.color=red&filter.v.availability=1. Use them in banners and emails to land shoppers on a ready-made selection. A filter only works once it’s set up in the Search & Discovery app.
How to use it
- Add the filters you need in the Search & Discovery app (type, vendor, tag, price, availability, options, metafields).
- Apply them on the storefront once and copy the URL, or build it by hand: filter.p.product_type=shoes, filter.v.option.size=L.
- Add sort_by with one of the eight values, joined with &.
- Use several values of one filter with commas (red,blue): values are OR, different filters are AND.
Code
sort-links.liquid{%- comment -%}
Plain sort links built from the collection's own options, so the list
matches what Shopify accepts. The sort_by filter only works on collection.url.
{%- endcomment -%}
{%- assign current = collection.sort_by | default: collection.default_sort_by -%}
<nav aria-label="Sort products">
{%- for option in collection.sort_options -%}
<a href="{{ collection.url | sort_by: option.value }}"
{%- if option.value == current %} aria-current="true"{% endif %}>
{{- option.name -}}
</a>
{%- endfor -%}
</nav>
urls.txt# sort_by values on collection pages
manual best-selling title-ascending title-descending
price-ascending price-descending created-ascending created-descending
https://your-store.com/collections/shoes?sort_by=price-ascending
# Storefront filters: filter.<p|v>.<attribute>[.<scope>]=<value>
# p = product level, v = variant level. The filter must exist in
# Search & Discovery first; values are case as stored.
https://your-store.com/collections/all?filter.p.product_type=shoes&filter.v.option.color=red
https://your-store.com/collections/all?filter.v.option.color=red,blue
https://your-store.com/collections/all?filter.v.availability=1
https://your-store.com/collections/all?filter.v.price.gte=20&filter.v.price.lte=50
https://your-store.com/collections/all?filter.p.vendor=vendor1
https://your-store.com/collections/all?filter.p.tag=new,trending
https://your-store.com/collections/all?filter.p.m.custom.made_in=canada
# Combine with sorting
https://your-store.com/collections/shoes?filter.v.availability=1&sort_by=best-selling
Written by Lintel. MIT license: free to use in your own store and in client work.
Limits and edge cases
- Filtered and sorted URLs show the same products in a different order or subset. Keep them out of menus and sitemaps and let the canonical tag point at the collection.
- A store can have up to 25 filters.
- Price filters (filter.v.price.gte / .lte) take amounts in the shop’s default currency format.
- Metafield filters use the namespace and key: filter.p.m.custom.made_in=canada.
Questions
- What sort_by values does Shopify accept?
- manual, best-selling, title-ascending, title-descending, price-ascending, price-descending, created-ascending and created-descending.
- How do I link to a filtered Shopify collection?
- Add the filter parameters to the collection URL, for example /collections/shoes?filter.v.option.size=42&filter.v.availability=1.
- Why doesn’t my filter URL do anything?
- The filter must exist in the Search & Discovery app, and the value must match the stored value, for example the exact option value.
- Do filters work on the search page too?
- Yes. Storefront filters apply to collection and search results pages.
Shopify documentation
- Checked on a Shopify store on the date shown. Shopify changes its admin often; if a step looks different, the idea usually still works.
- Examples use placeholder IDs and your-store.myshopify.com. Replace them with your own.
- MIT license for the code snippets.
Need this built, tested and maintained for your store? See Shopify development.
