Remove Zoom Option (Mobile)

Store Design
, , , , ,

Topic summary

Issue: User wants to disable the product image zoom feature on mobile devices only.

Solution Provided:
Multiple community members offered the same CSS-based fix:

  • Navigate to Admin → Online Store → Themes → Edit code
  • Locate the theme.css file (or base.css/style.css depending on theme)
  • Add this CSS snippet at the end of the file:
@media only screen and (max-width: 749px) {
  span.product-gallery__zoom-notice {
    display: none !important;
  }
}
  • Save changes and reload the page

Key Details:

  • The media query targets screens 749px or smaller (typical mobile breakpoint)
  • The display: none property hides the zoom functionality element
  • Users can identify the correct CSS class using browser developer tools (right-click → Inspect)

Status: :white_check_mark: Resolved - Original poster confirmed the solution worked successfully.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
2

Hello :cowboy_hat_face: ,

To remove the zoom option on your product pages specifically for mobile devices, you can add custom CSS to your website. Here’s a simple way to achieve this:

  1. Access your website’s CSS file:

    • Log in to your website’s admin panel.
    • Navigate to the theme customization section where you can add custom CSS. This is usually found under “Appearance” > “Customize” or similar, depending on your platform.

  2. Add the following CSS code:

    css
    Copy code

    @media (max-width: 767px) { .your-zoom-class { pointer-events: none; } }

    Replace .your-zoom-class with the actual CSS class that controls the zoom functionality on your product images.

  3. Save your changes:

    • After adding the custom CSS, save and publish your changes.
    • Clear your website’s cache if necessary.

This code uses a media query to target devices with a screen width of 767px or less, which typically covers most mobile devices. The property to disable interactions with the specified element, effectively removing the zoom functionality on mobile devices.

If you’re not sure about the class name, you can inspect the element using your browser’s developer tools (usually accessed by right-clicking on the element and selecting “Inspect”).

If you need further assistance, feel free to reach out!

1 Like