Foxify Page Builder with Rubik Variant Images

May 25, 2026
App Guides
14 min read
a page builder interface with drag-and-drop blocks showing a product page with color variant swatches

You spent hours building a product page in Foxify. The layout is sharp, the sections are exactly where you want them, and everything looks polished. Then you install a variant image app and the gallery refuses to filter. Every color shows every photo. Your Foxify page builder variant images on Shopify are stuck in a broken state, and there is no error message telling you why.

We have seen this pattern hundreds of times across support tickets. Merchants build a custom page in a page builder, add a variant image app, and get nothing. The reason is always the same: page builders replace your theme’s default product section with custom HTML, and most variant image apps have no idea how to find the gallery inside that custom structure. Rubik Variant Images and Rubik Combined Listings both support Foxify natively, along with six other page builders.

This post covers how Foxify compatibility works under the hood, how to set everything up, and which page builders are (and are not) supported.

In this post

Why page builders break variant image apps on Shopify

Every Shopify theme ships with a product section. This section has a media gallery, a variant selector (dropdowns or buttons), and an Add to Cart button. Variant image apps hook into this structure. They locate the gallery container, listen for variant changes, and swap visible images when a customer picks a different color or style.

Page builders demolish that structure. Completely. When you create a custom product page in Foxify, the builder generates its own HTML. The gallery sits inside Foxify’s proprietary wrapper elements. The variant selector uses Foxify’s own component markup. Class names, data attributes, DOM hierarchy: all different from what the theme would normally output.

So what happens? A variant image app that searches for .product-gallery or [data-product-media] finds nothing. The elements exist on the page, sure, but they are buried inside the page builder’s containers with completely different selectors. The app silently fails. No console error. No warning toast. The gallery just shows every image for every variant, as if the app is not installed at all.

Why does Shopify not standardize this? Good question. Every page builder invents its own DOM structure because Shopify does not enforce a universal product section schema for third-party builders. Until that changes (and it probably won’t anytime soon), variant image apps need builder-specific detection logic.

How Rubik works with Foxify page builder variant images on Shopify

We built page builder detection into Rubik from the ground up. It was not an afterthought or a “we’ll get to it later” feature. When we tested Foxify compatibility, we mapped every selector Foxify uses for its product gallery, variant picker, and media containers. Rubik includes a dedicated detection module for Foxify, registered internally with its own theme ID. When the app loads on a product page, it checks whether Foxify’s section wrapper is present in the DOM. If Foxify markup is detected, Rubik switches to the Foxify-specific detection path instead of the default theme path.

The second part is Shadow DOM rendering. This is where most competing apps fall apart on page builder pages, even if they manage to find the gallery. Page builders inject their own CSS. Foxify adds custom styles to every element it controls. A variant image app that injects its own swatches into this environment gets style collisions: wrong font sizes, broken margins, overlapping borders. Rubik renders its swatches inside a Shadow DOM container, which means the app’s CSS is completely isolated from Foxify’s styles (and vice versa). Zero conflicts.

Third: metafield-based loading. Rubik does not make external API calls to fetch variant image assignments. All data lives in Shopify metafields and loads with the page itself. This matters for page builder pages because builders already add their own JavaScript payload. You do not want a variant image app piling on additional network requests. We made this architectural decision early and it pays off on every builder page, not just Foxify.

Setting up Rubik Variant Images on a Foxify product page

Rubik Variant Images handles variant image filtering and swatches on product pages. It shows only the images that belong to the selected variant, and replaces the default variant selector with visual swatches (color circles, image thumbnails, pill buttons, or a mix). Here is how to get it running on a Foxify product page.

  1. Install Rubik Variant Images from the Shopify App Store. The free plan covers 1 product so you can test before committing.
  2. Assign images to variants. Open any product in the Rubik dashboard. Drag images onto each variant, or use the AI auto-assign feature to match images automatically based on filenames, alt text, and product title.
  3. Go to your Foxify product page. You do not need to change anything in Foxify’s editor. Rubik detects Foxify’s layout automatically. There is no toggle, no code snippet, and no manual selector configuration.
  4. Preview the product page. Select a variant. The gallery should filter to show only images assigned to that variant. Swatches should appear in place of (or alongside) the default variant picker.
  5. Customize swatches. In the Rubik dashboard, go to Visual Settings. Choose swatch shape (circle, square, rounded, pill), swatch type (color, image, button), and adjust sizing. All styling changes apply inside the Shadow DOM, so they won’t interfere with Foxify’s design.

