Filters and sorting

Collection pages

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

Set up filter bar

STEPS

In your theme editor (Customize):

1. Click on the Product grid section to open the settings.

2. Choose whether to Enable sorting 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 ↗.

3. Choose whether to Enable filters to callow customers to filter by product options, product type, price, availability, and more.

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

4. Select a Desktop filter location to change where to display the filter options.

   Select Top bar to display filters above the product grid.

   Select Sidebar to display filters to the left of the product grid.

5. If Top bar is selected, choose whether to Enable sticky top bar to keep the filters visible at the top of the screen when visitors scroll down.

6. If Sidebar is selected, choose whether to Enable sticky filter sidebar to keep the filters visible when visitors scroll down.

7. Choose to Collapse filter bar on desktop to hide filter and sorting options until visitors click to open the "Filter" bar.

8. Choose to Collapse filter groups to hide filter options until visitors click to open the available filter groups.

   You can select this option for both desktop and mobile.

9. If you have product swatches enabled, check the Show swatch filters box to display those variant options as swatches.

10. If you have product chips, check the Show chip filters box to display those variant options as chips.

    Select a Chip layout. Either 2 Column, 3 Column, or Natural.

    Natural matches the width of the chip to the length of the variant name.

11. Click Save.

Customize filter options

You can use Shopify's Search & Discovery app to add custom filters based on product categories, variants, tags, metafields, and more. See Shopify's App guide ↗ to learn more.

Stiletto can show your Variant swatches as filter options. This feature is separate from Shopify's Visual filters ↗, which allows you to add visual swatches to filter options, separately from product variants.

Settings reference

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

Enable sorting and filtering

Setting	Description
Enable sorting	Allow customers to sort search results by relevance, title, or price.
Enable filtering	Allow customers to filter by product options, product type, price, availability, and more. You can edit filter options with Shopify's Search & Discovery app.

Filters layout

Setting	Description
Enable sticky top bar	Keep the filter top bar visible at the top of the screen when visitors scroll down. This setting applies only when the filter location is set to Top bar.
Desktop filter location	Display filters in a Top bar above the product grid or as a Sidebar to the left of the product grid.
Collapse filter display on desktop	Hide the filter sidebar when the collection page loads. Visitors can click the Filter button to reveal the sidebar.
Enable sticky filter sidebar	Keep the filter sidebar visible when visitors scroll down. This setting applies only when the filter location is set to Sidebar.
Collapse filter group	Hide values of filter groups until visitors click to reveal them.
Show variant option swatch filters	If you have Variant swatches enabled, choose to display those variant options as swatches. This feature is separate from Shopify's Visual filters, which allows you to add visual swatches to filter options, separately from product variants.
Show chip filters	Choose to display chips instead of variants names.
Chip layout	Choose to display chips in a 2 or 3 column grid. Select Natural to display a layout that adapts to the natural length of the chips.

---

Related links Collections template Product grid Banner Breadcrumbs