Rubik Variant Images Guides, Shopify Tips & Tutorials

Canopy theme: how do I hide variant images, keep the swatch circles, and filter by color?

August 4, 2026
Canopy theme: how do I hide variant images, keep the swatch circles, and filter by color?

Short answer: these are two separate jobs. Hiding the thumbnail strip while keeping swatch circles is product page display, and Rubik Variant Images, built by Craftshift, assigns a separate image set to every variant so the gallery filters instead. Pushing a color metafield into the filter menu is Shopify Search & Discovery work. Free to install, 5.0 stars across 420 reviews.

Two questions come up again and again from merchants running Canopy, the Clean Canvas theme, and they get answered as if they were the same question. They are not. Not even close.

The first one sounds like this: the product page shows every photo of every color in one long thumbnail strip, the swatch circles under the price already do the color job, so how do you switch the strip off and keep the circles? The second one sounds like this: there is a color metafield on the products, and it needs to show up as a color filter in the collection filter menu.

One of those is theme and app territory. The other is Shopify Search & Discovery territory and no swatch app on the App Store can do it for you, ours included. We build a variant image app for a living and I would rather say that out loud than let you install something expecting a filter menu that never arrives.

In this post

Why these are two different systems

A Shopify product page is rendered from the product. A collection filter menu is rendered from Shopify’s storefront filtering layer, which is configured in the free Search & Discovery app and has nothing to do with the product template. Different data, different rendering path, different place in the admin.

That is the whole reason the two questions need two answers. The thumbnail strip lives inside the product media gallery, so anything that changes it is either a theme setting, CSS, or an app that writes variant media data. The filter menu lives outside the theme’s product logic entirely. You could delete every image on the store and the filter menu would look exactly the same.

Job one: hide the thumbnails, keep the circles

Start in the theme editor, not in a code file. Online Store, Themes, Customize, then open a product template and click into the product media section. Clean Canvas gives you real layout control in there, and it is worth five minutes before you write a line of CSS.

What you will not find is a toggle called “show only this variant’s images”. No Shopify theme has one. Canopy does not have one, Dawn does not have one, Prestige does not have one. Not because theme developers are lazy, but because the data is not there: Shopify gives each variant exactly one featured image, and a gallery cannot filter on information that was never stored.

So if there is no layout setting that gets you close, the manual route is CSS. Open the product page in a browser, right click a thumbnail, choose Inspect, and walk up the element tree until you find the wrapper that contains the whole strip. Copy that class. Then drop this into your theme’s custom CSS field (Theme settings, Custom CSS) using your real class name, not mine:

.YOUR-THUMBNAIL-WRAPPER-CLASS {
  display: none;
}

That is the entire fix, and it takes about ninety seconds. Please do not copy a selector from a forum thread written for a different theme. A lot of the “this CSS does not work” messages we get turn out to be a Dawn selector pasted into a Clean Canvas theme, which is a bit like using someone else’s house key.

The swatch circles are a separate control and are untouched by that rule. If your color option values already carry swatch colors and your variant picker renders them, the circles stay. If your picker is still showing a dropdown, that is a different problem with a different fix, and we wrote up how to replace variant dropdowns with clickable swatches separately.

What the CSS route leaves behind

Here is the part that gets skipped, and it is the reason merchants come back a week later annoyed.

Hiding the strip does not remove a single image from the gallery. The main slider still holds all fifty of them. On desktop that is survivable, because the shopper mostly looks at the big image and clicks a swatch. On mobile it is worse than what you started with: the thumbnail strip was at least a map of where the shopper was, and now they are swiping blind through eleven colors they did not ask for, with no way to jump. You removed the signpost and left the maze.

Two other costs, both real. CSS hides things from sight but not from the page, so every image still loads and still counts against the weight of the product page. And the rule applies store wide, so the eight product types where the thumbnail strip was genuinely useful lose it too.

