Use sort and filter on your collection pages
Nyla supports product sort & filtering using Shopify’s Filters API. This article walks you through:
Using Filters
In order to use Filters with Nyla you should first set up your filters on Shopify, and then add a UI in Nyla to your collections grid in order for customers to be able to filter your products.
Setting up your filters on Shopify
You manage filters in Shopify. You can reference the following documentation to set up and manage your filters.
If you are displaying your filters in Nyla by iterating over an array of filters/values, filters will show in the order you set them in Shopify. You can sort the order of your filters in Shopify here.
In these docs, the term "Filter" represents each parent group of filters, like “Color”, “Size”, “Price”.
The term "Filter value" represents the list of values available within each filter, for example the filter values Blue, Green, Yellow would be available in the Filter "Color".
Filters limitations:
- Shopify lists some limitations to filters functionality that may be worth reviewing for your store. See here.
- Nyla doesn’t support color type metafields, meaning that you cannot pull in color values for swatches from a metafield. However you can still achieve the same effect in Nyla using properties and conditional visibility/different layouts, and setting the color directly in Nyla.
Building your Filters UI in Nyla
Templates and blocks
Nyla comes with the following templates and blocks out the box in order to help you get started quickly:
- Filters: Tabs
- Enables you to filter
- Filters: Tabs + Sort dropdown
- A block containing both the tabs filter along with the Sort: dropdown block
Properties and Link Actions
See these links for the properties and link actions you can use to build filters from scratch.
- The collection.filters array includes the list of filters. The values array contains the values within each filter.
- Using collection.filtersByName enables you to reference specific filters using the values set in Shopify. This enables you to create more custom layouts.
- You can use the link actions to apply or remove filters.
- To only allow one filter section per group you can use the APPLY_FILTER_SINGLE link actions.
Sort:
Templates and Blocks
To add sort to your site, you can use the following Nyla blocks:
- Sort dropdown
Building from scratch:
You can also build from scratch using link actions with radio inputs.
Note: It is required to use a radio buttons in order to be able to apply the sort via a query string.
Important: You need to add sort_by as the name on your form in order for the radio buttons to work as expected.
In order to use sort, you should use the Apply Sort link action. You can set any from:
- COLLECTION_DEFAULT
- BEST_SELLING
- CREATED
- ID
- MANUAL
- PRICE
- RELEVANCE
- TITLE
See here for the Shopify definitions of each sort type.
You can set ascending or descending for price, title and created. See link actions here.
Sort order appearing out of sequence
When sorting by price, Shopify sorts products according to the lowest priced variant on the product (this is true at the time of writing {9/16/2024}, but may be subject to change on Shopify's side).
This means that if you are using variant.price to display the variant price on your collection pages then variant prices might appear out of sequence in the sort order, because Shopify sorts products based on the lowest priced variant for each product, but the variant price being displayed might be different.
In order to fix this, you would need to display a price range using the price property to your customers on the grid items so they can see that Shopify is returning a sort based on the lowest-priced variant of each product.