roll over magnifying image with text impusle theme

Store Design
1

Can I have my image when I roll over on it to magnify. I want it on the bottle that is directly under the slideshow.

password: gawtea

1 Like
2

@benjamids

oh sorry for any issue i have checked but i can’t see any issue can you please share issue image or video?

3

Hello @benjamids ,

We have checked your issue and will suggest you the following solution.

One cannot enable magnifying functionality on the image section which you are using below the Slideshow section with the theme. However, it can only be done through custom code.

You need to follow the below steps for getting the magnifying functionality in any image section of your theme.

Step 1: Go to shopify admin > online store > theme > click on action of a theme > edit code

Step 2: Open the section file containing images for adding magnifying functionality.

Step 3: You need to wrap the IMG tag with a DIV tag containing the class ‘img-magnifier-container’

Step 4: Add some styling on the top of the section file

* {box-sizing: border-box;} .img-magnifier-container { position:relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; }

Step 5: Add Javascript code just above the {% schema %} tag in the section file

Step 6: Call the function with id of that image

That’s all. Hope it helps. Let us know if you need any more help.

All the best,

Team CedCommerce

4

Thank you for the reply! How do I open the section file containing images for adding magnifying functionality?

1 Like
5

I am looking to add magnifying or zoom in option when I roll my mouse over this image displayed below