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 set up filters in Shopify, and then add, configure, and style them in Instant.
Overview
Collection filters give your customers the ability to find products quickly by filtering based on attributes like size, color, material, and category. These filters connect directly to your Shopify store's filter configuration.
Available Filter Types
Filter Type | Description |
Option Filter | Filters by product options like size, material, or model |
Color Filter | Displays color swatches for visual color-based filtering |
Category Filter | Filters by product category or type |
Part 1: Setting Up Filters in Shopify
Before adding filters in Instant, you must configure them in Shopify using the Search & Discovery app.
Step 1: Install the Search & Discovery App
Go to your Shopify Admin
Navigate to Apps
Click Shopify App Store
Search for Search & Discovery
Click Add app and then Install
The app is free and developed by Shopify.
Step 2: Access the Filters Section
Open the Search & Discovery app from your Shopify Admin
Click on Filters in the left sidebar
You'll see a list of any existing filters
Step 3: Add a New Filter
Click the Add filter button
Choose a filter source from the available options:
Source | Description |
Availability | Filter by in-stock or out-of-stock status |
Price | Filter by price range |
Product Type | Filter by product type |
Vendor | Filter by product vendor/brand |
Tags | Filter by product tags |
Product Options | Filter by options like size, color, material |
Category | Filter by product category |
Metafields | Filter by custom metafield values |
Configure the filter label (the name customers will see)
Click Save
Step 4: Arrange Your Filters
In the Filters section, drag and drop filters to reorder them
The order here determines the display order on your collection pages
Click Save when finished
Setting Up Color Filters with Metafields
For color swatches to work properly, additional setup is required:
Create Color Metafields
Go to Settings → Custom data in your Shopify Admin
Click Products
Click Add definition
Create a metafield for color with the following settings:
Name: Color (or your preferred label)
Type: Color
Click Save
Assign Colors to Products
Open a product in your Shopify Admin
Scroll down to the Metafields section
Find the color metafield and add the color value
Save the product
Repeat for all products that need color filtering
Add Color as a Filter
Open the Search & Discovery app
Go to Filters
Click Add filter
Select Metafields as the source
Choose your color metafield
Save the filter
Part 2: Adding Filters in Instant
Once your filters are configured in Shopify, you can add them to your collection templates in Instant.
Prerequisites Checklist
Requirement | Status |
Search & Discovery app installed | Required |
Filters configured in the app | Required |
Color metafields set up (for Color Filter) | Required for color swatches |
Collection template created in Instant | Required |
Creating a Collection Template
Open or create a Collection Template in Instant
This template determines how products will be displayed on a specific collection
Adding Filter Elements
Step 1: Open the Insert Panel
In the left sidebar, open the Insert Panel.
Step 2: Find Collection Filter Elements
Hover over the Collection category to display available elements.
Step 3: Add a Filter
Drag and drop one of the following onto the canvas:
Element | Use Case |
Option Filter | Size, material, model, and other attribute filtering |
Color Filter | Visual color swatch filtering |
Configuring Filters in Instant
Once the filter is placed on the canvas:
Select the filter element
In the right sidebar, locate the Collection Filter settings
Choose a filter from the dropdown list
The dropdown displays filters previously created in the Search & Discovery app.
Available Filter Options
Filter Type | Examples |
Category Filter | Product type, collection category |
Option Filters | Size, material, model, style |
Color Filter | Product colors (requires metafield setup) |
Once selected, the filter automatically populates and displays available options based on your product data.
Styling Filters
Each filter type can be customized to match your design aesthetic.
Stylable States
State | Description |
Default (Unselected) | How the filter option appears normally |
Active (Selected) | How the filter option appears when selected by the customer |
Customize colors, borders, typography, and other style properties for both states to create clear visual feedback for your customers.
Limitations and Considerations
Limitation | Details |
Large collections | Collections with more than 5,000 products don't display filters |
Filter values | A filter can display a maximum of 100 values on your store |
Total filters | You can add up to 25 filters in total |
Filter groups | Maximum of 1,000 filter groups across all selected filter settings |
Troubleshooting
Filters Not Appearing in Instant
Issue | Solution |
No filters in dropdown | Configure filters in the Search & Discovery app first |
Color swatches not showing | Verify color metafields are set up and assigned to products |
Filter values missing | Ensure products have the relevant attributes assigned |
Filters Not Working on Storefront
Issue | Solution |
Filters not visible | Check that your theme supports filtering |
Values not updating | Re-save products and give Shopify time to re-index |
Quick Reference
Task | Action |
Install Search & Discovery | Shopify Admin → Apps → App Store → Search & Discovery |
Add filter in Shopify | Search & Discovery → Filters → Add filter |
Create color metafield | Settings → Custom data → Products → Add definition |
Add filter in Instant | Insert Panel → Collection → Option Filter or Color Filter |
Configure filter | Select filter → Right sidebar → Collection Filter → Choose from dropdown |
Style default state | Select filter → Style tab → Customize appearance |
Style active state | Select filter → Interactions → Active state |
Complete Setup Checklist
Step | Location | Status |
1. Install Search & Discovery app | Shopify Admin → Apps | ☐ |
2. Configure filters | Search & Discovery → Filters | ☐ |
3. Set up color metafields (if needed) | Shopify → Settings → Custom data | ☐ |
4. Assign metafields to products | Shopify → Products | ☐ |
5. Add color metafield as filter | Search & Discovery → Filters | ☐ |
6. Create collection template | Instant → Layouts | ☐ |
7. Add filter elements | Instant → Insert Panel → Collection | ☐ |
8. Configure and style filters | Instant → Right sidebar | ☐ |