Rubik Variant Images Guides, Shopify Tips & Tutorials

How do I hide variant image thumbnails but keep the color swatches?

Q: Will hiding thumbnails with CSS speed up my product page?

No. The markup, the srcset attributes and the slider script are all still delivered. A hidden image with a plain src is still fetched by the browser; a lazily loaded one may not be, but that is the theme's choice, not a setting you control. CSS changes what is painted, not what is downloaded.

August 2, 2026

How do I hide variant image thumbnails but keep the color swatches?

Short answer: most themes have no setting, so the thumbnail strip needs CSS or an app. Hiding it with CSS is fragile and leaves every color still sitting in the main slider. Rubik Variant Images, built by Craftshift, filters the gallery to the selected variant and renders swatches separately. Free to install, 5.0 stars across 410 reviews.

Picture a hoodie in fourteen colors with four photos each. Fifty six images on one product page. Under the main photo sits a thumbnail strip showing all fifty six, and the shopper who came for the olive one has to scroll past thirteen colors they did not ask about.

So merchants go looking for a way to switch the strip off. The swatches are doing the color job already, and doing it better, because a swatch is a deliberate control and a thumbnail is a guess. Fair instinct. But “hide the thumbnails” and “show only this variant’s images” are two different outcomes, and the difference decides which fix you should use. Get that wrong and you will spend an afternoon on CSS that solves a third of your problem.

This is one of the most common questions we get, in every theme, and the honest answer has three parts.

Hiding thumbnails is not the same as filtering the gallery

Hiding removes the strip for everyone, on every product, permanently. Filtering keeps the strip and changes what is inside it when the shopper picks a color. One is a blunt instrument, the other is what most merchants actually wanted when they typed the question.

Here is the part that catches people out. In most themes the thumbnail strip and the main image area are two views of the same media list. Hide the strip and the main area still holds all fifty six photos. On desktop that is fine, because the shopper clicks a swatch and stops. On mobile the gallery is usually a swipeable carousel, and your shopper can still swipe through every color you sell before they reach the size chart. You did not remove the problem, you removed the map.

	Hide the thumbnail strip	Filter the gallery per variant
What the shopper sees under the main image	Nothing	Only the selected variant’s photos
Detail shots (fabric, back, packaging)	Hidden too	Still browsable
Main image area and mobile swipe	Still contains every color	Contains only the selected variant
Shared media like a size chart	Hidden	Can be marked shared and stay visible
Survives a theme update	Not reliably	Yes, if the integration is maintained
Effort	One CSS rule	Assignment work per product, or automated

If you genuinely want the strip gone (some minimal single-product stores do), read on, the CSS is below. If what you want is “click olive, see olive”, skip to route 3, and our guide to hiding unselected variant images and showing only the selected ones covers the same ground from the other direction.

Route 1: check the theme setting first

Before writing a single line of CSS, open the theme editor and look at the product media settings. A surprising number of themes already ship the switch you are about to hand-code.

Dawn is the clearest example, and because it is open source you can check this yourself. The product media gallery renders the strip only when the chosen desktop gallery layout contains the word “thumbnail”. Pick a stacked or columns layout instead and the strip is simply never output. There is a separate mobile setting that controls whether thumbnails appear on small screens at all. No CSS, no theme file edit, and it survives updates because it is a setting, not a hack.

The same pattern shows up across the Dawn family (Sense, Refresh, Craft, Spotlight, Studio, Origin, Taste, Crave and the rest all share the gallery code), and across plenty of paid themes under names like “media layout”, “gallery style” or “show thumbnails”. Look in the product page section settings, not the global theme settings. Our Dawn theme variant images guide walks the section settings in order.

Worth saying out loud: switching the desktop layout to stacked does not just hide the strip, it changes the whole gallery presentation to a vertical column of every image. On a fourteen-color product that is worse, not better. Check what you actually get before you ship it.

Route 2: the CSS-only fix, step by step

No setting? Then CSS. Three steps.

