Your desktop product page looks awesome – Customer clicks red, gallery filters to red, checkout processes correctly on desktop. Then you open up shop on mobile – images don’t update correctly, only the main image updates but not the variants, swatches are present on mobile but nothing happens when you tap on them. These mobile-specific variant image bugs are one of the most common reasons we receive emails from frustrated Shopify merchants looking for fixes.
The good news is that the majority of cases can be attributed to one of 6 reasons. I will outline what they are, provide a quick test for each, and explain the fixes to get your computer back online!
In this post
- How to diagnose in under a minute
- Cause 1: Theme uses a separate mobile gallery
- Cause 2: Lazy loading blocks the swap
- Cause 3: Touch events not bound to swatches
- Cause 4: Page builder overrides the variant picker
- Cause 5: Variant image app embed disabled
- Cause 6: Slideshow resets to slide 1 on swap
- Cause comparison table
- Frequently asked questions
- Related reading
How to diagnose in under a minute
View the product page on mobile and select a swatch – does the main image change (1), do the thumbnail images underneath filter to only the variants that you can purchase (2), and does the URL include a variant parameter (3). If any of these fail, it could be due to one of the following 6 causes. Variant image checker tool – check the product URL against the product variant images to aid in the diagnosis.
Cause 1: Theme uses a separate mobile gallery
Many older themes and page-builder sections render two gallery components: one for the desktop version and one for the mobile version. These gallery components look exactly the same to the user, but live in different DOM nodes. Therefore, a swatch click handler written to target the desktop gallery will never touch the mobile version.
- On mobile, right-click and Inspect (or use desktop Chrome with mobile emulation).
- Find the gallery element. Search the DOM for a second gallery with a hidden-on-desktop class.
- If you find two, the swatch script needs to target both. In Rubik Variant Images, enable Mobile gallery support in app settings and it handles both automatically.
Cause 2: Lazy loading blocks the swap
Mobile themes aggressively lazy load images to try to save data. So variant images that are outside the view port when the page loads have no src or a placeholder src. Then when the swatch swap script runs it looks for src=… and finds nothing to swap.
- Inspect the img element. Look for data-src, data-srcset, or loading=”lazy”.
- If src is blank, the swap script has to read from data-src instead.
- Fix in theme: replace the swap logic to handle lazy images. Or use an app that handles it for you.
Cause 3: Touch events not bound to swatches
A swatch bound to “click” in a desktop-only script will fire on desktop because browsers emulate click from touch. Usually. Not on iOS Safari, with appropriate event prevention, where the swatch will look and feel tappable but nothing will happen.
- Open the page on iPhone, tap a swatch, and check if the selected state updates.
- If the state does not update, the event is not firing. The theme script needs touchstart or pointerdown bindings.
- Rubik Variant Images uses pointer events by default, so touch and mouse both work without special handling.
Cause 4: Page builder overrides the variant picker
If you are using a page builder (GemPages, PageFly, Shogun, EComposer, Beae, Instant, Foxify, Replo), the basic product template you use will include a variant picker, and this will be separate to the variant picker found in your theme. A swatch script that targets the theme’s picker will not fire on pages created by builders. Rubik Variant Images currently has support for Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo.
Why Shopify doesn’t standardize the DOM for the variant selector across themes & builders I don’t know, but it would help to solve a lot of headaches mentioned in this post. As it stands we have to build integrations per builder. We do this.
Cause 5: Variant image app embed disabled
Each and every Shopify app which embeds scripts into your store does this through the theme app embed feature. If the embed feature is turned off, your JavaScript will not load resulting in no product swatches. The main reason for 1 day of working and the next it breaks is because of the user working with themes such as switching to another theme, duplicating the theme for some reason or updating versions of themes.
- Online Store, Themes, Customize.
- Click the App embeds icon on the left (puzzle piece).
- Check that the variant image app embed is toggled ON.
- Save. Reload the product page on mobile.
For product swatches on product pages we recommend Rubik Variant Images. For collection swatches and separate color combined listings we recommend Rubik Combined Listings.
Cause 6: Slideshow resets to slide 1 on swap
Some mobile galleries are in a carousel format. When swap script updates list of images, the carousel must reinitialize to the first slide. If the first slide happens to be a shared image (i.e. size chart), customer sees incorrect content.
- Open the product in app settings and check if “Preserve slide index” or similar option exists.
- If the theme is custom, the slideshow library needs a “goTo(0) on destroy” override.
- Rubik Variant Images handles this for supported themes by rebuilding the slide list before re-init.
Cause comparison table
| Cause | Symptom | DIY fix time |
|---|---|---|
| Separate mobile gallery | Desktop works, mobile does not | 1 hr theme edit |
| Lazy load | Image swaps to blank | 30 min |
| Touch events | Tap does nothing on iOS | 1 hr |
| Page builder | Only builder pages broken | Use supported app |
| App embed off | Worked before, broken now | 2 min |
| Slideshow reset | Jumps to slide 1 on swap | Varies |
Also worth checking
Even when fixed on mobile, you may see broken swatches in general (not just mobile). Run our theme checker tool to see how your theme handles variant images by default. This issue is different from collection pages and is covered in our collection filters fix post.
Video walkthrough
Try it on your store
The live demo at http://rubikdemo.com/ looks and works exactly the same on both desktop and mobile, so you can check it out to see what it should look like. Documentation is at http://rubikvariant.com/docs and the video above goes through that fix for mobile.
Frequently asked questions
Why do variant images work on desktop but not mobile?
Because the theme renders a separate mobile gallery that the swatch script does not target, or because a page builder overrides the variant picker only on mobile templates.
Does Rubik Variant Images work on iPhone?
Yes. Pointer events are used so both ‘tap’ and ‘click’ work, lazy loaded images are handled, as are mobile gallery widgets and are confirmed to work on 304+ themes.
My page builder broke my variant images. What do I do?
Use an app that integrate with your builder. Currently, we support Beae, EComposer, EWebsite Builder, Foxify, GemPages, Instant Store, PageFly and Replo to display the Rubik Variant Images (RVI) images.
How do I check if the app embed is enabled?
Online Store, Themes, Customize, click the App embeds icon on the left. Make sure the embed for the variant image app is toggled on and saved.
Why does my carousel jump to the first slide when I tap a swatch?
With the image list changed, the carousel is re-initilizing. Fix this by re-building the slide list before re-initing, or use an app that swaps images without pulling you out of the carousel interface.
Does variant image filtering affect Core Web Vitals on mobile?
Only if app is injecting heavy external scripts. Rubik Variant Images does not impact LCP or CLS because it is loading the images from product metafields without making any external API calls.
Do I need to fix this per product or globally?
Globally Yes once we have fixed the theme integration / app embed issue, this fix will affect all products instead of having to apply the fix to each individual product.