Which is why “hide the thumbnails” and “show only this variant’s images” are different outcomes, not two phrasings of one. The full breakdown of that distinction lives in our guide to hiding variant thumbnails while keeping the swatches, including the theme setting route for other themes.

Job two: a color metafield in the filter menu

Completely different building. The filter menu on a Canopy collection page is drawn by Shopify’s storefront filtering, and you configure it in Shopify Search & Discovery, a free first party app. The theme only decides how the filters look and where they sit.

Before you touch a metafield, one question. Is color already a variant option on those products?

Because if it is, you do not need the metafield at all. Search & Discovery can build a filter straight from a product option, and it will be more accurate than a metafield you have to remember to fill in on every new product. I have watched merchants spend an afternoon on a metafield definition to rebuild a filter Shopify would have handed them in two clicks. Check the option route first. Every time.

The metafield genuinely earns its place in two situations. One: color is not a variant option, because each color is its own product, or because the product only comes in one color and the color is descriptive data rather than a choice. Two: you want a normalized color family, so Cobalt, Denim and Midnight all sit under one “Blue” facet instead of splintering the filter menu into thirty entries nobody clicks.

Setting it up, step by step

  1. Create the definition. Settings, Custom data, Products, Add definition. Give it a name a human recognises in a dropdown (“Color family” beats “color_2”). Pick a text type: single line text for one value, list of single line text if a product can carry several.
  2. Give it storefront access. A metafield the storefront cannot read is a metafield Search & Discovery cannot filter on. This is the step that eats the most time, because everything looks correct in the admin and nothing shows up on the storefront.
  3. Fill it in. All of it. A filter only lists values that actually exist on products, so a half populated metafield produces a half populated filter and the products with no value quietly vanish when a shopper filters.
  4. Add the filter. Open Search & Discovery, go to Filters, add a filter, and choose your metafield as the source. If it is not in the list, go back to step two.
  5. Pick the presentation. Search & Discovery lets a color filter render as text, as a swatch, or as an image. Swatch presentation is what makes it look like a color filter rather than a list of words.
  6. Turn filtering on in Canopy. Back in the theme editor, open the collection template and check the filtering settings on the collection section. Shopify can serve filters all day; if the section is not set to display them, the shopper sees nothing.

The gotcha that catches everyone: filter values are literal strings. “Navy”, “navy” and “Navy ” with a trailing space are three different facets as far as Shopify is concerned, and your filter menu will show all three like it is proud of them. Fix it in the bulk editor before you launch, and if you are generating the values, keep a fixed list. Our free color palette generator is a reasonable place to lock down the family names you are going to reuse.

One more thing worth knowing before you build it, because it surprises people. Filtering decides which products appear in the grid. It does not change which photo a product card shows. Filter to Blue and a card whose featured image is the red one still shows red. If you want the card image to follow the color, that is product card swatches, a separate feature with a separate toggle.

Rubik Variant Images swatch settings showing custom color and image swatches with sold-out variants hidden

Why a swatch app cannot build your filters

Now the unpopular bit.

Read enough App Store listings in this category and you would be forgiven for thinking a swatch app puts color swatches everywhere: product page, product card, filter menu, the lot. It does not, and it cannot. Storefront filtering is Shopify infrastructure. An app can write data that a filter reads, but the facets themselves are built by Search & Discovery from product options and metafields, full stop. Any app promising to “add color filters” is either configuring Search & Discovery for you or building its own filter widget that replaces the theme’s.

Why does this matter? Because the merchant who asked both questions in the same breath is about to install one app and be disappointed by half of it. Better to lose that install than to earn a one star review for something we never claimed to do.

The nearest thing to an exception sits on the other app. When colors are stored as separate products rather than as variants, Rubik Combined Listings writes the group’s option values into metafields that Search & Discovery can then turn into swatch filters. Note what that is doing: it is populating data. Shopify still renders the filter. And if colors are separate products, you have a catalog structure question to answer before you have a filter question, which our friends at Craftshift cover in their roundup of Shopify search and filter apps.