That is genuinely it. Five steps. We designed it this way on purpose because nobody should need to edit Liquid templates or paste custom code into a page builder’s HTML block just to get variant images working. If you run into issues (it does happen with heavily customized Foxify templates), reach out to support and we will map your custom selectors manually. We have done this for hundreds of stores.

Need a more detailed walkthrough? Check the getting started guide or browse the live demo store to see filtering in action.

Rubik Variant Images works with all popular Shopify page builders including Foxify

Setting up Rubik Combined Listings on Foxify collection pages

Rubik Combined Listings solves a different problem. It links separate Shopify products together as if they were variants of one product, and shows swatches on collection pages and grouped product pages. Think of a t-shirt that exists as 5 separate products (one per color), each with its own URL, its own images, and its own SEO title. RCL groups them and adds color swatches to the collection page product cards.

Does it work on Foxify collection pages? Yes. Same detection logic, same Shadow DOM rendering. Here is the setup:

  1. Install Rubik Combined Listings from the Shopify App Store. Free plan includes 5 product groups.
  2. Create a product group. Pick the products you want to link (for example, 5 color variations of the same shirt). Assign each one an option value like “Red”, “Blue”, “Green”.
  3. Configure swatches. Choose between visual (image), button, pill, or dropdown. Set primary and secondary swatch colors. You can also use AI Magic Fill to auto-detect colors from product images.
  4. Open your Foxify collection page. The swatches should appear on the product cards for grouped products. Clicking a swatch navigates to the corresponding product.

The RCL swatches also render on grouped product pages (not just collection pages). So if a customer lands on “Blue T-Shirt” and you have a Foxify-built product page, they will see swatches linking to Red, Green, and the other colors in the group.

And here is where both apps work together. Rubik Variant Images filters the product page gallery per variant (showing only blue shirt images when blue is selected). Rubik Combined Listings adds cross-product swatches linking separate color products. Two apps, two distinct jobs, both compatible with Foxify. For more on how variant image filtering works, check the FAQ on the RVI site.

Foxify vs other page builders for Shopify variant images

How does Foxify compare to other builders when it comes to variant image compatibility? Honestly, from our side, the experience is nearly identical across all seven supported builders. We maintain dedicated detection modules for each one. The real differences are in the builders themselves, not in how Rubik interacts with them.

Foxify stands out in a couple of ways. Its product page templates tend to keep the gallery and variant picker in predictable locations within the DOM, which makes detection reliable. Some builders (we won’t name names) scatter product elements across nested iframes or dynamically loaded containers that make detection flaky. Foxify does not do this. Clean structure, clean detection.

That said, every builder on our supported list works. We tested Foxify compatibility across dozens of Foxify templates and it handled all of them. The same goes for EComposer, GemPages, PageFly, and Instant. We built detection for Beae and Replo with the same approach.

One builder that does NOT work? Shogun. We do not support Shogun and have no plans to add it. If you are using Shogun and need variant image filtering, you will need to switch builders or use a standard theme template for your product pages.

All 7 supported Shopify page builders

Both Rubik Variant Images and Rubik Combined Listings support the same seven page builders. If your builder is on this list, you are good. No code editing, no manual selectors, no workarounds needed.

Page BuilderRVI (Product Page)RCL (Collection + Product)Shadow DOMAuto Detection
BeaeYesYesYesYes
EComposerYesYesYesYes
FoxifyYesYesYesYes
GemPagesYesYesYesYes
InstantYesYesYesYes
PageFlyYesYesYesYes
ReploYesYesYesYes

Shogun is not on this list. Neither are niche builders like Zipify or Buildify. If your builder is not listed, Rubik defaults to standard theme detection, which may or may not work depending on how close the builder’s DOM structure is to the original theme. For stores using the default theme product section, Rubik supports 350+ themes out of the box.

Which page builder should you pick?

If variant image support is a priority (and it should be for any store with color or style variants), pick a builder from the list above. All seven work equally well with both Rubik apps. Your choice should come down to the builder’s own feature set, pricing, and UX. We do not have a favorite. We just made sure all seven work.

Want to compare builders more broadly? The 2026 page builder comparison covers features, pricing, and performance benchmarks for all major options.

