Hi all.
I would like to increase the zoom on my product image as currently there is a really minimal zoom in on these. Is there an easy way to achieve this as none of the general theme settings seem to make any difference. Am using Impulse theme and store URL is https://carolinegardner.com/
Any advise welcome. Thanks!
Honestly, the image zoom is big enough and looks pretty neat.
It also zooms more when you double click on the image in view
Hi @davidfoster1983 ,
Are you referring to the zoom image on the product page, when clicking the image?
Please let me know, I will check it.
Hi @davidfoster1983 ,
As you mentioned, when clicking the zoom button, the image size change seems minimal. You can add the following style snippet to the Custom CSS of the product section or to the photoswipe.css file.
@media screen and (min-width: 1280px){
.pswp__zoom-wrap > img {
scale: 1.4;
}
}
*Result:
davidfoster1983:
Hi all.
I would like to increase the zoom on my product image as currently there is a really minimal zoom in on these. Is there an easy way to achieve this as none of the general theme settings seem to make any difference. Am using Impulse theme and store URL is https://carolinegardner.com/
Any advise welcome. Thanks!
Hi,
Hope this will help
Find main CSS file and Paste CSS code at the very bottom
CSS example
/* — Increase product image hover zoom (Impulse - try these selectors) — */
.product__photo,
.product-single__photo,
.product__media,
.product-single__media {
overflow: hidden;
}
.product__photo img,
.product-single__photo img,
.product__media img,
.product-single__media img {
transition: transform 0.35s ease;
transform-origin: center center;
}
/* change 1.6 to 2.0 for stronger zoom, 1.2 for weaker */
.product__photo:hover img,
.product-single__photo:hover img,
.product__media:hover img,
.product-single__media:hover img {
transform: scale(1.6);
}
Make sure your pictures are big enough (very important)