Search & Filtering
      Back to home
      1. Knowledge Base
      2. Apps
      3. Search & Filtering

      Sort & Filter

      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”, "Material". 

      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. 
      • Nyla doesn't support a price range filter type. If you want to use a price range, you would need to achieve this using metafields. 

      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: CTAs, Dropdown & Modal with Sort
      • Filters: Tabs Block
      • Filters: Tabs Alternative 
      • Filters: Grid CTA 
      • Filters: Slider CTA
      • Filters: Dropdown
      • Filters: In stock checkbox
      • Filters: Modal
      • Sort: Dropdown

      Filters: CTAs, Dropdown & Modal w Sort 

      This block is a combination of the following three: 

      - Filters: CTAs

      - Filters: Dropdown

      - Filters: Modal with sort

      Check the docs from each block below to understand what they provide and how to edit them.

      Filters: Tabs

      The Filters: Tabs and Filters: Tabs & Dropdown Sort blocks provide the same filtering functionality, with the key difference that the latter also includes sorting options.

      Note: This block must be added within a collection source to function properly.

      By default, the block displays all filter labels associated with the collection, along with the values for the first 4 filters.

      Adding More Filter Values

      If your collection has more than 4 filters, you’ll need to manually add the additional filter values. Follow these steps to display values for extra filters:

      1. Duplicate the Filter 4 values grid.
      2. Position the new grid directly below the original Filter 4 grid.
      3. Rename the grid by changing the number "4" to "5" (for Filter 5).
      4. Select the grid by clicking on it.
      5. Edit the visibility settings: In the third text box, change the "3" to a "4."
      6. Update the source:
        Go to the Design tab > Source > Replace "3" with "4".
      7. Repeat for additional filters: Follow the same process (steps 1-6), incrementing the numbers each time to add more filters (e.g., for Filter 6, replace "4" with "5", and so on).

      For a visual walkthrough on how to add or remove filters, check this video: 

       

      Filters: Tabs Alternative 

      The "Filters: Tabs Alternative" block comes with two tabs by default. The tab headers automatically display the filter names, while the tab content features buttons for toggling each filter value. You can select multiple values at the same time.

      Below the filter values, there's a handy reset button. Clicking it will clear all selected filters and sort options, returning everything to its default state.

      The "Filters: Tabs Alternative and Sort Modal" block includes all the features mentioned above, plus a built-in sort modal, providing both filtering and sorting options within the same block.

      Adding More Filters

      If your collection has more than 4 filters, you’ll need to manually add the additional filter values. Follow these steps to display values for extra filters:

      1. Duplicate the Filter 2 tab.
      2. Rename the new tab:
        Select the new tab > Rename
      3. Update the title of the tab:
        Go to the Design tab > Title > Enter the title of the new filter
      4. Select the grid by going to the Content tab and clicking on the grid.
      5. Update the source:
        Go to the Design tab > Source > Replace "2" with the position(in Shopify) of the filter that you want to add.

      Note: Steps 2 to 5 can be applied to an existing tab to replace a filter.

      Filters: Grid CTA  & Filters: Slider CTA 

      The Filters: Grid CTA and the Filters: Slider CTA are meant to display all values that have results from one filter as CTAs and select one at a time. 

      These two filters layouts difer only in the first option being displayed in grid form and the second one inside a slider. 

      By default, the block displays all values of the first filter associated with the collection. 


      Changing the filter displayed


      Follow these instructions to replace the filter selected

      1. Select the Filters: Grid CTA or Filters: Slider CTA content item
      2. Go to Design > Source > change the number of the property to select a different filter. 


      Filters: Dropdown

      The Filters: Dropdown displays a dropdown per filter with all filter values with results in the form of checkboxes. Multiple values for the same filter can be selected at the same time. 

      By default, the block displays the first 4 filters that have results from the collection. 

      Adding More Filters

      If your collection has more than 4 filters, you’ll need to manually add the additional filter values. Follow these steps to display values for extra filters:

      1. Duplicate the last Dropdown group
      2. Access the newly created Dropdown group > Label > Select Text > Replace the number in the property with the filter index from Shopify. 
      3. Go back to the new Dropdown group > Dropdown Items > Select the "Filter Checkbox" content item
      4. Click on Design > Source > Replace the number in the property with the filter index from Shopify. 

      Note: Steps 2 to 4 can be applied to an existing Dropdown group to replace a filter.

      Filters: In stock checkbox

      The Filters: In stock checkbox displays a simple checkbox that when checked will only display the products that are in stock. 

       

      Filters: Modal


      The Filters: Modal displays a CTA that opens a modal containing an accordion of filters, each accordion item contains a filter with its values. Multiple values for the same filter can be selected at the same time. 


      By default, the block displays the first 4 filters that have results from the collection. 

      The "Filters: Modal with sort" block includes all the features mentioned above, plus a built-in sort functionality inside the same modal. 


      Adding More Filters

      If your collection has more than 4 filters, you’ll need to manually add the additional filter values. Follow these steps to display values for extra filters:

      1. Select the Filters: Modal content item > Modal > Filters 
      2. Duplicate the Filter 4
      3. Rename the new filter.
      4. Select the Filter 5 > Content > Title > Replace the number in the property with the position of the filter from Shopify. 
      5. Select Filter Values > Design > Source > Replace the number in the property with the position of the filter from Shopify. 

      Note: Steps 3 to 5 can be applied to an existing filter to replace it.

      Sort: Dropdown

      The Sort: Dropdown adds a sort button that when clicked displays a list of checkboxes as sorting options.

      By default, it displays the following sorting options: 

      - Best selling

      - Newest

      - Oldest

      - Price, low to high

      - Price, high to low 

      - Title, A-Z

      - Title, Z-A

      - Default

      Adding new sorting options

      To add new sorting options follow these steps: 

      1. Select the Sort Options > Radio Group 
      2. Duplicate the last option (Default)
      3. Select the last option > Action > Replace the value in the parentheses with any of the available sort types

      Note: You can skip steps 1 and 2 if you want to replace one of the current sorting options instead of adding a new one. 


      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.