Storefront filters with Search & Discovery Rubik Combined Listings Swatch
After you set up product groups in Rubik Combined Listings Swatch, shoppers see colorful swatches on product pages and product cards. With one extra setting, those same color, size, or material values can also appear as filters on your collection pages: shoppers click a color in the sidebar, and only matching products stay visible.
This page walks you through enabling that integration end to end.
What is Shopify Search & Discovery?
Search & Discovery is a free app made by Shopify. It powers the search bar and the filters that appear on collection pages. By default it gives you filters for price and availability. You can add more filters (like Color, Size, Material) by pointing it at the right metafields on your products.
Rubik Combined Listings creates exactly those metafields automatically once you flip a single toggle. After Search & Discovery is configured to use them, your storefront gets visual swatch filters with no theme code edits.
Prerequisites. You already have product groups set up in Rubik Combined Listings (a Color group, a Size group, etc.). If you haven't done that yet, start with the getting started guide.
Setup in four steps
1 Install Shopify's Search & Discovery app
If you don't already have it, install Shopify Search & Discovery from the Shopify App Store. It's free, made by Shopify, and takes a few seconds to install.
Once installed it appears in your Shopify admin under Sales channels → Online Store → Search & Discovery.
2 Enable filter compatibility in Rubik Combined Listings
Open Rubik Combined Listings in your Shopify admin and go to Settings. Scroll to the section called Storefront filter compatibility.
Toggle Enable Search & Discovery filter compatibility on, then click Save.
Rubik runs an initial sync in the background. For most stores this takes under a minute. For very large catalogs (10,000+ products) it can take several minutes. You can leave the page and come back; the toggle will show Active when the sync is done.
The initial sync creates a Shopify metafield definition per option name (Color, Size, etc.) and writes a metafield on every product that's part of a group. Future group changes update the affected products automatically. You don't need to re-run the sync.
3 Add the filters in Search & Discovery
Open Search & Discovery and go to Sales channels → Online Store → Search & Discovery → Filters in your Shopify admin.
Click Add filter. Shopify lists every metafield definition available for filtering. You'll see one entry per option name you used in Rubik (for example, "Color" and "Size").
Pick the option you want to expose, choose a presentation, and save:
- Swatch: shows a colored circle or image (best for Color)
- Text: shows the option value as plain text (good for Size, Material)
- Image: shows a larger image (good for patterns or finishes)
Repeat for each option you want as a filter. Most stores expose Color first because the swatch presentation looks great in the sidebar.
4 Check your collection pages
Open any collection page on your storefront. The new filters appear in the filter sidebar (or above the product grid, depending on your theme).
Click a color (or whichever filter you added). The product list narrows to only the products in your Rubik group that match that value.
That's it. Shoppers can now browse by Color, Size, or any other option you set up, with the same swatches they see on the product page.
How it works behind the scenes
When you turn on filter compatibility, Rubik:
- Creates one Shopify metafield definition per unique option name in your groups (e.g.
app.rubik_color,app.rubik_size). - Creates a shared metaobject entry per option value (one "Red" entry shared by all red products, one "XL" entry shared by all XL products).
- Writes a metafield on every product in a group, referencing the right metaobject entries.
Search & Discovery reads these metafields and renders a filter facet for each option, with the metaobject's color or image rendered as the swatch.
FAQ
Do I need to keep the toggle on after the initial sync?
Yes. Keeping it on means future group changes (new products added, swatches edited, groups deleted) automatically update the filter values. If you turn it off, existing filters keep working but new changes won't propagate.
What if I add a new option name later (e.g. Material)?
Just create a Rubik product group with that option name. The next save will automatically create the new metafield definition. Then go back to Search & Discovery and add it as a filter (step 3).
Can I show images instead of color swatches?
Yes. In Rubik you can attach an image to each swatch value (instead of a hex color). When you pick Swatch or Image presentation in Search & Discovery, your image is used automatically.
Why don't I see the new filter as an option in Search & Discovery?
Make sure the initial sync has completed (check the status in Rubik Settings under Storefront filter compatibility). The metafield definition is created at the start of the sync, so it should appear quickly. If it still doesn't show up after a few minutes, try refreshing the Search & Discovery page in your Shopify admin.
Will this work with my theme?
Yes. Search & Discovery filters are a Shopify-native feature and work with every Shopify theme that supports collection page filtering. That covers Dawn and almost every paid theme. No theme code changes are required.
Does this affect SEO?
Storefront filters use URL parameters, so each filtered view has its own shareable link. Shoppers can bookmark "all green boots in size 9" and return to that exact view. Search engines may also index popular filter combinations.
What if I have thousands of products?
The initial sync may take several minutes. It runs in the background, so you can close the Settings page and check back later. After the first sync, ongoing updates are incremental and fast.
Need help?
If you run into trouble, message us from inside the Rubik app and we'll take a look at your shop directly.