> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/lorenza/collection-pages/filters-and-sorting.md).

# Filters and sorting

Let customers discover products quickly by filtering your products by availability, price, type, vendor, and your variant options. When filters are enabled, Lorenza also displays a price slider, color swatches, and product chips for easy navigation.

![](/files/F01L3Bk72LGUaF7X5Ewj)

## Set up filter bar

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Open a **Collections template** to edit from the dropdown menu in the top bar.
2. Click on the **Product grid** section to open the settings.
3. Choose whether to **Show sort options** to let customers sort products by *Price, Date, Best Selling, Featured,* or *Alphabetically.*

   > Sorting is a Shopify feature. Learn how to [change the default sort order](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection).
4. Choose whether to **Show filters**.

   > To select which filter options to enable, go to your **Online Store > Navigation** settings in your Shopify admin. In the **Collection and search filters** section, you can add, remove, and reorder your filter options.

   > See Shopify's manual for their guide on [collection filters](https://help.shopify.com/en/manual/online-store/themes/os20/customize/filters).
5. If you have \[variant swatches]\(set up variant swatches) enabled, check the **Show swatches** box to display those variant options as swatches.
6. If you have \[variant chips enabled]\(set up variant chips), check the **Show chips** box to display those variant options as chips.
7. Choose a **Filter style**. Either **Sidebar** or **Buttons**.

   > Choose **Sidebar** to show your tags in a list along the left side of the collection:

   ![](/files/F01L3Bk72LGUaF7X5Ewj)

   > Choose **Buttons** to show buttons that open a drawer with a list of tags:

   ![](/files/kJcdm3S7WKZeKvfhRiF1)
8. Choose whether to **Collapse filter groups**. Uncheck this option to always display filter options under each filter group.

   ![](/files/9De4TAkCGGgthKUBd8v6)
9. Click **Save**.

</details>

## Customize filter options

You can use Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery) to add custom filters based on product categories, variants, tags, metafields, and more. See Shopify's [App guide](https://help.shopify.com/en/manual/online-store/search-and-discovery) to learn more.

{% hint style="info" %}
Lorenza can show your Variant swatches as filter options. This feature is separate from Shopify's [Visual filters](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters), which allows you to add visual swatches to filter options, separately from product variants.
{% endhint %}

### Settings reference

In the **Collection template**, click the **Product grid** section to find the following settings.

| Setting                | Description                                                                                                                                                                                                                                                                                                                |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show sort options      | Let customers sort products by Price, Date, Best Selling, Featured, or Alphabetically.                                                                                                                                                                                                                                     |
| Show filters           | Let customers filter products by filter options enabled in the Navigation settings of the Shopify admin.                                                                                                                                                                                                                   |
| Show swatches          | Display variant options as swatches. You will need to set up variant swatches for your product options.                                                                                                                                                                                                                    |
| Show chips             | Display variant options as chips. You will need to set up variant chips in Theme settings > Product.                                                                                                                                                                                                                       |
| Filter style           | <p>Choose either Sidebar or Buttons. On mobile, the filter style is set to Buttons.<br><br><strong>Sidebar</strong> shows your tag and sort options in a sidebar menu on the left side of the page.<br><br><strong>Buttons</strong> shows your tag and sort options as a row of square buttons above the product grid.</p> |
| Collapse filter groups | Uncheck to display all filter options nested under filter groups.                                                                                                                                                                                                                                                          |

\\

***

> **Related links**\
> [Collections template](/lorenza/collection-pages/collection-pages.md)\
> [Product grid](/lorenza/collection-pages/product-grid.md)\
> [Banner](/lorenza/collection-pages/banner.md)\
> [Breadcrumbs](/lorenza/collection-pages/banner/breadcrumbs.md)