Skip to main content

Disable product image zoom

Updated August 10, 2026

Turn off the built-in zoom and pan effect on your product images with a custom code snippet

Fourthwall themes add a zoom and pan effect to product images. When a customer hovers over a product photo, the image magnifies and follows their cursor. There's no theme setting to turn this off, but you can disable it with a short CSS and JavaScript snippet in your shop's header code.

How the zoom effect works​

The zoom effect is driven by JavaScript, not by a stylesheet rule. This matters because it changes how you disable it.

  • The effect lives on .gallery__image-holder, the parent div that wraps each product image. It does not live on .gallery__image-object, the img tag inside it.
  • When the effect is active, the theme sets data-zoom-enabled="true" on the .gallery__image-holder element.
  • On mouseover, the theme's script updates the holder's inline style in real time. It loads the product photo as a background-image on the holder, then shifts background-position to follow the cursor. The img child is faded out so the magnified background shows through.

Because the theme applies these changes to the parent div through inline styles set by JavaScript, a plain CSS rule on the img tag can't stop it.

Why CSS alone doesn't work​

A CSS rule targeting .gallery__image-object (the img) has no effect, because the zoom isn't applied there. The zoom is applied to the parent .gallery__image-holder through inline styles that the theme's JavaScript writes directly onto the element.

Inline styles set by JavaScript beat rules in your stylesheet, and the script rewrites them on every mouse move. To disable the zoom reliably, you need two things:

  • CSS that neutralizes the background image and locks the background position on .gallery__image-holder.
  • JavaScript with a MutationObserver that catches the inline style changes as the theme writes them and overrides them in real time.

Disable the zoom with custom code​

Add the snippet below to your shop's header code. It hides the zoomed background, stops the pan, and keeps the product img fully visible.

  1. Go to Site design in your dashboard.
  2. Scroll to the bottom of the left-hand menu and click Edit code (advanced).
  3. Check Enable header code, then paste the following into the box:
<style>
  .gallery__image-holder {
    background-image: none !important;
    background-position: center !important;
  }
  .gallery__image-holder .gallery__image-object {
    opacity: 1 !important;
  }
</style>

<script>
  function disableGalleryZoom(holder) {
    holder.style.setProperty('background-image', 'none', 'important');
    holder.style.setProperty('background-position', 'center', 'important');
    const img = holder.querySelector('.gallery__image-object');
    if (img) {
      img.style.setProperty('opacity', '1', 'important');
    }
  }

  function watchGalleryHolders() {
    const holders = document.querySelectorAll('.gallery__image-holder');
    holders.forEach(function (holder) {
      disableGalleryZoom(holder);
      const observer = new MutationObserver(function () {
        disableGalleryZoom(holder);
      });
      observer.observe(holder, {
        attributes: true,
        attributeFilter: ['style', 'data-zoom-enabled'],
      });
    });
  }

  document.addEventListener('DOMContentLoaded', watchGalleryHolders);
</script>
  1. The change saves and applies automatically. Product images now display without the zoom and pan effect on hover.
note

The MutationObserver is the key part. The theme's script rewrites the holder's inline style on every mouse move, so a one-time reset would get overwritten. The observer re-applies your overrides each time the theme changes the element, which keeps the zoom off.

What each part does​

Each piece of the snippet targets a specific part of the zoom mechanism:

  • background-image: none !important. Removes the magnified product photo the theme loads onto .gallery__image-holder. This is what a customer sees zoomed on hover.
  • background-position: center !important. Locks the background so it can't pan with the cursor.
  • opacity: 1 !important on .gallery__image-object. Keeps the product img fully visible. The theme fades this img out so its background zoom shows through, so forcing full opacity keeps the normal image on screen.
  • The MutationObserver. Watches each holder's style and data-zoom-enabled attributes and re-applies the overrides whenever the theme's script changes them.

Frequently Asked Questions​

Why doesn't a CSS rule on the product image turn off the zoom?​

The zoom isn't applied to the img tag (.gallery__image-object). It's applied to the parent div (.gallery__image-holder) through inline styles that the theme's JavaScript writes directly onto the element. Inline styles set by script override your stylesheet, so a CSS rule on the img has no effect.

Do I need the JavaScript, or is the CSS enough?​

You need both. The CSS handles the base state, but the theme's script rewrites the holder's inline style on every mouse move. Without the MutationObserver in the JavaScript, those inline changes override your CSS and the zoom comes back.

Will this affect any other images on my shop?​

No. The snippet only targets .gallery__image-holder and its .gallery__image-object child, which are the product image gallery elements on product pages. Other images on your shop are unaffected.

What is the data-zoom-enabled attribute?​

data-zoom-enabled="true" is an attribute the theme sets on .gallery__image-holder to mark that the zoom effect is active on that image. The MutationObserver in the snippet watches this attribute so it can re-apply your overrides whenever the theme toggles the zoom on.

If you have any questions, do not hesitate to contact us at support@fourthwall.com.

Was this helpful?