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

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

Futurisnow
Excursionist
14 0 3

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

 

 

Replies 2 (2)

PageFly-Theodor
Shopify Partner
691 86 102

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Futurisnow
Excursionist
14 0 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?