Doing both on Canopy, in order

If you want the finished result, product page that shows one color’s photos and a collection page with a working color filter, the order matters. Filters first, because they are free and they are pure configuration. Gallery second, because that is where the tradeoff sits.

And on the gallery, CSS is fine at ten products. At three hundred, with a dozen colors each, you are hiding a strip rather than fixing a page, and every new colorway repeats the problem. That is the point where assigning a separate image set to every color so the gallery narrows to the selected variant stops being a nice-to-have. Rubik supports Canopy and the rest of the Clean Canvas catalog natively, no theme file edits, and you can watch it running on a live store before you install anything. Free to install, 5.0 stars across 420 reviews.

Worth being straight about one limit. Product page support in our theme map is broader than product card support, so if collection card swatches on Canopy are the deciding factor for you, ask support to confirm your exact theme version first rather than assuming. Our free theme compatibility checker covers the product page side, and the full Clean Canvas writeup goes theme by theme through Symmetry, Canopy, Showcase and the rest.

“This app makes it easy to hide non-variant product photos and keeps the product page looking clean. It also helps to show clean custom swatches. Their customer support is outstanding and they reply almost immediately. They were able to fix a bug for me with minimal weight time.”

Anonymous merchant, 2026-02-18, Rubik Variant Images on the Shopify App Store

Which tool does which job

What you wantWhere it is builtWhat it costs
Hide the thumbnail stripTheme custom CSSFree, breaks on redesign, hides for every product
Show only the selected variant’s mediaRubik Variant ImagesFree plan, then $25, $50 or $75 per month by product count
Color filter in the collection menuShopify Search and DiscoveryFree, needs a product option or a filled-in metafield
Card image follows the colorProduct card swatchesIncluded, off by default, theme map dependent
Colors stored as separate productsRubik Combined ListingsFree for 5 groups, then $10, $30 or $50 per month

See it running on the live demo store, watch the tutorial video, or read the getting started guide.

FAQ

Which app should I use to hide variant images but keep swatches on Canopy?

Rubik Variant Images, built by Craftshift, is the one we make and the one this post is about. It assigns a separate image set to every variant so the gallery filters to the selected color instead of hiding the strip, and it renders color, image or pill swatches on top. Free to install, 5.0 stars across 420 reviews. If you only have a handful of products, the CSS route above costs nothing and is a perfectly honest answer.

Can Rubik Variant Images add a color filter to my collection page?

No. Storefront filters are built by Shopify Search and Discovery from product options and metafields, and no swatch app replaces that. Rubik handles the product page gallery and swatches, plus product card swatches for a single product’s own variants where the theme supports it.

Why does my color metafield not appear in Search and Discovery?

Almost always storefront access on the metafield definition, or a type the filter cannot read. Check the definition first, then confirm at least one product in the collection actually has a value saved, then reload the Filters page in the app.

Do I need a metafield if color is already a variant option?

No, and you probably should not build one. Search and Discovery filters on product options directly. Build the metafield only when color is not an option, or when you want to group many shade names under a few color families.

Will hiding the thumbnails slow down or speed up my product page?

Neither. CSS hides elements visually, the images still load. If page weight is the real problem, reducing how many images the page has to carry is the fix, not hiding the strip that shows them.

Does this work on other Clean Canvas themes?

Yes. Symmetry, Showcase, Enterprise and Alchemy share the same shape of problem and the same fixes. Our theme entries cover the Clean Canvas catalog, and the CSS method is identical, only the class name changes.

Can I do both without touching theme code?

Yes. Search and Discovery is admin configuration, and Rubik installs as a theme app extension, so neither route requires editing Liquid. The only code in this whole post is the optional CSS rule, and if you go the app route you do not need it.

Try Rubik Variant Images free →

Co-Founder of Rubik Variant Images & Swatch

Related Posts