Disable HOVER ZOOM EFFECT on product page

Ron4674
Tourist
30 0 0

Hi,

 I'm not sure if anyone has similar experiences but I'd like to disable the "mouse hover zoom" effect for product detail images at the bottom of the product page.  Mainly because it could interfere with some images and i'd rather not have the effect.  I assume it's a simple code but I've been looking into liquid but i still could'nt find the code for it.

I'm using Narrative theme and here's my website: https://casebubble.com/

What i really wanted is only the first image to anot have the zoom effect, image 2,3 so on could have the zoom, let me know please, any input appreciated:)

Thanks

Replies 7 (7)
KarlOffenberger
Shopify Partner
1873 184 863

Hi Ronald,

If you want to diable that effect only for the product detail section, then you need to go edit your theme's stylesheet by navigating to Online store > Themes > in the Actions drop down select Edit code and once the theme editor's file browser loads, open Assets / theme.scss.liquid.

You will need to find this part of code

.product__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.25s ease-out;

  &:hover,
  a:focus > & {
    @include transform(scale(1.05));
  }

  .product__image-wrapper--empty & {
    cursor: default;
  }
}

And replace it with

.product__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.25s ease-out;

  .product__image-wrapper--empty & {
    cursor: default;
  }
}

That's it. As you can see, you only need to remove the hover and focus rule.

Bare in mind, this only removes the hover zoom effect on the product detail page, not collections etc.

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
May
Shopify Staff
Shopify Staff
333 33 166

Hi, Ronald and Karl!

This is May from Shopify.

Thank you for your question and contribution. That is a great suggestion by Karl above. I recommend giving his tutorial a shot. Since you will be editing your theme.scss.liquid file, it is important to note that once you make changes to ‘theme.scss.liquid’, you cannot revert back to older versions. Therefore, we strongly recommend duplicating your theme before editing your code, to ensure that your customers aren’t affected if you see any unintended results! Or, if you’d like to change your product image back to what you had before, you can always rely on your backup file.

If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

Let me know if you have any other questions about your theme. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support


 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ron4674
Tourist
30 0 0

Hello Karl!

Thank you for the input, it worked perfectly, really appreciated!!!

Ron

sharonsmith23
New Member
1 0 0

Hey Ronald, 

 

How would I do this when I link to any collections? I pretty much just want to get rid of the hover zoom on most parts of this theme. Thanks!

mrogers15
New Member
1 0 0

Does anyone know how to disable the zoom feature in Debut? can't find the code talked about above. 

Apps_On_Demand
Shopify Expert
78 6 11

Hello @mrogers15 

 

We have checked your requirement of hiding zoom feature on Debut you need to follow these steps: -

 

1. Login to admin.

2. Click on Online Store.

3. Customize Live Theme.

4. Select Product Page and then you will get the option for enabling/disabling Zoom feature on product page.

 

Please check the screenshot.zoom_image.png

 

 

Thanks

Matt

Apps On Demand

Shopify Expert: https://experts.shopify.com/ultimate-apps
jpc_202020
New Member
1 0 0

Hello! I am using Narrative and would like to disable zoom in the Gallery feature. Is there a quick code fix for this? Thanks a lot!