---
title: Disable product image zoom
shortDescription: Turn off the built-in zoom and pan effect on your product page images with a custom CSS and JavaScript snippet in your header code.
articleType: Tutorial
primaryTopic: disable-product-image-zoom
categories:
  - Store Design
  - Creator Dashboard
tags:
  - store-design
  - custom-css
  - custom-javascript
  - product-page
  - image-zoom
  - theme-customization
  - code-editor
  - header-code
  - product-display
  - gallery-image
tasks:
  - Turn off product image zoom on product pages
  - Add custom CSS to the storefront header code
  - Add custom JavaScript to the storefront header code
  - Override theme inline styles with a MutationObserver
  - Access the advanced code editor in site design
terms:
  - disable product image zoom
  - turn off image zoom
  - remove zoom effect
  - product image pan
  - mouseover zoom
  - hover zoom
  - gallery image holder
  - custom code
  - header code
  - CSS override
  - JavaScript override
  - MutationObserver
  - product page display
  - background-image none
labels:
  - store-design
  - product-page
  - custom-code
contextString: Available on all Fourthwall plans. Requires access to the advanced code editor in the site designer.
breadcrumbPath: Getting started > Design my storefront > Disable product image zoom
relatedModules:
  - name: theme-editor-pages
    route: /admin/dashboard/store-design/pages/
  - name: theme-settings-general
    route: /admin/dashboard/store-design/general/
  - name: theme-editor-layout-home
    route: /admin/dashboard/store-design/layout/index
path: getting-started/design-my-storefront/disable-product-image-zoom
last_updated: '2026-08-10'
---

# Disable product image zoom

Fourthwall themes add a zoom and pan effect to product page images: when a customer hovers over a product photo, the image magnifies and follows their cursor. There is NO theme setting to turn this off. You can disable it by pasting a CSS and JavaScript snippet into your shop's header code under **Site design** > **Edit code (advanced)**.

## How the product image zoom effect works

The zoom effect is driven by JavaScript, not by a stylesheet rule. That detail determines 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 that div.
- When the effect is active, the theme sets the attribute `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 image shows through instead.

Because the theme applies these changes to the parent `div` through inline styles written by JavaScript, a plain CSS rule on the `img` tag cannot stop it.

## Why CSS alone does not disable the zoom

A CSS rule targeting `.gallery__image-object` (the `img` tag) has NO effect, because the zoom is not 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 override rules in your stylesheet, and the theme's script rewrites them on every mouse move. Disabling the zoom reliably takes two pieces:

- **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.

## How to 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**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) in your dashboard.
2. Scroll to the bottom of the left-hand menu and click [**Edit code (advanced)**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/advanced?redirect).
3. Check **Enable header code**, then paste the following into the box:

```html
<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>
```

4. The change saves and applies automatically. Product images now display without the zoom and pan effect on hover.

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 be overwritten. The observer re-applies your overrides each time the theme changes the element, which keeps the zoom off.

**UI Path:** Dashboard > Site design > Edit code (advanced) > Enable header code
**Expected Result:** Hovering a product image shows the normal photo with no magnification and no panning.

## What each part of the snippet 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 the image a customer sees zoomed on hover.
- **`background-position: center !important`**. Locks the background so it cannot 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.

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

The zoom is not applied to the `img` tag (`.gallery__image-object`). It is 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 a 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 back on.

## Troubleshooting & Common Issues

**Problem:** "I added CSS to `.gallery__image-object` but the zoom still works."
**Solution:** You are targeting the wrong element. The zoom lives on the parent `.gallery__image-holder`. Use the full snippet above, which targets the holder and includes the `MutationObserver`.

**Problem:** "The zoom is gone but my product image is now invisible or faded."
**Solution:** The theme fades the `img` out to reveal its background zoom. Confirm the `opacity: 1 !important` rule on `.gallery__image-holder .gallery__image-object` is present in both the `<style>` block and the JavaScript.

**Problem:** "The zoom turns off, then comes back when I move my mouse."
**Solution:** The `MutationObserver` is missing or is not running. Confirm the full `<script>` block is pasted into the header code and that **Enable header code** is checked.

**Problem:** "Nothing changed after I pasted the snippet."
**Solution:** Confirm **Enable header code** is checked under **Site design** > **Edit code (advanced)**, then hard-refresh your product page to clear the cached theme assets. If it still does not apply, contact Fourthwall support at support@fourthwall.com with your shop URL and the product page you are testing.