Color families with swatches + preselected filters (Brand & Model) on collection and search pages

Shopify Apps
,
1

We’re trying to make our product filters more user-friendly and need help with two things:

:one: Color filters
In our store, we use fantasy color names like Obsidian, Ruby, or Ocean, but we want to group them under standard color families such as Black, Red, or Blue.
With the Shopify Search & Discovery app, this technically works if we add a metafield for each product (for example, base_color_family = Black).
However, Shopify only displays the text label — there’s no option to show color swatches (colored dots or images) in the filter.
Our goal is to have proper color swatches, either using a hex code or a color image, instead of text-only color names.

:two: Preselected filters (Brand & Model)
We sell many variants of the same product — for example, phone cases for different devices.
Ideally, when a customer browses a collection page or searches for something like iPhone 16, the filters Brand = Apple and Model = iPhone 16 should be automatically preselected.
That way, customers only see the relevant variants for that model, rather than dozens of duplicates (e.g., Product A for iPhone 14, Product A for iPhone 15, Product A for iPhone 16, etc.).

We’re currently testing this with Shopify Search & Discovery, but we’re open to other apps or custom solutions if that’s required.

Has anyone found a way to:

  • Display color swatches (instead of text) for grouped color families, and

  • Automatically preselect certain filters like brand/model on collection or search pages?

2

Hey there,

You’re right — Shopify’s Search & Discovery app doesn’t natively support color swatches for metafields. If you want real color dots or images instead of text, you’ll need to either:

  • Map your color names (like Obsidian → Black) and use a small Liquid + CSS snippet to render swatches, or

  • Use an app like Swatch King or Boost AI Search & Discovery, which can display color swatches and custom filters.

For the preselected filters (like Brand and Model), Shopify doesn’t handle that automatically either — but you can do it using pre-filtered URLs or a filter app that supports smart rules.

I can share the exact steps and code I used for the swatch setup so it’s easier to follow — would you like me to send that?

3

Hey @Hulle24,

You are right that Due to the limitations in the Search and Discovery app regarding the visual filters for metafields only text labels.

Here are the Possible Solutions that you can choose from.

You can choose any of the above method.
Thanks