Disable HOVER ZOOM EFFECT on product page

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

0 Likes
Shopify Partner
1838 173 597

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!

I turn coffee in to code - since 1998
0 Likes
Shopify Staff
Shopify Staff
335 31 76

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

0 Likes
Tourist
30 0 0

Hello Karl!

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

Ron

0 Likes
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!

0 Likes