"Refresh" theme: Trying to remove the zoom in magnifying glass icon on product images

Technical Q&A
1

I’m working on customizing the new “Refresh” store 2.0 theme, and I noticed that on mobile, the product image has a magnifying glass icon that is always visible. I don’t need this for my products on mobile and it covers part of the product. On the desktop website, the icon appears when you hover over the image, which I am okay with. I’m wondering how I could hide the magnifying glass icon on mobile, but still keep the icon on desktop. If anyone has any ideas on how to solve this I would greatly appreciate it.

This is the icon I’m referring to on a product page image:

Screenshot 2022-07-02 214248.jpg
Screenshot 2022-07-02 214248.jpg214×274 5.22 KB

1 Like
2

@CozyCampfire

oh sorry for that issue can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-main-product.css ->paste below code at the bottom of the file.
.product__modal-opener .product__media-icon {display: none;}
2 Likes
3

Thank you!

1 Like
4

@CozyCampfire

its my pleasure to help us