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

[DD_MOD]

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 : 

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

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: 

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

[namphan]

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!

[DD_MOD]

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

[namphan]

Hi @DD_MOD,

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

[DD_MOD]

Sure. Just added it again.

[namphan]

Hi @DD_MOD,

Please change all code:

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

[DD_MOD]

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.  

[namphan]

Hi @DD_MOD,

So do you want to add Lightbox Carousel?

I hope it helps!

[DD_MOD]

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?

[namphan]

Hi @DD_MOD,

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

[DD_MOD]

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.