Zoom better on product images

Store Design
,
1

Hello friends,

I coming here again for your help because I’ve noticed that many of my customers, they have friction when it comes to zooming in on images.

My theme, Motion, has a magnifying glass on the bottom corner of the images and many times customers keep pressing the image, before they realize they actually need to press the magnifying glass.

Now, I’ve had someone do this in the past for me but the execution wasn’t great, because when you’d leave the zoomed image, it would glitch and not show the thumbnails for 1 or 2 seconds.

Is there a clean and effective way to do this? I just want to have customers click the image to enter zooming mode.

nacaduct.com is my website.

Thank you so much.

4

Thank you for your reply.

In my ignorant mind, I have the slight idea that what done was that, where the magnifying glass was “zoomed” over the whole image, making it so that when you clicked the image, it would do the same as pressing the magnifying glass.

How can I easily test this to see if I can solve my little friction?

5

Hi,

Do you want talk about main product image on product page, right?

I checked on it when i hover to image has an icon magnifying glass show and when press click the icon will zoom-in, that is behavior normal zoom. so, what is your expected here?

6

Hello there,

Your explanation is not according to what I notice. Can you share more details about that. Right now on clicking the product titles leads to the open a image model and zoon-in effect works when we click on that. So there is no zoom-in icon on the product media.

7

Unfortunately I’m not being able to see the best reply I got so far but, to make it clear, at the moment, the way customers car zoom in on my main product image is by clicking the magnifying glass on the corner of the image. I see them clicking the middle of the image, multiple times. I’d like it for the zoom to happen as soon as they click the image.

8

Try this code in your product info section “Custom CSS”
It stretches the button to cover entire slide while keeping similar look.

button.product__photo-zoom {
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: end;
  background: radial-gradient(white 70%, transparent 70%) 100% 100% no-repeat;
  border-radius: 0;
  background-size: 2rem 2rem;
}

Note however that having entire image clickable vs a small button, may potentially lead to false zoom triggers when trying to scroll the slider.

9

Thank you for the code. Ran into a little issue where I have reached the maximum amount of characters on the CSS window for the product info section, but duplicated the page view and it does seem to work. Not sure if it’s my mind or if the sliding is now a bit laggy and also the zoom out animation does seem not perfect.

Will test it a bit more before applying it to the main product template.

Also, is there a way around the character limit on the CSS window?

10

It should not affect any animations.
I did not expect it to affect sliding as well, except for possible false zoom clicks.
But testing is a king.

Unfortunately, there is no way around the character limit.
However, you may move this code from the section setting Custom CSS (where limit is 500) to Theme Settings-> Custom CSS (the limit is 1500 there).

If that one is full too, you can always add a “Custom liquid”/“Custom Code” section and add CSS there, wrapped between <style> and </style> tags.
This has a much higher limit.

You can add this section to “Footer” section group and the code will run on every page, or add it in the “Template” area – then it will only apply on pages with this template assigned.

Finally, you should be able to edit your theme assets, but I am not a huge fan of that.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it