Skip to main content

Collection filter widget

Written by Shashank Agrawal

What are collection filter campaigns?

Collection Filter Campaigns allow you to create custom, interactive filters on your collection pages to help users find the right products faster. While most collection pages already have filters, those filters are usually:

  • Fixed in one position on the page

  • Limited in design and styling

  • Hard to customise based on business or user needs

Cooee's Collection Filter Campaign removes these limitations and gives you full control over how filters look, where they appear, and which filters are shown to users.

How Collection Filter Campaigns Work

Collection Filter Campaigns work on top of your existing collection filters. Instead of relying only on default filters, you can create filter components using Cooee and place them anywhere on the collection page. These filters interact with the collection and update the product list based on user selection. This means:

  • Users still see relevant products

  • But with a cleaner, more guided filter experience

Key Features and Capabilities

1. Flexible filter placement

By default, collection filters usually appear in a sidebar or at the top of the page and cannot be moved. With Cooee Collection Filter Campaigns, you can:

  • Place filters at the top of the collection page

  • Insert them between sections

  • Add them inside banners or promotional blocks

  • Position them wherever they make the most sense for your layout

This flexibility helps you surface filters exactly where users are most likely to interact with them.

2. Show only the most relevant filters

Showing too many filters at once can confuse users and slow down decision-making. Cooee allows you to:

  • Select specific filters to display

  • Prioritise the most popular or high-impact filters

  • Hide less-used filters from the main view

This creates a focused filtering experience that helps users find what they want faster without overwhelming them.

3. Fully customisable filter design

Collection Filter Campaigns give you complete control over how filters look and feel. You can design filters as:

  • Images with labels (e.g., product type or category)

  • Image-only filters for a visual experience

  • Text-only buttons

  • Buttons with any custom styling (colour, shape, size, font)

This allows filters to match your brand design and feel like a natural part of the page instead of a generic UI element.

Why Use Collection Filter Campaigns?

Collection Filter Campaigns help improve both user experience and business outcomes.

Benefits include:

  • Faster product discovery

  • Better engagement on collection pages

  • Cleaner and more organised UI

  • Higher chances of users finding and buying the right product

By guiding users with smart, well-placed filters, you reduce friction and make shopping easier.

How to Set Up a Collection Filter Campaign

Follow the steps below to create and configure a Collection Filter Campaign in Cooee.

  1. Go to the Cooee Dashboard

  2. Navigate to Campaigns

  3. Click on New Campaign

This will open a dialogue titled "Choose what you want to run?"

Step 2: Choose Campaign Type

  1. Select Collection Filter

    • By default, this option is already enabled

    • Only one delivery option is selected automatically in the How to deliver section

  2. Click Create Campaign

After clicking Create Campaign, you will be redirected to the Campaign Setup Page.

Step 3: Understand the Campaign Setup Page

On the setup page, you will see three main sections:

  1. Audience & Filters

  2. Content & Design

  3. Other Settings

Each section controls a different part of the campaign behaviour.

Audience & Filters

The Audience & Filters section lets you decide who can see this campaign. You can:

  • Target specific users

  • Exclude certain audiences

  • Control when and where the campaign appears

To configure this correctly, refer to the Audience Filter documentation.

Content & Design

This is the most important section, where you configure how your collection filters look and work.

1. Content Type

Content Type defines how the campaign is delivered to users. You can choose from:

Normal Campaign — All selected users see the same filter design.

A/B Test Campaign

  • Create two different filter designs

  • Control what percentage of users see each design

  • Useful for comparing layouts, styles, or positioning

Split Exclusion Testing

  • A percentage of users will see the filter campaign

  • The remaining users will not see it

  • Helps you measure whether filters actually improve performance

2. Collection Filter Configuration

This section controls the actual filter setup.

Title & Subtitle

  • Add a title and subtitle for your filter block

  • These will be visible in the campaign design

  • Useful for context like "Shop by Category" or "Find Your Perfect Match"

Filter Type — Choose how your filters should appear:

  • Image with label

  • Buttons only

This defines the overall design style of the filter.

Refresh Page — This option depends on how your Shopify theme applies filters.

  • Some themes apply filters without refreshing the page — keep this option disabled

  • Some themes require a page refresh to apply filters — enable this option so Cooee refreshes the page after filter selection

This ensures filters always work correctly across different themes.

Filters — This is where you define the actual filters shown to users.

  1. Click Add Filter

  2. A dialog called Add Filter will open

  3. Configure each filter using the fields below:

    1. Label — The text shown to users on the filter (e.g., Red, Summer Wear)

    2. Image (Optional) — The image shown on the filter. Useful for visual filters like categories or styles

    3. Key — This is the most important part of the filter. It defines which collection filter is applied

    4. Value — It defines what the filter value should be

How to find the filter key & value:

  1. Open your collection page

  2. Apply the filter manually (the filter that you want to add in the campaign)

  3. Look at the URL after the ? (question mark)

Example:

?color=red&size=m

  • color and size → filter keys

  • red and m → filter values

Copy the key and value into the respective fields in Cooee. You can define multiple filters, each with its own key and value.

3. Placement

The "Where do you want to place this?" option allows you to control where the filter campaign appears on the collection page. You can place it:

  • At the top of the page

  • Between sections

  • Near banners or product grids

This gives you full control over visibility and user interaction. Check the Placement documentation for more reference.

That's it — you are ready to get the campaign live.

Did this answer your question?