Shopify themes, liquid, logos, and UX
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
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!
Hey, thanks for the response - but the code didn't change anything.
Hi @DD_MOD,
Can you add the code again? I will check it again
Sure. Just added it again.
Hi @DD_MOD,
Please change all code:
@media screen and (max-width: 749px) {
.product-media-modal__content img {
width: 100% !important;
height: auto;
}
}
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.
Hi @DD_MOD,
So do you want to add Lightbox Carousel?
I hope it helps!
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?
Hi @DD_MOD,
Have you checked the demo at the post? Is it what you want? 😊
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.
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024