Shopify Foxify variant images: setup, swatches, and fixes
Foxify is a powerful and flexible theme editor that allows you to build Shopify product pages using custom drag-and-drop blocks. Once you swap the default product section with a Foxify layout, however, most variant image apps lose track of both the image gallery and the variant picker. The classic broken behaviour follows: you click on a colour and nothing happens, your customer is left confused displaying the wrong photo.
Rubik Variant Images has a built in Foxify detection module. It recognizes the Foxify product section, hooks into the Foxify variant picker and filters the gallery on the same render cycle as the page loads. No theme files need to be edited and no JavaScript is required.
This post covers Foxify pages in Rubik, the 4-step setup process, and a few small tweaks for rare edge cases where the first install of Foxify may not have gone in perfectly.
In this post
- Why Foxify breaks generic variant image apps
- How Rubik detects Foxify product pages
- Setup in 4 steps
- Custom swatches on Foxify pages
- Common issues and fixes
- Frequently asked questions
- Related reading
Why Foxify breaks generic variant image apps
Most apps are written for a Shopify infertile males world where every product page looks the same: a certain default Shopify product section. Typically every app in the variant image space hardcodes for a specific gallery class name, a specific format for variant select dropdowns, and a specific change event. As long as these conditions are met, every app is designed to work beautifully.
Foxify breaks the page into Foxify gallery and swatch blocks that the shopping apps can no longer reliably link together. As a result, the customer has to click on a swatch, then the URL updates, but the image on the new page does not change, potentially loosing the sale.
This isn’t an edit your selectors problem. There’s an app already that knows how Foxify looks.
How Rubik detects Foxify product pages
On every product page load 7 different variant detection methods are run by Rubik the (product variant) “魔王”. Of those 7 methods one is Foxify, the one we love to hate. It works by scanning the DOM for Foxify “markers” on load. These markers are things like paths to assets (js, css, images) section IDs or block class patterns. Once it finds these markers it “knows” that it’s in Foxify mode and uses Foxify aware selectors when grabbing the gallery, variant picker and setting up the click handlers.
Speed. Rubik uses product metafields to store the variant to image map, and there are no external API calls. The Foxify variant to image map is stored in the product metafields along with the rest of the product data, which is loaded with the page. In the render cycle on Foxify, Rubik can then match up the data with the appropriate gallery items and filter in that one render cycle. All done without any flicker, shift, or second network round trip.
On stores with Foxify product pages mixed with pages rendered by default theme, Rubik works. No flip switches required.
Setup in 4 steps
- Install Rubik Variant Images from the Shopify App Store. The free plan covers 1 product, which is enough to test on a Foxify page.
- Enable the Rubik app embed in your active theme. Online Store, Themes, Customize, App embeds. Toggle Rubik on and save. Foxify pages still rely on the theme app embed system, so this step is required even if Foxify renders the layout.
- Open a product in Rubik and assign images to variants. Manual assignment, AI auto-assign per product, or bulk assign across hundreds of products. Bulk uses Shopify gallery order with featured image boundaries (not filename matching).
- Open the Foxify product page on the storefront. Click a swatch. The gallery should filter to that variant’s images. If not, see the issues section.
That is the setup. No theme.liquid edits. No code snippets.
Custom swatches on Foxify pages
This great little app not only filters the gallery, but also allows you to add custom Swatches for Foxify variants. 5 shapes to choose from – circle, square, rounded square, pill, and button. You can also choose to use product photo thumbnails (swatch instead of circle for fabric/wrap stores).
All styling is now contained within the Rubik admin, change the shape, size, the border, and active state colour and save. The Foxify product page will then automatically pick up on your changes and you no longer need to regenerate your foxified layout.
For developers who are creating Foxify blocks: Rubik now fires a JavaScript event on every swatch click for developers creating Foxify blocks.
window.addEventListener('rubik-swatch-clicked', function(e) {
console.log(e.detail.optionName, e.detail.optionValue);
});Events property has 4 properties: optionName, optionValue, optionValueId & the clicked element. Can be used to sync any custom Foxify elements, such as price labels, badges & stock indicators with the active variant.
Common issues and fixes
Gallery does not filter when a swatch is clicked
Check the app embed in your theme. The script won’t load on Foxify sites if the app embed for Rubik’s is misaligned for the active theme. You can check and adjust the location of embeds in the theme customizer under App embeds | Rubik’s.
Make sure you actually assigned the images. Go to the product in Rubik and make sure each variant has at least 1 image assigned.
Two variant pickers visible on the page
Bug is when Foxify page imports the theme product section, but also adds an extra Foxify variant block. Customers can click one, but Rubik is listening for the other. Go back into the Foxify editor and remove the duplicate, keeping one variant picker per product page.
Wrong image on first paint
Set the first image for the variant to be the featured image in Shopify admin. The first paint is always the featured image for the product. It goes away if you set it to be the default variant.
Swatches show but click does nothing
Almost always a duplicate-picker issue. See above. If not, check the browser console for any JavaScript error messages from other add-ons. A broken script could be causing issues for Rubik’s later on in the page.
Why Foxify merchants choose Rubik
Foxify customers care about page speed. This is why a variant image application that adds external hits to your site on every page view is NOT a good fit for our customers. Unlike Foxify variant images application, Rubik is metafield based and the data is cached with the rest of the page. Foxify customers haven’t seen a speed penalty thanks to this design choice.
Rubik is a highly rated responsive theme for Shopify that comes with plenty of features. Not only is the theme verified to work on over 350 Shopify themes, it’s also received the Built for Shopify badge. The theme has a 5.0 rating with 343+ reviews. For store owners on the lookout for a fair pricing structure, Free (1 product) and $25/month (100 products) options are available for small stores. Medium to large stores are offered a $50 per month option for 1000 products, while unlimited products are available for the discounted rate of $75 per month within the Shopify-plan with no surprise upgrades as your store grows.
Frequently asked questions
Does Rubik Variant Images work with Foxify?
Yes. This version of Rubik has Foxify detection and you can filter the gallery on the variant click without needing to modify any of the code.
Do I need to edit code to use Rubik with Foxify?
It would be awesome if we could enable the Rubik app embed in our theme instead of a tab. So all we have to do is add images in the settings.
Will Rubik slow down my Foxify product page?
No. The Rubik metafield does not make any external API calls. Its variant data is included within the page itself as variant data.
Can I use colour swatches with Foxify?
Yes. On the foxify pages I have also added some custom swatches to the variant picker using Rubik.
What if some pages use Foxify and others use my theme?
Rubik can be adapted per page. So Foxify pages can get the Foxify detection and theme pages can get the theme detection.
Does Rubik work on Foxify collection pages?
No. Rubik Variant Images is product page only. For collection swatches and grouping separate products use Rubik Combined Listings.
How is Rubik priced?
Flat pricing: Free for 1 product, Starter $25/month for 100, Advanced $50/month for 1000, Premium $75/month for unlimited.
Related reading
