# 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, Spark also displays a price slider, color swatches, and product chips for easy navigation.

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> | Sorting and filtering products are Shopify features. The theme provides the style of the filter options on collection pages, including features like product swatches. You can add custom filters with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery). See Shopify's [App guide](https://help.shopify.com/en/manual/online-store/search-and-discovery) to learn more.
{% endhint %}

![](/files/VI6NpqkKzTMHEnc9hMmY)

<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:

   ![](https://github.com/fluorescent/kb-spark/blob/main/.gitbook/assets/collections-filter.jpeg)

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

   ![](https://github.com/fluorescent/kb-spark/blob/main/.gitbook/assets/collection-pages-drawer.jpeg)
8. Choose whether to **Collapse filter groups**. Uncheck this option to always display filter options under each filter group.

   ![](https://github.com/fluorescent/kb-spark/blob/main/.gitbook/assets/collections-filter-closed.jpeg)
9. Click **Save**.

</details>

### 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. |

\\

***

> **Related links**\
> [Collections template](/spark/collection-pages/collection-pages.md)\
> [Product grid](/spark/collection-pages/product-grid.md)\
> [Banner](/spark/collection-pages/banner.md)\
> [Breadcrumbs](https://github.com/fluorescent/kb-spark/blob/main/collection-pages/broken-reference/README.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/spark/collection-pages/filters-and-sorting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.