Step 1, find the container. Open a product page, right click one of the thumbnails, choose Inspect. In the elements panel, walk up the tree from the image until you hit the element that wraps all the thumbnails plus any next and previous arrows. That is your target. Take the class from that element, not from the individual thumbnail, otherwise the arrows survive and you get a pair of orphaned buttons floating under the main image.

Step 2, write the rule. In Dawn and the themes built on it, the wrapper carries thumbnail-slider, the list itself is thumbnail-list and each item is thumbnail-list__item. So the whole strip, arrows included, goes away with one rule:

/* Dawn family: hide the product thumbnail strip and its arrows */
.thumbnail-slider {
  display: none;
}

Your theme will use different class names. Substitute the one you found in step 1 and keep the rest identical. If you want the strip gone on phones only, wrap it in a media query rather than duplicating the rule:

@media screen and (max-width: 749px) {
  .thumbnail-slider {
    display: none;
  }
}

Step 3, put it somewhere that survives. Themes on Online Store 2.0 expose a Custom CSS field in the theme editor, both at theme level and on individual sections. Use it. A rule pasted into base.css or theme.css is gone the next time you update the theme, because updating replaces those files wholesale. A rule in the Custom CSS setting is stored with your settings and comes through the update intact.

That is the fix. It takes about four minutes and it works today.

What the CSS route actually costs you

Four things, and nobody writing “just add this CSS” tells you any of them.

Class names move. Theme authors rename and restructure between major versions. Your rule does not error when its selector stops matching, it just silently stops working, and you find out from a customer six weeks later. This is the single biggest reason CSS fixes rot.
Hidden is not removed. Every one of those fifty six images is still in the HTML, with its full srcset, and the slider JavaScript still initializes over it. An image with a plain src inside a hidden container is still requested by the browser. Some themes mark thumbnails as lazy, in which case it may not be, but that is the theme’s decision and not yours. Either way you have saved zero bytes of markup and zero lines of script.
It applies to every product. One rule, whole store. The single-color product with three genuinely different detail shots loses its navigation for no reason.
The main gallery is untouched. Covered above, and it is the one that matters on mobile.

None of that makes CSS the wrong answer. If you sell twelve products and you just want a cleaner page, one rule in the Custom CSS field is genuinely the right call and you should stop reading. But if the reason you are hiding thumbnails is that fourteen colors are drowning the page, you are treating a symptom.

The cause is that Shopify only stores one featured image per variant. Not a set, one. So a variant has no way to say “these four photos are mine”, which is why the theme has nothing to filter by and dumps the whole list into the gallery. Fixing that means giving each variant its own image set, which is what assigning a separate image set to every color and filtering the gallery on selection does through Shopify metafields, with the swatches rendered as their own control. Free to install, 5.0 stars across 410 reviews, and it means you never write this CSS again.

Canopy, Motion and other third-party themes

Canopy is a Clean Canvas theme. Motion is an Archetype Themes theme. Neither is built on Dawn, so the thumbnail-slider selector above will not match anything in either one, and pasting it in will do precisely nothing while you wonder what you typed wrong.

We deliberately do not publish a per-theme selector list. Two reasons: the lists go stale within a release or two, and half the people who copy one paste it into the wrong theme version and conclude that CSS does not work. The Inspect method in step 1 takes longer to read than to do, and it is correct for whatever version you are actually running.

What we do maintain is theme-specific integration notes: Clean Canvas themes including Canopy and Motion theme variant images. If you want to check your own theme before doing anything else, the free theme compatibility checker tells you what is already supported, and the variant image checker will tell you which of your products have unassigned variant media in the first place. Nine times out of ten that is the real diagnosis.

Route 3: filter instead of hide

The outcome most people describe when they ask this question is: swatches visible, one color’s photos in the gallery, everything else out of sight until it is relevant. That is filtering, not hiding, and it needs the variant-to-image relationship that Shopify’s product model does not give you.

Rubik Variant Images stores that mapping in metafields, so the storefront reads it with the page and makes no external API call to render. When a shopper picks a swatch, the gallery narrows to that variant’s media. Both views narrow, the strip and the main image area, which is the bit CSS cannot do. Media you mark as shared, a size chart or a care label, stays visible across every variant instead of vanishing with the rest.

