Purity Theme – Product secondary image flickers/blinks when switching gallery images

Store Design
, ,
1

Hi everyone,

I’m using the Purity Shopify theme and I’ve noticed an issue on the product page.

When the page first loads, the second image in the product gallery briefly flickers/flashes before everything finishes loading. The first image displays normally, but the second image visibly blinks during the initial page load.

The issue occurs before any interaction with the gallery (I’m not clicking thumbnails or changing images).

It seems like the second image is being loaded or re-rendered after the page has already started displaying.

Has anyone experienced this with the Purity theme?

Is this related to:

  • lazy loading,
  • preloading,
  • image optimization,
  • JavaScript,
  • or is it a known bug in the theme?

Any suggestions on which file or setting controls this behavior would be greatly appreciated.

Thank you!

3

Hey @Iulia1

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

5

Hey @Iulia1

Just to confirm, are you talking about this how the image gets blurry for a second? Let me know.

image
image373×665 69.3 KB

Best,
Moeed

6

Yes, the second image from gallery sometimes it flickers. is not the blurry the problem. it s the flashes

7

The image has Lazy Loading, so first I suggest you to remove it. Try exploring your theme customization. You might find an option somewhere there to disable lazy load.

image
image1813×864 195 KB

If you don’t find it in the theme customization then from theme files you will have to remove loading="lazy" from the code of your product gallery.

Best,
Moeed

Iulia1 8

image

9

I wish it could be that easy. Unfortunately is not rezolving the problem.

10

@Iulia1 thats FOUC from the product-media slider. before the slider JS initializes, all the gallery slides sit in the DOM laid out together, so the browser paints slide 2 for a frame, then the script kicks in and hides everything except the active slide. thats the blink, and it shows up when the slider JS runs a beat after first paint.

fix is to hide the inactive slides in css until the slider marks itself ready, so nothing paints early. open the product page in devtools, find the media list and the class the slider adds once its initialized (something like flickity-enabled or is-loaded), then hold the non-first slides hidden until that class shows up:

.product-single__media-item:not(:first-child){ opacity:0; }
.flickity-enabled .product-single__media-item{ opacity:1; }

those selectors are placeholders, swap in Puritys real ones from devtools. also worth checking the 2nd image isnt set to loading=“eager” or preloaded while the theme lazy-swaps it, that re-render causes the same flash.

11

Hi @Iulia1

This is usually caused by the theme’s JavaScript re-initializing the product gallery after the page has rendered. It can also happen if the second image is lazy-loaded or if the gallery swaps placeholder images with the final images during initialization.

  • Whether the second image has loading="lazy" while the first image is loaded eagerly.
  • The gallery JavaScript for any image re-rendering or slider initialization.
  • CSS transitions or opacity animations applied to gallery images during page load.
  • Whether the theme is replacing placeholder images after initialization.
    If you can share your store URL (and password if it’s password-protected), I’d be happy to inspect it and help identify the exact cause.

Best regards,
Devcoder :laptop:

12

It was already suggested that this happens because of javascript code updating the page content.

In fact, on mobile, theme code replaces entire media gallery HTML – of course, this would cause visible redraw.

A possible solution was also already suggested – hide or make transparent media gallery while these transformations happen.

For this theme, I’d try using this CSS code (can be added to the “Custom CSS” setting, either in product information section or in Theme settings (cog icon):

@media (max-width:767px) {  /* on mobile */
  media-gallery {
    opacity: 0;             /* make media gallery transparent */
    transition: opacity 0.3s linear;
  }

  media-gallery:has(.swiper-wrapper[aria-live]) { 
    opacity: 1;             /* when slider initializes, make it visible */
  }
}
13

Hello @Iulia1

This type of flicker is usually caused by the product-gallery JavaScript initializing after the gallery HTML and images have already been rendered. During that brief moment, the browser displays the second slide in its default state, and then the theme’s slider script applies its final position, visibility, or opacity settings.

The Purity demo loads multiple product images directly in the initial product-page markup, so the issue is more likely related to the gallery’s initialization styles or JavaScript than image compression alone. (Purity Theme)

I would check the following:

  1. Test an untouched copy of the latest Purity theme

Go to:

Online Store → Themes → Add theme → Visit Theme Store

Install a fresh copy or update the theme, then preview the same product without publishing it. If the flicker still appears, it is most likely a theme issue and should be reported to NextSky support.

  1. Disable recently added app embeds

Temporarily disable image zoom, variant-image, product-gallery, review, or optimization app embeds. An app script may be re-rendering the gallery after the theme initializes it.

  1. Inspect the product gallery files

Depending on the theme version, look for files with names similar to:

  • main-product.liquid
  • product-media-gallery.liquid
  • product-gallery.liquid
  • component-slider.css
  • product-media.js
  • theme.js

Check whether inactive gallery slides have a visible default state before the slider receives its initialized class.

A common fix is to hide non-active slides until the gallery has initialized. For example:

product-media-gallery:not(.is-initialized) .product-media-item:not(:first-child) {
  visibility: hidden;
  opacity: 0;
}

However, the class names must be changed to match the actual Purity theme markup. Adding this code without confirming the correct selectors could hide the gallery permanently.

  1. Check the image loading attributes

The first product image should normally load eagerly because it is visible immediately. Secondary images can use lazy loading, but lazy loading by itself should not repeatedly change their visibility or position. Also check whether the second image has conflicting loading, animation, opacity, or transition attributes.

Since the issue happens on initial load without interaction, I would first test a clean, updated copy of the theme. If it also happens there, send NextSky support a screen recording, product URL, browser name, device type, and your Purity theme version. That will help them confirm whether it is a known gallery initialization bug.