PageFly lets you build custom product pages from scratch. You drag in sections, style them however you want, and publish a product template that looks nothing like your theme’s default layout.
The problem: most variant image apps expect your theme’s default product page structure. PageFly generates its own DOM with different selectors, different class names, and different JavaScript events. A variant image app that works perfectly on your theme’s default template will often fail completely on a PageFly product page.
Rubik Variant Images has a dedicated PageFly detection module. When it detects a PageFly product page, it adapts its gallery detection and variant binding automatically.
In this post
- Why variant image apps fail on PageFly
- How Rubik detects PageFly
- Setup guide
- Assigning images: manual, AI, and bulk
- Swatches on PageFly pages
- All 7 supported page builders
- Frequently asked questions
- Related reading
Why variant image apps fail on PageFly
Shopify themes follow a predictable structure. Product galleries, variant selectors, and add-to-cart forms all use known patterns. Variant image apps are built to find these patterns.
PageFly replaces this structure entirely. It renders its own product gallery component, its own variant selector, and wraps everything in PageFly-specific containers. The class names are different. The event system is different. The rendering order is different.
A typical variant image app scans the page for the theme’s gallery element. On a PageFly page, that element does not exist. The app fails silently: no swatches appear, or swatches show up but don’t control the gallery, or the gallery doesn’t filter when variants change.
Some merchants try workarounds. Adding custom CSS. Injecting JavaScript into the PageFly editor. Using PageFly’s custom code block to manually trigger the app. These hacks are fragile. A PageFly update can break them overnight.
How Rubik detects PageFly
Rubik uses 8 different detection methods when a product page loads. One of those checks specifically for PageFly’s DOM signatures. When Rubik confirms a PageFly product page, three things change:
Gallery targeting. Rubik locates the PageFly image gallery component instead of looking for the theme’s gallery. It binds to PageFly’s gallery rendering so image filtering happens cleanly without flicker or delay.
Variant event binding. Rather than listening for the theme’s variant change events, Rubik hooks into PageFly’s form component. When a customer picks a different option, Rubik catches the change and updates the gallery.
Shadow DOM isolation. Rubik renders its swatches inside Shadow DOM. This means PageFly’s CSS and Rubik’s CSS never collide. Your PageFly design stays intact. The swatches look exactly as configured.
None of this requires manual setup. You don’t need to select “PageFly mode.” Rubik detects it on page load.
Setup guide
Five steps. No code. No changes inside the PageFly editor.
- Install Rubik Variant Images from the Shopify App Store.
- Enable the app embed. Go to Online Store > Themes > Customize > App embeds. Toggle on Rubik Variant Images. Save.
- Open a product in Rubik that uses a PageFly product template.
- Assign images to each variant. Click a variant, click the images that belong to it. Five or six per variant is a good starting point.
- Save and check your storefront. The gallery now filters based on variant selection.
The app embed loads at the theme level, not inside PageFly. This is important because it means Rubik works regardless of how you’ve structured your PageFly product template. You could have a custom gallery layout, a split-screen design, or a single-column product page. Rubik adapts to whatever PageFly renders.
Assigning images: manual, AI, and bulk
Rubik gives you three ways to connect images to variants. All three work on PageFly products.
Manual assign. Open a product in Rubik, select a variant, click the images you want assigned to it. Best when you have a small catalog or need full control.
AI auto-assign. Click the AI button on a product page. Rubik’s AI looks at 4 data points for each image: product name, variant name, image filename, and alt text. It maps images to variants automatically. You review and save. Works one product at a time.
Bulk assign. For products with images ordered sequentially by variant in the Shopify gallery, bulk assign detects variant boundaries using the Shopify-assigned featured image for each variant. It processes hundreds of products in the background. No AI credits, no filename matching.
Swatches on PageFly pages
Rubik replaces the PageFly variant selector with visual swatches. Three types are available:
- Color circles: Filled with the actual color or a custom swatch image
- Image thumbnails: Mini product photos for each variant
- Pill buttons: Text labels for Size, Material, or any non-visual option
Mix them on the same product. Use color circles for Color, pill buttons for Size. Customize everything from Rubik’s settings: swatch dimensions, border radius, spacing, selected state, hover effects. Or use the AI Visual Settings Assistant and describe what you want in plain English.
Shadow DOM keeps Rubik’s swatch CSS completely separate from PageFly’s styling. No conflicts. No overrides. No surprises when you update either app.
Common images and videos
Not every image belongs to a specific variant. Size charts, packaging shots, and lifestyle photos that apply to all colors can be marked as common images in Rubik. They stay visible in the gallery regardless of which variant the customer picks.
Rubik also supports video and 3D model assignment per variant. If you have a product demo video for the blue version and a different one for the red version, each plays when the corresponding variant is selected.
All 7 supported page builders
PageFly is one of 7 page builders that Rubik supports with dedicated detection:
- GemPages
- PageFly
- EComposer
- Instant Page Builder
- Beae
- Foxify
- Replo
If you switch from PageFly to another builder, Rubik detects the change automatically. Image assignments live in Shopify metafields, so they survive any template change. See how it works with GemPages: variant images on GemPages product pages.
Watch it in action
See how variant image filtering works on a Shopify product page:
Frequently asked questions
Does Rubik work on PageFly product pages?
Yes. Rubik has a dedicated PageFly detection module. It finds the PageFly gallery and variant selector automatically and applies gallery filtering without any manual setup.
Do I need to add anything inside the PageFly editor?
No. Rubik loads through the Shopify theme app embed, which operates at the theme level. You don’t need custom code, HTML blocks, or any modifications inside PageFly.
What happens if I switch from PageFly to a regular theme template?
Rubik switches to standard theme detection automatically. Your image assignments are stored in Shopify metafields, not tied to PageFly. Everything carries over.
Can I use PageFly’s own color swatches with Rubik?
PageFly’s built-in swatches handle variant selection but don’t filter the gallery. You can keep them for selection and let Rubik handle filtering, or replace them entirely with Rubik’s swatches for both selection and filtering.
How many images can I assign per variant?
Unlimited. You can assign as many images as the product has (up to Shopify’s 250 media limit per product). Five to six images per variant is a good baseline: front, back, detail, scale, lifestyle.
Get started
PageFly gives you design freedom. Rubik gives you variant image filtering that actually works on those designs. Install Rubik, enable the embed, assign your images, and your PageFly product pages get proper gallery filtering.
