Creating Filters

You create filters from the Filters page (/app/filters). Click the Add Filter button to open the filter creation page (/app/filters/create), where you configure everything about your new filter.

Filter Configuration Card

The top section of the creation page contains the core filter settings:

Filter Name

Enter a display name for the filter. This is the heading shoppers see in the filter sidebar (e.g., "Color", "Brand", "Price").

Filter Type

Select the display type for the filter. Each type determines how the filter options appear to shoppers:

Type	Best For
Checkbox	Multi-select attributes (tags, vendor, product type)
Radio	Single-select attributes where only one value applies
Dropdown	Compact single-select menus
Price Range	Price filtering with a dual-handle slider
Color Swatch	Visual color circles for color options
Size	Button-style size selectors

Source Field

Choose which product data powers the filter. Available source fields:

• Vendor -- Filter by product vendor/brand
• Product Type -- Filter by Shopify product type
• Price -- Filter by product price (automatically uses the Price Range type)
• Tags -- Filter by product tags
• Options -- Filter by variant options (Color, Size, Material, etc.)
• Custom Metafield -- Filter by a specific product metafield (you provide the namespace and key)

When you select a source field, FilterIQ scans your catalog and populates the available filter values automatically.

Zone Selector

Choose where the filter appears on your storefront. You can assign each filter to one or more display zones:

• Sidebar -- The vertical filter panel alongside the product grid (desktop)
• Header -- A horizontal filter bar above the product grid
• Above Grid -- Inline filter chips displayed between the page header and the product grid
• Mobile Drawer -- The slide-out filter drawer on mobile devices

Most filters default to Sidebar and Mobile Drawer. You can adjust zone assignments per filter to create different layouts for different screen sizes.

Filter Options Table

Below the configuration card, you will see the Filter Options Table listing every value discovered for your selected source field. Each row shows:

• Option label -- The display name for the value (editable)
• Display type -- How this specific option renders (inherits from the filter type, but can be overridden)
• Enabled toggle -- Turn individual options on or off without deleting them
• Drag handle -- Drag rows up or down to reorder how options appear to shoppers

Reordering Options

To change the order of filter options:

1. Hover over the drag handle on the left side of any row
2. Click and drag the row to the desired position
3. Release to drop it in place

The order you set here is the exact order shoppers see in the filter panel.

Live Filter Preview

The right side of the creation page shows a Live Filter Preview -- a WYSIWYG representation of how your filter will look on the storefront. As you change settings, the preview updates in real time:

• Change the filter type and the preview switches between checkboxes, swatches, dropdowns, etc.
• Reorder options and the preview reflects the new order
• Toggle options off and they disappear from the preview
• Change the zone and the preview shows the filter in that layout context

Use this to verify your filter looks right before saving.

Collection Filter Picker

If you are creating a collection-specific filter (see Collection Filters), a Collection Filter Picker appears. This lets you:

• Search collections by name using the search box
• Browse a paginated list of all your collections
• See product counts next to each collection name
• Select one or more collections to apply this filter to

Editing an Existing Filter

To edit a filter you have already created:

1. Go to the Filters page (/app/filters)
2. Click on any filter in the list to open its configuration
3. Make your changes -- all the same fields are available
4. Click Save to update the filter

Changes are saved as a draft until you publish them.

Saving and Validation

When you click Save, FilterIQ validates your configuration:

• Filter name is required -- You cannot save a filter without a name
• Source field is required -- You must select a data source
• At least one option must be enabled -- A filter with all options disabled cannot be saved
• Duplicate names are flagged -- You will see a warning if another filter already has the same name

If validation passes, the filter is saved to your draft configuration. To push it live to your storefront, you need to Publish (see Publishing).

Example: Creating a Color Swatch Filter from Scratch

This walkthrough creates a visual color swatch filter from your product variant options.

1. Go to the Filters page (/app/filters)
2. Click the + Add Filter button in the top right
3. In the Filter Name field, type Color
4. For Filter Type, select Color Swatch from the dropdown
5. For Source Field, select Options > Color -- FilterIQ scans your catalog and populates all discovered color values (e.g., Red, Blue, Navy, Forest Green)
6. In the Filter Options Table, review the discovered values:
   • Standard color names (Red, Blue, Black, White) are auto-mapped to hex colors
   • For custom or brand-specific names (e.g., "Ocean Mist", "Dusty Rose"), click the color picker next to each value and choose the matching hex code
   • Drag option rows to reorder -- put your most popular colors at the top
   • Toggle off any values you do not want shoppers to see (e.g., "Default Title")
7. In the Zone Selector, ensure Sidebar and Mobile Drawer are checked
8. Check the Live Filter Preview on the right side -- you should see colored circles arranged in the order you set
9. Click Save
10. Your color swatch filter is saved as a draft. Go to the Filters page and click Publish to push it live.

Example: Creating a Price Range Filter

This walkthrough creates a dual-handle price slider.

1. Go to the Filters page (/app/filters)
2. Click the + Add Filter button in the top right
3. In the Filter Name field, type Price
4. For Filter Type, select Price Range -- this is automatically selected when you choose Price as the source field
5. For Source Field, select Price -- FilterIQ scans your catalog and detects the minimum and maximum prices across all products
6. The Filter Options Table for a price range filter shows configuration fields instead of individual values:
   • Step increment -- Set to 1 for precise filtering, 5 or 10 for a smoother slider experience
   • Show histogram -- Toggle on to display a distribution chart showing how many products fall in each price range
   • Manual input fields -- Toggle on to let shoppers type exact min/max values alongside the slider
7. In the Zone Selector, ensure Sidebar and Mobile Drawer are checked
8. Check the Live Filter Preview -- you should see a dual-handle slider with your store's price range
9. Click Save
10. Go to the Filters page and click Publish to push it live.

Common Mistakes and How to Avoid Them

Mistake	What Happens	How to Fix
Creating a filter from a source field with only 1-2 values	The filter appears but is not useful to shoppers (e.g., a "Material" filter with only "Cotton")	Check the Filter Options Table before saving -- if there are fewer than 3 values, consider whether the filter adds value
Using Checkbox type for color attributes	Shoppers see a plain text list ("Red", "Blue") instead of visual swatches	Switch the Filter Type to Color Swatch and map hex colors in the swatch configuration
Forgetting to publish after saving	Your filter exists in draft mode but does not appear on your storefront	After saving, go to the Filters page and click Publish -- look for the badge showing unpublished changes
Creating duplicate filters for the same attribute	Shoppers see two "Color" filters in the sidebar	Before creating a filter, check the existing filter list for duplicates. The system warns you about duplicate names, but you can still save them accidentally
Leaving all option ordering as default	Filter values appear in arbitrary order, making it hard for shoppers to find what they want	Use the drag handle in the Filter Options Table to reorder values by popularity or logical grouping (e.g., S, M, L, XL for sizes)
Not testing on mobile	The filter may look fine on desktop but overflow or be hard to tap on mobile devices	After publishing, open your store on a mobile device and check the filter drawer. Ensure all options are easy to tap

Tips for Effective Filters

• Keep filter names short and clear -- "Color" is better than "Product Color Options"
• Disable low-value options -- If a filter value applies to only one or two products, consider hiding it
• Order by popularity -- Put the most commonly used options at the top
• Use the right filter type -- Color attributes work best as swatches, not checkboxes
• Preview on mobile -- Check the Mobile Drawer zone to ensure filters are usable on small screens

Need Help?

If you are unsure which filter types or source fields to use for your store, contact us at support@filteriq.app for personalized recommendations.