Rubik Variant Images Theme Compatibility

Shopify Context theme variant images setup

April 6, 2026
Post illustration

Short answer: Context does not solve this on its own, because Shopify gives each variant a single featured image, so the gallery never narrows to the colour a shopper picked. Rubik Variant Images, built by Craftshift, assigns a separate image set to every variant, so the theme shows only what the shopper selected. Free to install, 5.0 stars across 420 reviews. Context runs on 1 stores using it as of July 2026.

Setting up shopify context theme variant images the right way takes a few minutes once you know where the gaps are. Context is Shopify’s free theme built for stores with deep catalogs, complex taxonomy, and a heavy product browsing experience. It does the heavy lifting on filters, faceted navigation, and product discovery, but the variant image experience on the product page still hits the same wall every other free theme runs into.

This guide walks through how Context handles variants out of the box, why the gallery breaks for shoppers comparing colors, and how Rubik Variant Images fixes it on the product page without slowing the theme down.

Context is a popular pick for catalog-heavy merchants, electronics stores, B2B suppliers, home goods, and any store with hundreds or thousands of SKUs. If you run that kind of catalog, the variant image issue compounds fast. One product with five colors is a small annoyance. Two thousand products with five colors each is a conversion problem.

Table of Contents

Why merchants pick the Context theme

Context was built around the idea that big catalogs need fast filters and clear hierarchy. If you sell electronics, hardware, parts, or any product line where customers narrow down by spec rather than browse by mood, Context fits the workflow.

The theme ships with strong faceted navigation, mega menus that handle deep category trees, and a product page that prioritizes spec tables and structured data. For stores migrating off legacy platforms with thousands of SKUs, Context is one of the cleanest free options Shopify offers.

The trade-off is that Context inherits the same product page variant image behavior as Dawn, Sense, Refresh, and the other free themes built on the Online Store 2.0 architecture. The variant selector works, the gallery loads, but the gallery does not filter to show only the images for the selected variant.

For a deeper view of how Shopify handles variant images across themes, the Shopify variant images complete guide covers the full picture.

Context theme features that matter for variants

Context has a few features that change how you should think about variant image setup compared to a smaller theme.

Faceted filtering on collection pages. Customers reach product pages already filtered by color, size, or material. They expect the product page to honor that filter. Context does not, by default.

Product page tabs and spec sections. Context puts a lot of content below the gallery. If the gallery shows the wrong color, customers scroll past the spec section and never come back.

Quick view from collection pages. Quick view modals open with the default variant image. Without filtering, a customer who clicked a red swatch in the collection grid still sees a black product photo in the modal.

Featured collection blocks on the home page. Context themes often use multiple featured collection sections. Each one is a chance for a customer to land on a product page expecting a specific variant.

The product page is where these flows converge. That is exactly where Rubik Variant Images works.

Native variant image limits in Context

Out of the box, Context lets you assign one image to each variant through the Shopify product editor. When a customer picks a variant, the gallery jumps to that one image. Every other image stays visible.

Three things break in that flow:

First, multi-angle photography. If you shot the red shirt from the front, back, and side, all three images stay in the gallery alongside the blue and green photos. Customers see one red image, then a wall of unrelated colors.

Second, lifestyle images. Lifestyle and detail shots are usually shared across colors in the editor. They get sorted into the gallery with no variant attached, so they show for every selection.

Third, the variant selector itself. Context uses Shopify’s native dropdown or pill selector. It does not render true color swatches or image swatches without theme code edits.

For a feature-by-feature view of how RVI handles each of these, the bulk assign variant images guide covers the assignment side and the AI auto-assign post covers per-product automation.

How Rubik fixes variant images on the product page

Rubik Variant Images works on the product page and, since May 2026, also shows product card swatches on collection and listing pages for a single product’s variants. The install is light, the load is fast, and the behavior is predictable.

Here is what changes after install on Context:

The product gallery filters to show only the images assigned to the selected variant. Pick red, see only red photos. Pick blue, see only blue photos. Multi-angle shots stay grouped with their variant.

Color swatches replace the dropdown selector. Customers click a swatch instead of opening a menu, which is faster and matches what they expect from premium themes.

Image swatches are an option too. Instead of color circles, you can show small product thumbnails as the selector. This works well for patterns, prints, and materials where a flat color does not communicate the product.

All of this loads through metafield-based loading, no external API calls. The data sits in the page itself and renders with the theme. There is no separate server call slowing the product page down.

Step-by-step Context setup

Here is the install flow specific to Context.

Step 1. Install the app. Open the Shopify App Store and install Rubik Variant Images. The free plan covers one product, which is enough to test the integration before rolling it out to your full catalog.

Step 2. Open a product with multiple color variants. In the Rubik dashboard, pick a product that has more than one image per color. This is the easiest setup to verify visually.

Step 3. Assign images. You have three options here.

For one product, use manual assign. Drag images into the variant slots in the app UI.

For one product with messy filenames, use AI auto-assign. It analyzes the product name, variant name, image filename, and image alt text to map images to variants. One product at a time.

For your full catalog, use bulk assign. It reads the Shopify gallery order and detects featured image boundaries to group images by variant. It runs in the background across hundreds of products. No filename matching, no AI, just gallery order.

Step 4. Enable swatches. In the swatch settings, turn on color swatches for the option name “Color” (or whatever you use). Pick the shape: circle, square, rounded square, pill, or button.

