How can I disable the image zoom on second images in Shopify Impulse Theme

[lagentilestore]

Hi!

How can we remove the zoom on the ‘Hover to reveal second image’ option on Shopify Impulse theme?
See red line on attached image. Because of the zoom, images are now cut off..

Hope someone can assist!

[AsadSani]

. Inspect the Theme Settings- Check if there’s a built-in setting in the Impulse theme customization options.

• Go to Online Store > Themes > Customize, then look for an option related to the product card or image hover effect.

2. Modify CSS

If no option exists, you can override the zoom effect in the theme’s CSS.

• Go to Online Store > Themes > Edit Code.

• Locate the theme.css or style.css file in the Assets folder.

• Add the following CSS:

  css

  Copy code

  .product-item:hover .second-image { transform: none !important; /* Disables zoom effect / } .product-item .second-image { transition: none !important; / Disables animation */ }

3. Adjust JavaScript (if necessary)

If the zoom effect is implemented via JavaScript, you may need to disable or modify the related script.

• Look for the JavaScript file controlling the hover effect, usually in the Assets folder (e.g., product.js or hover.js).

• Search for functions like scale, zoom, or transform related to the .second-image or similar selectors.

• Comment out or adjust the code to prevent the zoom effect. For example:

  javascript

  Copy code

  // Disable zoom effect document.querySelectorAll(‘.second-image’).forEach((image) => { image.style.transform = ‘none’; });

4. Test Changes- Clear your browser cache or use incognito mode to test the changes.

• Check if the second image now displays correctly without the zoom.

5. Backup Your Code

Always make a backup of your theme before making changes. Use the Download theme file option in Shopify.

[theycallmemakka]

Hi @lagentilestore

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka