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

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

DD_MOD
New Member
6 0 0

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

 

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

 

Product Image Click2Zoom.PNG

 

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

 

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

 

Replies 10 (10)

namphan
Shopify Partner
1633 207 220

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!

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
DD_MOD
New Member
6 0 0

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

namphan
Shopify Partner
1633 207 220

Hi @DD_MOD,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
DD_MOD
New Member
6 0 0

Sure. Just added it again.

namphan
Shopify Partner
1633 207 220

Hi @DD_MOD,

Please change all code:

@media screen and (max-width: 749px) {
.product-media-modal__content img {
    width: 100% !important;
    height: auto;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
DD_MOD
New Member
6 0 0

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
Shopify Partner
1633 207 220

Hi @DD_MOD,

So do you want to add Lightbox Carousel?

I hope it helps!

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
DD_MOD
New Member
6 0 0

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
Shopify Partner
1633 207 220

Hi @DD_MOD,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
DD_MOD
New Member
6 0 0

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.