Variant images on GemPages product pages

Page builder interface with variant swatches

GemPages is one of the most popular page builders on Shopify. Merchants use it to build custom product pages with drag-and-drop layouts, custom sections, and unique designs that go beyond what their theme allows.

But GemPages replaces your theme’s default product template. It generates its own DOM structure. The product gallery, variant selectors, and add-to-cart button all live in GemPages-specific containers instead of standard Shopify theme elements.

This breaks most variant image apps. They look for your theme’s gallery element, can’t find it, and silently fail. No error message. No warning. The swatches just don’t appear, or they show up but don’t filter the gallery.

Rubik Variant Images has a dedicated GemPages detection module. It recognizes GemPages product pages automatically and adapts its behavior to work with the GemPages DOM. No code changes. No manual configuration.

Why variant image apps break on GemPages

Standard Shopify themes follow a predictable structure. The product gallery lives inside a specific section container. Variant selectors are rendered by Shopify’s built-in option_selection.js or theme-specific JavaScript. Apps know where to look.

GemPages throws that out. It builds product pages from scratch using its own component system. The gallery is a GemPages image element. The variant picker is a GemPages form element. They have different class names, different data attributes, and different JavaScript event handlers than your theme uses.

When a variant image app loads on a GemPages product page, it tries to find the theme’s gallery. That element does not exist. The app either:

Fails silently (no swatches, no filtering, no error)
Renders swatches but can’t connect them to the GemPages gallery
Injects its own gallery that overlaps with the GemPages gallery
Breaks the GemPages variant selector entirely

The result: merchants install a variant image app, set everything up, and wonder why nothing works on their product pages. They contact support, get told to “switch to a standard theme,” and end up stuck.

How Rubik handles GemPages

Rubik uses 8 different detection methods to identify how a product page is built. One of those methods specifically checks for GemPages. When Rubik detects a GemPages product page, it activates its page builder module and does three things differently:

1. Gallery detection. Instead of looking for theme-specific gallery selectors, Rubik identifies the GemPages image gallery component. It hooks into the GemPages gallery’s rendering cycle so image filtering happens at the right moment, not before the gallery loads and not after a visible delay.

2. Variant selector binding. Rubik listens for variant changes from the GemPages form component rather than the theme’s variant picker. When a customer selects a different color or option, Rubik receives the event and filters the gallery accordingly.

3. No conflict with GemPages JavaScript. Because Rubik renders its swatches inside Shadow DOM, there is zero CSS conflict between Rubik’s swatch styles and GemPages’ styling system. GemPages can’t accidentally override Rubik’s swatch appearance, and Rubik can’t break GemPages layouts.

All of this happens automatically. You don’t need to select “GemPages mode” in the settings. Rubik figures it out on page load.

Setup: GemPages + Rubik in 5 minutes

Getting Rubik working on GemPages product pages takes five steps. No code. No GemPages editor changes.

Install Rubik Variant Images from the Shopify App Store. The free plan lets you test on 1 product before committing.
Enable the app embed. Go to your Shopify theme editor (Online Store > Themes > Customize). Under App embeds, toggle on Rubik Variant Images. Save. This loads Rubik’s script on your storefront.
Open a product in Rubik. From the Rubik app dashboard, click on any product that uses a GemPages product template.
Assign images to variants. Select a variant (for example, “Blue”) and click the images that belong to it. Pick 5-6 images: front, back, detail, scale, lifestyle. Repeat for each variant.
Save and preview. Visit your GemPages product page. Select a color. The gallery filters instantly, showing only the images assigned to that variant.

That’s it. You don’t need to edit anything inside the GemPages editor. You don’t need to add custom HTML or liquid code. Rubik’s app embed handles everything from the theme layer.

Assigning images to variants

You have three ways to assign images to variants in Rubik. All three work with GemPages products.

Manual assign. Open a product, click a variant, click the images that belong to it. Best for individual products or when you need precise control over which images go where.

AI auto-assign. Click the AI button on any product. Rubik’s AI analyzes each image using 4 data points: product name, variant name, image filename, and alt text. It matches images to the correct variants automatically. Review the results and save. Takes under a minute per product. This runs per product, not in bulk.

Bulk assign. For products where images are arranged sequentially by variant in the Shopify gallery, bulk assign processes hundreds of products in the background. It detects where each variant’s images start and end based on the image order and Shopify-assigned featured image for each variant. No AI credits used. No filename matching involved.

For most GemPages stores, AI auto-assign is the fastest path. Products built with GemPages tend to have well-organized image sets with descriptive filenames, which gives the AI plenty to work with.

Swatches on GemPages product pages

Rubik replaces the default variant dropdown (or GemPages’ variant buttons) with visual swatches. You get three swatch types to mix on the same product:

Color circles for color options (filled with the actual color or a swatch image)
Image thumbnails that show a mini preview of each variant’s product photo
Pill buttons for text-based options like Size, Material, or Style

You can customize swatch size, shape, spacing, border, and hover effects from Rubik’s visual settings editor. If you want faster customization, type a plain-English description like “make swatches 40px round with a thin black border” into the AI Visual Settings Assistant, and it generates the CSS for you.

Because Rubik uses Shadow DOM, none of your GemPages custom CSS affects the swatches, and the swatch CSS doesn’t leak into your GemPages layout. Clean separation.

What about GemPages’ own swatch element?

GemPages has a built-in swatch element in its editor. It lets you add color swatches to product pages. But it only handles the variant selection UI. It does not filter the product gallery based on which variant is selected.

With GemPages swatches alone, a customer selects “Red” and the variant changes, but the gallery still shows all 30 images from all colors. The customer scrolls past 25 irrelevant photos to find the 5 red ones.

Rubik handles both: variant selection (swatches) and gallery filtering (showing only the images assigned to the selected variant). You can use Rubik’s swatches instead of GemPages’ swatch element, or keep GemPages swatches for selection and let Rubik handle the gallery filtering. Both setups work.

Common images on GemPages

Some images should stay visible no matter which variant is selected. Size charts, care instructions, packaging shots, lifestyle images that apply to all colors. In Rubik, mark these as common images. They remain in the gallery while variant-specific images swap in and out.

This works the same on GemPages as it does on standard themes. Common images are product-level, not template-level.

Other supported page builders

GemPages is one of 7 page builders that Rubik supports with dedicated detection modules. The full list:

GemPages
PageFly
EComposer
Instant Page Builder
Beae
Foxify
Replo

Each builder gets its own detection logic. If you switch from GemPages to EComposer tomorrow, Rubik adapts automatically. No reconfiguration needed.

For stores using standard Shopify themes (Dawn, Horizon, Impact, Impulse, Prestige, and 350+ others), Rubik’s theme detection handles everything without the page builder module. Learn more about how to assign multiple images per variant on Shopify.

Watch it in action

See how variant image filtering works on a Shopify product page:

Frequently asked questions

Does Rubik work with GemPages product pages?

Yes. Rubik has a dedicated GemPages detection module that recognizes GemPages product templates and adapts its gallery filtering and swatch rendering automatically. No manual configuration required.

Do I need to edit my GemPages template to use Rubik?

No. Rubik loads through the Shopify theme app embed, which works at the theme level. You don’t need to add any custom elements, code, or HTML blocks inside the GemPages editor.

Can I use GemPages’ built-in swatches with Rubik?

You can, but you don’t need to. Rubik provides its own swatches with more customization options (color circles, image thumbnails, pill buttons). If you prefer GemPages swatches for variant selection, Rubik still handles the gallery filtering part.

What if I switch from GemPages to another page builder?

Rubik supports 7 page builders with dedicated detection modules (GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo). If you switch builders, Rubik detects the new one automatically. Your image assignments are stored in Shopify metafields, so they carry over.

Will Rubik slow down my GemPages product page?

Rubik loads swatch and image assignment data from Shopify metafields. There are no external API calls after the page loads. The data is already embedded in the page when it renders.

Get started

If you use GemPages and need variant-specific gallery filtering, Rubik is the only variant image app with a dedicated GemPages module. Install it, enable the embed, assign your images, and you’re done.

Try Rubik Variant Images free