Replace or hide the magnifier icon on every images on a product page on mobile

Store Design

Topic summary

Goal: remove or soften the magnifier (zoom) icon on product images for mobile, where hover doesn’t exist and the icon feels intrusive.

Proposed approaches:

  • Theme edit: find the product image zoom markup (e.g., product.liquid in Shopify’s Liquid templates) and hide the icon on screens <768px via CSS/conditional visibility. “Lightbox” here refers to the full-screen image preview overlay.
  • App solution: use a product image zoom app that can replace the icon with a transparent version or hide it on mobile while keeping tap-to-zoom.

Current blockers:

  • The OP can’t locate the relevant code; only sees card-product.liquid and can’t find “icon” or “zoom.” Another user also wants to hide/move the icon because it overlaps a discount badge.
  • A respondent mentions providing CSS in another thread, but no code snippet appears here.

Status: no concrete code posted; unresolved/ongoing. Next steps: identify the exact template/section controlling product images in the theme, apply a mobile-only CSS rule to hide the icon, or adopt an app with icon controls. Open question: where the zoom icon is defined in this specific theme.

Summarized with AI on December 11. AI used: gpt-5.
1

I think on hover, that magnifier icon with the + sign in the middle, to enlarge or trigger the lightbox preview, is okish but on mobile?? An icon on every photos… not very nice…

So I would like to either be able to replace the icon with a more subtle (transparent background icon) as there is no hover state on mobile.. or hide it… users are used to tap on photos… they don’t need an icon…

2

Hi @Futurisnow ,
This is Theodore from PageFly - Shopify Page Builder App.

Don’t like the zoom icon on product images for mobile in your Shopify store? Here are 2 solutions:

1. Hide the Zoom Icon on Mobile (Theme Editing):

  • Edit theme code (requires some knowledge).
  • Find the product image zoom code (e.g., product.liquid).
  • Locate the zoom icon visibility section and set it to hide on screens smaller than 768px (mobile).

2. Use a Theme App (More Flexibility):

  • Install a product image zoom app from the Shopify App Store.
  • Look for apps that allow:
    • Replacing zoom icon with a transparent one.
    • Hiding the icon on mobile while keeping zoom on tap.

Choose the option that best suits your comfort level and desired outcome.

Best regards,
Theodore | PageFly

3

I would prefer just to hide the icon on mobile… but I only find “Card-product.liquid” file… and I search for icon or zoom to change the visibility in the code but nothing shows up… can you help?

4

Did you ever figure this out? I am not on the same quest to move/hide the icon as it covers up a discount pill i’ve created.

1 Like
5

@Sapphire_Energy i think i have given you the css on other thread