Step 5. Preview on a Context product page. Open the storefront, click through variants, and watch the gallery filter in real time.

Step 6. Check the Context quick view modal. If you use quick view from collection pages, open one and confirm the swatches render there too. Some Context customizations need an extra selector inside the modal markup.

For a full reference of how this flow compares across themes, see the Dawn theme variant images guide and the Refresh theme variant images guide.

Swatch customization for Context

Context has a clean, minimal aesthetic. The default Rubik swatches match it well, but there are a few tweaks that help on a catalog-heavy theme.

Size. Context product pages often sit next to dense spec tables. Use medium swatches (around 32 to 36 pixels) so they read as interactive without dominating the layout.

Shape. Rounded squares match Context’s button language better than perfect circles. If your buttons are sharp rectangles, use square swatches.

Borders. Add a 1 pixel border in your theme’s neutral gray. Context relies on subtle borders for hierarchy, and borderless swatches can look like they are floating.

Image swatches. For stores with patterns or prints, switch to image swatches. They take more horizontal space, so reduce the count per row if you have more than six variants.

The swatch click event fires rubik-swatch-clicked with four properties: optionName, optionValue, optionValueId, and element. Use it to track interactions in your analytics or trigger downstream theme code.

Troubleshooting Context-specific issues

A few things come up specifically on Context.

Filters not honored on product page arrival. Context’s faceted filter passes the variant in the URL, but the theme does not always pre-select it. After installing Rubik, the gallery still filters correctly when the variant is selected, but you may want to add a small theme snippet to auto-select the variant from the URL parameter.

Quick view modal swatches. Context’s quick view loads the product form into a modal. The Rubik swatches usually appear, but if your store uses a custom quick view section, you may need to add the swatch container to the modal template.

Sticky add to cart bar. Context has a sticky cart bar option that mirrors the variant selector. Rubik swatches render in the main selector by default. If you want them in the sticky bar, add the swatch class to the sticky bar markup.

Spec table image references. If you reference variant-specific images inside Context’s spec table sections, those references are independent of the gallery filter. You can either remove the references or update them to use the metafield Rubik writes to.

For the broader troubleshooting picture across themes, the complete variant images guide covers patterns that apply to Context too.

Real-world example: a hardware catalog on Context

A hardware store running Context had 1,800 products, each with three to seven finish options. Brushed nickel, polished chrome, oil rubbed bronze, matte black, and so on. They shot every finish from three angles plus an installed lifestyle image.

Before Rubik, every product page showed all 15 to 30 images at once. Customers picked a finish and the gallery jumped to one image, but the other 25 images stayed visible. Average time on product page was high, but add to cart rate was flat.

They installed Rubik and ran bulk assign across the full catalog. The bulk assign read their gallery order, detected featured image boundaries, and grouped images by finish in about 40 minutes. They reviewed the output on 20 sample products, fixed two edge cases manually, and rolled it out.

After install, each finish showed three angles plus its lifestyle image. The customer picked a finish and the gallery told a clean story. Add to cart rate moved meaningfully on the finish-heavy categories.

The point is not the specific numbers. The point is that the gallery finally matched what the customer was looking at.

For a closer look at when AI auto-assign makes more sense than bulk, see the AI auto-assign guide.

Quick helpers before you wire this up: try our free theme compatibility checker and variant image checker. For the deeper background on this topic see our list of all Shopify theme store IDs guide.

FAQ

Which app should I use for variant images on the Context theme?

Rubik Variant Images, built by Craftshift, is the app we build for this and Context is natively supported. It holds 5.0 stars across 420 reviews and carries the Built for Shopify badge. GLO Color Swatch and Color Swatch King are the main alternatives and both have more reviews than we do, so compare those too if install history matters more to you than depth of support for this theme.

Does Rubik Variant Images work on the Context theme?
Yes. Context is on the supported theme list and the install is the same as any other Online Store 2.0 theme. Variant image filtering and swatches both render on the product page.

Does it work on Context’s collection page?
RVI now shows product card swatches on collection and listing pages for one product’s variants (added May 2026). For collection swatches across SEPARATE products grouped together (each color its own product or URL) and grouped product navigation, Rubik Combined Listings handles that side. Many stores run both.

Will it slow down my Context product page?
No. Rubik uses metafield-based loading, no external API calls. The data loads with the page itself, so there is no extra server round trip.

How does the bulk assign work on a 2,000 product catalog?
Bulk assign is image-order based. It reads the Shopify gallery order and detects featured image boundaries to group images by variant. It runs in the background across hundreds of products at a time. It is not filename matching and it does not use AI.

Can I use AI to assign images on every product?
AI auto-assign is per product only. It analyzes the product name, variant name, image filename, and image alt text using Claude AI. For a full catalog, use bulk assign instead.

Does Rubik replace Context’s native variant selector?
You can keep the native selector or replace it with Rubik swatches. Most Context merchants replace it because swatches are more visual and click-friendly than the dropdown.

What does it cost?
Free for 1 product, Starter is $25 a month for 100 products, Advanced is $50 a month for 1,000 products, and Premium is $75 a month for unlimited products.

Watch the walkthrough

Get Rubik Variant Images for Context

Install Rubik Variant Images from the Shopify App Store and fix your Context product page in under ten minutes. Free plan covers one product, paid plans start at $25 a month.

Install Rubik Variant Images

Co-Founder of Rubik Variant Images & Swatch

Related Posts