Shopify Beae variant images: setup, swatches, and fixes
Beae is an ecomnoplugin for Shopify that allows you to build product pages with drag-and-drop blocks. The plugin has one significant drawback, however: it breaks most variant image apps. The reason is that the variant image apps are looking for a gallery and a variant select within the DOM, and Beae substitutes custom components for both. Ultimately, the app gives up looking. We’s seen empty galleries, wrong photos, and disappointed customers.
Rubik Variant Images comes with a Beae detection module that recognizes Beae’s product section structure, grabs the right buttons and filters the gallery for the customer straight away they select a colour – no need to modify theme code or add custom css, just install and assign!
A post about Beae and Rubik cooperation, image not turning on on the first run and couple of theme tweaks that fix 95% of edge cases.
In this post
- Why Beae breaks most variant image apps
- How Rubik detects Beae product pages
- Setup in 4 steps
- Theme selectors and Beae blocks
- Common issues and fixes
- Frequently asked questions
- Related reading
Why Beae breaks most variant image apps
Most variant image apps were written with the assumption that every product page would render Shopify’s default product section, with known and predictable markup. While most product pages do render the default product section, this known section contains the gallery with a known class. The variant picker also fires a known event, allowing most apps to attach a listener and process the change.
Beae throws that out. Beae sections have their own rendering class names, block IDs, and structure, so even the gallery or variant selector could be a Beae carousel, Beae media grid, Beae stack or a Beae swatch block. Whatever it is, it is not what a generic app would expect.
After installing a new variant image app I was let down by the lack of effect after following the setup. I couldn’t see any variant images filtering out in the Beae gallery and even when I clicked on the blue button I was shown the default image. After many attempts with different apps I finally realised the problem wasn’t with the apps. The apps didn’t know what Beae was.
How Rubik detects Beae product pages
In contrast to the other variant detectors (Rubik) uses 8 different methods to determine which variant of to use, one of them being Beae. On page load it checks for known Beae markers (section id patterns, URLs to assets, block class patterns) and switches to Beae mode if it finds any of them. The gallery filter as well as the swatch injection and click handlers use Beae aware CSS selectors.
Note that Beae is a headless ecom component which means that no external API calls are performed by Rubik. The mapping from variant to image is stored in product metafields which are loaded as the page is rendered by Beae. Rubik then loads the metafield data and matches it up with the gallery that Beae built and filters all of that in one render cycle. No flickering or shifting of the layout.
Oddly enough many stores mix and match Beae product pages with the default theme product pages, so it’s nice that Rubik can handle multiple themes per page. So on a single page you could have Beae and Dawn product pages, and only have to update the theme styling once, without having to flip a switch.
Setup in 4 steps
- Install Rubik Variant Images from the Shopify App Store. The free plan covers 1 product, which is enough to test.
- Enable the Rubik app embed in your active theme. Online Store, Themes, Customize, App embeds. Toggle Rubik on. Save. The embed is what loads the script on every product page, including Beae pages.
- Open a product in Rubik and assign images. You have three options: assign manually per variant, run AI auto-assign on a single product, or run bulk assign across hundreds of products at once. Bulk assign uses Shopify gallery order with featured image boundaries (not filename matching).
- Open the product page on the storefront. Click a swatch. The gallery should filter to that variant’s images. If it does not, jump to the issues section below.
This is the complete solution. No theme.liquid file modifications, no JavaScript code snippets or CSS overrides required.
Theme selectors and Beae blocks
Beae product pages can either use the native Beae product gallery block, or the page’s product section can be embedded as a Beae element via the theme. Both versions look very different, and everything is handled by Rubik for you.
We can use Beae’s own product gallery block – in this case Rubik filters the Beae gallery directly and variant clicks dispatch the standard Rubik swatch event, and the Beae carousel updates in place. Alternatively you can embed the theme product section, and in this instance Rubik uses theme specific detection on the embedded section which is more familiar territory.
For anyone building custom Beae layouts, Rubik now fires a JavaScript event on every swatch click to facilitate this kind of functionality.
window.addEventListener('rubik-swatch-clicked', function(e) {
console.log(e.detail.optionName, e.detail.optionValue);
});The 4 properties of the event allow me to sync the custom Beae blocks (price labels, badges, stock indicators) with the active variant.
Common issues and fixes
Gallery does not filter on click
This problem is easily fixed if someone turns on the app embed feature for the theme that Beae uses (the pages are built with the theme as a base). This feature is still turned off for theme based pages and therefore the Rubik app is never even loaded. Go to the theme customizer->App embeds and turn it on for the Rubik app.
Next Step: Double-check that all variants in your Data Source have assigned images. You could have accidentally left them empty which would then not filter. Open up your product in Rubik and check each variant has at least an image assigned.
Swatches show but click does nothing
Meaning there are two pickers on the page – one for Beae that the customer clicks on to see different versions of the product, and another for the theme portion of Rubik that the site is logged into on the Beae editor that customers cannot click on but which are read by Rubik to make changes. Here in the Beae editor I have removed the duplicated code for the variant picker that allowed for both functionality initially. Now there is just one picker.
Wrong image flashes briefly before correct image loads
I was seeing Rubik filters render in the same render cycle as the page load but the 3 Beae carousels sometimes initialising after Rubik had finished rendering. Setting the first image for the variant as the featured image in the Shopify admin fixes this issue and the first paint will render correctly, even though there may be a slight delay for subsequent render cycles.
Works on desktop, broken on mobile
Beae mobile layouts can use a different gallery block than desktop. Make sure the Beae editor mobile preview is set to a gallery that Beae supports (the standard product media block) and not a third party block like custom carousels. We may need to add some store URL specific detection for these block patterns. Please let us know if you have any of these custom carousels and we will assist in setting up the layout.
Why merchants pick Rubik for Beae stores
Beae merchants want their site to load fast, and that’s why they chose Beae in the first place. So a variant image app that adds 500ms of API calls on every single page load is not going to fly. Rubik is metafield-based, so all the data ships with the page – no external API calls, no third-party server round trips, so page speed scores stay where they were.
The other reason this theme is highly recommended is because it says it was built for Shopify, it has 5.0 rating with 343+ reviews, and you get flat, reasonable pricing that doesn’t skyrocket as your store grows. You get Free theme for first product, then $25/month for 100 products, $50 for 1000 products, $75 for Unlimited products. Unlike other Shopify themes, you won’t get suddenly switched to a higher Shopify plan to pay for extra features.
Frequently asked questions
Does Rubik Variant Images work with Beae product pages?
There is a module for Beae detection in the product detection package. It was created by manual inspection of one Beae product, and it can detect the correct tab structure on the product page variant tab and automatically filter the gallery by variant click without hand-parsed html.
Do I need to edit theme code to make Rubik work with Beae?
Automate product image cropping by enabling the Rubik app embed in your theme, assigning images to variants in the Rubik admin, and letting Rubik do the rest automatically.
Will Rubik slow down my Beae product page?
No, Rubik is metafield-based with no external API calls. The variant data is included in the page and no additional round trip is required. There is also no measurable speed impact from this functionality.
Can I show colour swatches on Beae pages?
Yes. We’ve added custom swatches (circle, square, pill, button, image) to the variant picker on Beae product pages. Style these swatches in the Rubik admin.
What if some product pages use Beae and others use my theme?
Rubik has multiple modes of adaptation, it adapts per page and checks each product page individually on load.Beae pages are detected differently to standard pages. Theme pages are also detected differently to standard pages. They all work without manually switching.
Does Rubik work on collection pages built with Beae?
No. Rubik Variant Images is product-page only. For collection page swatches and grouped product linking please see Rubik Combined Listings, which is a separate app.
How much does Rubik cost?
Flat pricing. Free for 1 product. Starter $25/month for 100 products. Advanced $50/month for 1000. Premium $75/month for unlimited. No Shopify-plan surcharges.
Related reading
