How to stop image preview being zoomed in? (Refresh Theme)

Technical Q&A
1

My product previews are getting zoomed in and zoom in even more when you hover over them on desktop.

I would like to disable both of these features and just have the image displayed in it’s full, regular size.

You can check my site freundapparel.com and see the socks I just posted are zoomed in on the home page.

2

Hi @wderge3rt54 !

I hope you are doing good and welcome to the Shopify Community!

This is MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

You can just add this code on your css file- .product__media-icon, .product__media-toggle.quick-add-hidden {display: none !important;}

Hope this helped!

Regards.

3

Hi @wderge3rt54 ,

  • Turn off zoomed: You just need to choose to display Image ratio as ‘Adapt to image’, it will display properly with the product image size. Refer:

Screenshot.png
Screenshot.png410×867 22.3 KB

  • Zoom in even hover: Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.card:hover .media.media--hover-effect>img:first-child:only-child, .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
    transform: none !important;
}

Hope it helps!

4

Hey @wderge3rt54 !

I know that a couple people have submitted some coding changes to help you with your website, but if you are still looking for additional help you can contact the Shopify support team to assist you further. When you are using the basic subscription plan or higher you get 1 hour of coding changes to any Shopify made theme. Since you are using the Refresh theme you can submit this request (and any others you have) to our support team. I hope this helps and let me know if you have any questions.

5

where exactly on my css file?

6

Hi @wderge3rt54 ,

You can refer:

Screenshot.png
Screenshot.png1646×678 77.3 KB

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file

7

Hi, @wderge3rt54

Have you taken a look at this tutorial yet? It won’t disable the zoom but it will make it look presentable on all devices. I believe it can be a potential solution for the issue you’re dealing with.

I hope it helps.

Kind regards,
Diego