Why Shadow DOM rendering matters for page builders

This is a strong opinion, but I will say it anyway: any variant image app that does not use Shadow DOM rendering on page builder pages is asking for trouble. And most of them don’t use it.

Page builders inject CSS aggressively. Foxify, EComposer, GemPages, all of them add scoped styles to their elements. When a variant image app injects swatches as plain HTML into this environment, the builder’s CSS bleeds into the swatch elements. You get wrong border widths, unexpected padding, font sizes that do not match anything on the page. Worse, the app’s CSS can bleed back into the builder’s elements and break things the merchant carefully designed.

Shadow DOM fixes this. Rubik renders its swatches inside a shadow root, which creates a CSS boundary. The builder’s styles cannot reach into the shadow root. Rubik’s swatch styles cannot leak out. Two completely separate style scopes on the same page. We built Shadow DOM rendering specifically because of page builder support. It was the only reliable way to guarantee that swatch styling stays consistent across every builder without manual CSS overrides.

Is it more work to build an app this way? Absolutely. But the alternative is merchants opening support tickets because their swatches look wrong on a GemPages template, or their Foxify page has broken spacing after installing a variant app. We made the trade-off and it was the right call.

Using both Rubik apps together on Foxify

Some stores need both apps. Here is a common scenario: you sell sneakers. Each color is a separate Shopify product (for SEO, each color gets its own URL and title). Each color product has multiple size variants, each with different angle shots.

Three things need to happen: collection page swatches linking the color products together, product page swatches linking to sibling colors, and product page image filtering showing only the images for the selected size. That is two apps working on the same page, and they need to not step on each other.

On Foxify pages, this just works. RCL injects its cross-product swatches. RVI injects its variant image filtering and per-variant swatches. Each app uses its own Shadow DOM container. No collisions, no duplicate swatch rows, no style conflicts. We tested this combination across every supported builder because it is one of the most common setups our merchants use.

You can check how this looks on the RVI demo store or the RCL demo store. Use the App Detector tool to check which apps any Shopify store is running, or the Theme ID Finder to identify what theme (or page builder) a store uses.

“Works exactly as it should without fluff. I had an issue with my store suddenly not working anymore after redesigning my product page using Instant. I contacted Rubik CS about it, and Umid fixed the issue that had me losing my mind for a whole day in literally just a minute. Did not expect them to be so helpful. They definitely deserve their perfect 5 star rating.”

Anonymous merchant, 5.0 rating, Rubik Variant Images on the Shopify App Store

This review mentions the Instant page builder specifically, but the same support applies to Foxify and every other builder we support. If a builder update changes the DOM structure and breaks detection, we fix the selectors on our end. Merchants do not need to do anything.

Try Rubik Variant Images free
Try Rubik Combined Listings free

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

Frequently asked questions

Does Rubik Variant Images work with Foxify page builder?

Yes. Rubik Variant Images includes a dedicated detection module for Foxify. It automatically finds the product gallery and variant selector inside Foxify’s custom DOM structure and applies variant image filtering and swatches without any code editing or manual configuration.

Does Rubik Combined Listings work on Foxify collection pages?

Yes. Rubik Combined Listings detects Foxify’s collection page structure and injects product group swatches into the product cards. It also renders group swatches on Foxify-built product pages for linked products.

Can I use both Rubik apps at the same time on Foxify?

Yes. Both apps use separate Shadow DOM containers. RVI handles product page image filtering, RCL handles cross-product linking and collection swatches. They run independently on the same page with no conflicts.

Does Rubik work with Shogun page builder?

No. Shogun is not supported by either Rubik Variant Images or Rubik Combined Listings. The seven supported builders are Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo.

Do I need to add any code to Foxify for Rubik to work?

No. Detection is fully automatic. You do not need to paste code into Foxify’s HTML block, edit Liquid templates, or configure custom selectors. Install the app, assign images to variants, and the filtering works on your Foxify product page immediately.

What happens if a Foxify update changes its DOM structure?

If Foxify pushes an update that changes its HTML structure, it could temporarily break detection. When this happens, contact Rubik support. We update our detection selectors on our end, usually within hours. You do not need to update anything on your store. This is one of the most common support questions we get across all page builders, and we fix it fast.

Co-Founder at Craftshift

You may also like