Filters and sorting

Collection page

The filter bar allows visitors to sort and filter collections according to what they're looking for. Products can be filtered by availability, product type, vendor, and other options.

• Enable sorting (by best selling, alphabetical, price, or date)

• Enable filtering (by price slider and 'In stocky only')

• Add more filter options with Shopify's Search & Discovery

• Show a sticky filter and sort button

Filter drawer with default options

Color swatch and size options

Sorting and filtering products are Shopify features. The theme provides options to customize the appearance.

Set up filters in Shopify admin

---

By default, the filter drawer includes a price slider and In stock only option. You can add more filter options with Shopify's Search & Discovery app.

1. In the Shopify Search & Discovery app, go to Filters, and then click Add filter.

2. Select a Source for the filter options. Sources can be variant options, tags, or metafields.

3. Add a Filter label to change the filter group name that appears in the filter drawer.

4. Click Save.

Learn more about customizing filter options in Shopify's Search & Discovery manual.

Click Product grid section to find settings

Setting	Description	Options
Enable sorting	Allow visitors to sort products by availability, price, or date released.	Default: Enabled
Enable filtering	When enabled, visitors can filter products by type, price, availability, and other options.	Default: Enabled
Filter group open state	Choose how filter groups are displayed when the page loads.	First opened Default All open All closed

Sticky filter and sort button

---

By default, a "sticky" button for filters and sorting appears at the bottom of the screen.

You can hide the button on desktop by deselecting the Show sticky and filter button option. The button always appears on mobile screens to remain accessible.

Sticky filter and sort button

Click Product grid section to find settings

Setting	Description	Options
Show sticky filter and sort button	Continue to show the filter and sort button at the top of the screen when visitors scroll down.	Default: Disabled

Show product filter swatches

---

By default, filter options for colors display as swatches. To disable this option, go to Theme settings > Swatches and de-select the Enable product filter swatches.

You can also change the Product filter swatch layout from Compact to Expanded.

Filter option swatches with expanded layout

See our guide to set up swatches for your product variants.

Go to Theme settings > Swatches to find settings

Setting	Description	Options
Enable product filter swatches	Display variant options in collection and search page filters as swatches.
Color swatch layout	Choose the layout of swatches in product filters.	Compact Default Expanded