Purity Theme Image Flicker Fix | Shopify Product Gallery Solutions

Hey everyone, it's your friendly Shopify expert dropping in with some insights from a recent community discussion! We've all been there: you launch a beautiful new product page, only to notice a tiny, annoying flicker or blink from your product images. It's a small detail, but it can really impact how professional your store feels. This exact issue popped up recently with the Purity theme, specifically the product gallery's secondary images, and the community had some fantastic ideas on how to tackle it.

Our fellow store owner, Iulia1, kickstarted the conversation, noticing that when their product page first loaded, the second image in the gallery would briefly flicker/flash before settling. This wasn't happening due to interaction; it was right there on initial page load. Sound familiar? Iulia1 even shared a helpful GIF to illustrate the problem:

Understanding the Flicker: The Flash of Unstyled Content (FOUC)

So, what's actually going on here? As sadik_ShopiDevs and HamidEjaz pointed out, this kind of flicker is typically a classic case of what we in the web world call FOUC – Flash of Unstyled Content. Essentially, your browser renders the HTML and images first in their default state. Then, a split second later, the theme's JavaScript kicks in to initialize the product gallery (think sliders, carousels, etc.). During that brief gap, the browser might show all your gallery images laid out, or the second image in an unintended position, before the JavaScript applies its final styling and positioning. It's like seeing behind the curtains for a moment!

First Steps: Theme Integrity & App Conflicts

Before diving into code, it's always smart to rule out the simpler causes. sadik_ShopiDevs gave us a great starting point:

Test an Untouched Copy of Your Theme: Go to Online Store → Themes → Add theme → Visit Theme Store. Install a fresh copy of the latest Purity theme (don't publish it yet!) and preview the same product. If the flicker persists, it's likely a theme-level bug that NextSky support (Purity's developers) should address.
Disable Recently Added App Embeds: Apps, especially those related to image zoom, variant images, product galleries, or optimization, can sometimes re-render the gallery after the theme has already initialized it. Temporarily disable these types of apps to see if the flicker disappears.

The Core Fix: CSS to Control Gallery Visibility

The most common and effective solution discussed by several experts in the thread (sadik_ShopiDevs, tim_tairli, HamidEjaz) involves using CSS to hide inactive gallery slides until the JavaScript has fully initialized the slider. This prevents the browser from showing them prematurely.

The trick is to identify the correct CSS selectors for your Purity theme. You'll need to use your browser's developer tools (right-click > Inspect Element) to peek at the HTML structure of your product gallery.

Method 1: Hiding Non-Active Slides Until Initialized (General Approach)

sadik_ShopiDevs suggested a general approach that looks for a class indicating the gallery isn't yet initialized:

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

How to use this: You'd add this CSS to your theme's custom CSS section (usually in Online Store → Themes → Customize → Theme settings (cog icon) → Custom CSS, or sometimes directly in the product information section). Remember, you'll need to replace product-media-gallery, is-initialized, and product-media-item with the actual class names your Purity theme uses. If you add this without the correct selectors, you might accidentally hide your entire gallery!

Method 2: Mobile-Specific Transparency with Transition

tim_tairli offered a clever, mobile-specific solution that makes the gallery transparent initially and then fades it in once the slider (specifically a Swiper.js instance, which is common) is ready. This is great for a smoother visual transition.

@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 */
  }
}

This code targets mobile screens (max-width:767px). The :has() selector is a powerful CSS feature that checks if an element contains another specific element. In this case, it waits until the media-gallery element contains a .swiper-wrapper with the aria-live attribute, which typically indicates the Swiper slider has initialized.

Method 3: Targeting a Slider-Ready Class (e.g., Flickity)

HamidEjaz provided another excellent example, focusing on a common pattern where sliders add a class like flickity-enabled once they've initialized. You'd hide inactive slides until this class appears:

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

Again, the key is to use your browser's developer tools to inspect the product gallery. Look for the main container element of your media items and see what classes are added to it once the slider is fully loaded. It might be flickity-enabled, swiper-initialized, is-loaded, or something similar.

Checking Image Loading Attributes

Finally, let's talk about how your images are told to load. Moeed and sadik_ShopiDevs both highlighted the importance of image loading attributes:

The first product image should ideally load eagerly because it's immediately visible.
Secondary images can use lazy loading (loading="lazy"), which defers loading until they're about to enter the viewport. While lazy loading is great for performance, if it's implemented poorly or conflicts with the gallery's JavaScript, it can contribute to flickers or re-renders.

Moeed even shared a screenshot of how lazy loading might look in dev tools:

If you suspect lazy loading is the problem, Moeed suggested checking your theme customization settings for an option to disable it. If not there, you might need to dig into your theme files (e.g., product-media.liquid or main-product.liquid) and manually remove loading="lazy" from the secondary image tags.

Another related point from Moeed was to confirm if the issue was blurry images or actual flashes. Iulia1 confirmed it was indeed flashes, not blurriness, as shown here:

Hopefully, these community-driven solutions give you a clear path to troubleshooting and fixing that pesky product image flicker on your Purity theme. It might take a bit of detective work with those browser developer tools, but getting rid of that flicker will make a huge difference to your store's professional feel and user experience. If you're looking to start your own Shopify store and want to avoid these kinds of headaches, remember that choosing a well-supported theme and understanding basic web development principles can save you a lot of time and effort in the long run. Good luck, and happy selling!

Solving the Purity Theme Flicker: A Community-Backed Guide to Flawless Product Galleries