How to disable zoom on 'Hover to Reveal Second Image' Shopify Impulse Theme

Store Design
, ,
1

Hi!

How can we disable the zoom function on the ‘hover to reveal second image’ option in the shopify impulse theme?

My store is: https://la-gentile.com/

Hope someone can assist.

Kind regards, Els

2 Likes
2

Hi Els ,

Nice store! For the Impulse theme, the zoom effect on hover is usually controlled by CSS. You can try adding this custom CSS in your theme editor (Online Store → Themes → Customize → Theme settings → Custom CSS):

.product-card__image-wrapper:hover img {
  transform: none !important;
}

This should remove the zoom when hovering over the product image to reveal the second one.

If it doesn’t fully work, it might be because of how Impulse handles image transitions, in which case you could adjust the .hover-effect or related class in the CSS.

Hope this helps!.

3

Hello @lagentilestore

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.product-card__image-wrapper:hover img {
  transform: none !important;
}
4

Hi!

Thank you for your help. For some reason I am unable to save the folder.
Please see screenshot.. Any tips?

Scherm­afbeelding 2025-08-21 om 11.15.32
Scherm­afbeelding 2025-08-21 om 11.15.323242×976 105 KB

1 Like
5

I can see the issue.

You are trying to paste the provided css in the wrong folder.
Would you like to share the 4 digits collab code in the p/m so that I can put it in the correct theme file.
Waiting to hear back from you.
Thanks

6

Hi! Thanks for sharing the screenshot. That error happens because assets/theme.css is a generated file and Shopify doesn’t allow it to be edited directly.

Instead of editing theme.css, you can:

  1. Create a new custom stylesheet (for example assets/custom.css) and paste your CSS there.

  2. Then include it in your theme by adding this line inside your theme.liquid just before </head>:

{{ 'custom.css' | asset_url | stylesheet_tag }}
  1. You can also add your CSS inside Online Store > Themes > Customize > Theme settings > Custom CSS if your theme supports it.

This way you will not get the “Cannot overwrite generated asset” error, and your changes will still load correctly on the storefront.

7

I provide you the solution for “Disabling the Zoom effect”. Would you like this post and “Mark as Solution“.
Thanks

8

Hi @lagentilestore ,
It seems that your issue has been resolved. If there’s anything else, please feel free to share it with me — I’ll be happy to assist you further.