Colorblock Theme > 'Click to Zoom' Focal Point > Mobile

Store Design
1

Hi there,

I would like to find out if there is a way to set the focal point on an image when a customer clicks to zoom on mobile.

For instance, on this product :

Product Image.PNG
Product Image.PNG1179×2556 506 KB

If the image is clicked on you get the zoomed in image, but this is what the customer will see:

Product Image Click2Zoom.PNG
Product Image Click2Zoom.PNG1179×2556 556 KB

I know that the customer can of course scroll on the image and get to the actual part of the image where the product is featured. BUT, I was wondering if there is anyway to pre-set the point that the images will zoom into. In this case I would select the point around the logo on the bag. and then if the customer clicked this image on the product page this would be what showed immediately:

Product Image Click2Zoom Focal Point.PNG
Product Image Click2Zoom Focal Point.PNG1179×2556 672 KB

The customer would then still be able to scroll around on the image. I have tried setting a focal point on the images but this doesn’t change anything in this case.

I hope this explanation makes sense.

Online store: www.mod.equipment

2

Hi @DD_MOD ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 749px) {
.product-media-modal__content img {
    width: 100%;
    height: auto;
}
}

or you can also follow this guide to convert it to zoom slider, it will work better.

I hope it helps!

3

Hey, thanks for the response - but the code didn’t change anything.

4

Hi @DD_MOD ,

Can you add the code again? I will check it again

5

Sure. Just added it again.

6

Hi @DD_MOD ,

Please change all code:

@media screen and (max-width: 749px) {
.product-media-modal__content img {
    width: 100% !important;
    height: auto;
}
}
7

Hi, @namphan - I see what you’ve suggested here with the code above. But this doesn’t answer my specific problem. I am not looking to decrease the size of the images when customers click to zoom. I wanted to know if I could set the focus point on the images when customers click the image. So that it zooms into a specific part of the image initially.

8

Hi @DD_MOD ,

So do you want to add Lightbox Carousel?

I hope it helps!

9

Hi @namphan - this is not exactly what I had in mind. But I think it looks like its the only option for a clearer more accurate image zoom. Would I need to pay for the access to steps 5 through 7?

10

Hi @DD_MOD ,

Have you checked the demo at the post? Is it what you want? :blush:

11

I did check the demo - it looks like its the best solution that I can find to the issue I’m facing. I did think there would be a simpler solution though. I manage our site myself and I’m no coding expert. I don’t feel comfortable having to change this and copy and paste theme code if there is an update. Thanks for trying to help out.