Disable Auto Zoom / Cropping on Individual Product Images

fantasiummedia · October 4

Hi All,

I am selling prints, and would like to disable the auto-zoom on each individual product so the buyer can see a bigger scale rendition of the print they are buying. My template does not have an option to disable autozoom on images. I am using Lange.

I was able to make this happen on the main products page using the code below:

.ProductList-outerImageWrapper {
     position: static;
     padding-bottom: 0px !important;
 }
 
 .ProductList-innerImageWrapper {
     position: static;
     margin-left: auto;
     margin-right: auto;
 }
 
 .ProductList-image {
     width: 100% !important;
     height: auto !important;
     top: 0px !important;
     position: static !important;

Unfortunately I'm not savvy enough to get that to apply to the individual product.

Here is a link to a good example of an image that is being cropped: https://www.fantasiummedia.com/prints/stars-over-lake-atitlan

Offering a print of your choice at cost for anyone that can help!

brandon · October 9

Hi @fantasiummedia.

Here's how I'd approach it. Note that object-fit is focused on fairly modern browsers.

.ProductItem-gallery-slides-item-image.loaded {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides::before {
    padding-bottom: 0 !important;
}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
    position: relative !important;
}

Let me know how that works for you.

Edited October 9 by brandon

fantasiummedia · November 1

@brandon I'm just now seeing this. That worked perfectly, thank you so much! DMing you a code for 50% off anything on the site if you see anything you like.

Disable Auto Zoom / Cropping on Individual Product Images

Question

fantasiummedia 1

Share this post

Link to post

2 answers to this question

Recommended Posts

brandon 8,849

Share this post

Link to post

fantasiummedia 1

Share this post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources