The Option Filter and Color Filter allow customers to refine the products displayed on your Shopify collection pages. With these tools, shoppers can narrow results based on product attributes such as category, size, and color, creating a faster and more personalized shopping experience.
This guide explains how to add, configure, and style these filters in your Shopify Page Builder, and how to prepare your product data using Shopify’s Search & Discovery app.
1. Prerequisites
Before setting up filters for your collection template, ensure the following:
The Shopify Search & Discovery app is installed and configured.
→ This app controls all filter definitions available to your storefront.Product filters (such as color, size, category, material, etc.) have been configured within the Search & Discovery app.
Without these definitions, the Option Filter and Color Filter will not be available for selection in Page Builder.
2. Creating a Collection Template
Open or create a Collection Template in your Shopify Page Builder.
This template determines how products will be displayed on a specific collection.
Once your template is ready, you can add filtering elements.
3. Adding the Option Filter or Color Filter
Step 1: Open the Insert Panel
In the left sidebar, open the Insert Panel.
Step 2: Choose a Collection Filter Element
Hover over the Collection category to display available elements.
Drag and drop either:
Option Filter
Color Filter
onto the canvas (your page layout editor).
4. Configuring the Filter
Once the filter is placed on the canvas:
Select the filter element.
In the right sidebar, under the Collection Filter settings, choose a filter from the dropdown list.
The dropdown will display filters previously created in the Search & Discovery app.
Available Filter Types
Category Filter
Option Filters (e.g., size, material, model)
Color Filter
Once selected, the chosen filter will automatically populate and display the available options based on your product data.
The Color Filter requires the color data to be properly configured in Shopify and connected in the Search & Discovery app.
5. Styling the Filters
Each filter type can be customized to match your design aesthetic. You can style both unselected (default) and selected (active) states for the filter elements.
6. Special Notes for the Color Filter
To ensure the Color Filter works properly:
Each product must have a correctly configured color metafield storing color values.
This metafield must be added as a filterable condition in the Search & Discovery app.
When configured properly, the Color Filter will:
Display all valid product colors assigned to items in the collection.
Automatically show color swatches representing those values.
This ensures customers can visually filter products based on accurate color data.