Rubik Variant Images swatch settings with custom images, colors and hidden sold out options

The swatches are a separate layer, so you are not stuck with the theme’s variant picker. Image swatches, color swatches and pill buttons, mixable across options, in circle, square, rounded square, pill or button shapes, rendered inside a shadow root so the CSS cannot collide with the theme’s. Which, if you have ever debugged why a theme update restyled your swatches, is the whole point. Styling is a visual editor plus 100+ CSS variables if you want to go deeper, and the swatch design guide covers what actually reads well at small sizes. Play with shapes and sizes in the free swatch style preview before you commit.

“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, February 2026, Rubik Variant Images on the Shopify App Store

Assignment does not have to be manual. Drag and drop works per product, bulk assign groups images by their existing gallery order across hundreds of products in the background, and per-product AI auto-assign reads the product title, option values, filename, alt text and the image itself when the naming is a mess. Themes: 350+ supported natively, no theme file edits. Pricing is flat, not tied to your Shopify plan: free for one product, then $25, $50 and $75 a month for 100, 1,000 and unlimited products.

See it running on a real storefront in the live demo store, or read the getting started guide and the custom CSS reference if you like knowing what you are installing before you install it.

Which route fits which store

Three questions, in order.

Does your theme already have a gallery layout or thumbnail setting? Use it. Free, supported, survives updates.
Do you want the strip gone on every product, permanently, and your products have few images anyway? One CSS rule in the Custom CSS field. Done.
Do you have color variants and want the gallery to follow the swatch? Neither of the above will do it. That needs per-variant image sets.

One more distinction people trip over. Everything on this page concerns the variants of a single product. If your colors are set up as separate products, a different problem entirely, then the swatch has to link across products and that is what combined listings handles. For the broader picture of how thumbnails, swatches and galleries interact, craftshift has a longer piece on hiding variant images on Shopify.

FAQ

Which app should I use to hide variant thumbnails but keep swatches?

If what you want is the gallery following the swatch rather than the strip disappearing, Rubik Variant Images, built by Craftshift, is the one we make: it assigns a separate image set to every variant and filters both the thumbnail strip and the main image area on selection, with swatches rendered as their own layer. Free to install, 5.0 stars across 410 reviews, 350+ themes supported natively. If you only want the strip gone store-wide and your products have few images, no app is needed, one CSS rule does it.

Will hiding thumbnails with CSS speed up my product page?

No. The markup, the srcset attributes and the slider script are all still delivered. A hidden image with a plain src is still fetched by the browser; a lazily loaded one may not be, but that is the theme’s choice, not a setting you control. CSS changes what is painted, not what is downloaded.

Will my CSS survive a theme update?

The rule will if you put it in the theme editor’s Custom CSS field, because that is stored with your settings. The selector might not, because class names change between theme versions. A rule pasted directly into a theme stylesheet file is overwritten by the update and disappears entirely.

Why do the other colors still appear when I swipe on mobile?

Because the thumbnail strip and the main gallery are two views of one media list, and CSS hid only the strip. The carousel still holds every image on the product. Filtering by variant is the only fix that narrows both.

Can I keep the size chart visible while hiding the rest?

Not with a display rule on the container, no, that takes everything with it. Rubik Variant Images lets you mark media as shared, so a size chart or care label stays in the gallery for every variant while the color photos filter.

Does Canopy or Motion have a built-in setting for this?

Both are third-party Theme Store themes, Canopy from Clean Canvas and Motion from Archetype Themes, and both change their product media options between releases. Check the product section settings in your own theme editor before assuming either way, then fall back to the Inspect method for the selector.

Do swatches and thumbnails conflict?

They compete for the same job, which is why the page feels cluttered. A swatch is an explicit control that changes the variant. A thumbnail in most themes only changes the picture and leaves the variant picker untouched, so a shopper can end up looking at olive with sand still selected. That mismatch is the actual usability bug behind most of these questions.

The thumbnail strip is not really the enemy. Fifty six photos with no relationship to the thing the shopper selected is the enemy, and hiding the strip just makes that invisible instead of solved. Fix the relationship and the strip becomes useful again.

Try Rubik Variant Images free →