Show Full Product Image (7.0 & 7.1)

On a Squarespace product detail page, there isn’t a native option to show the full product image. You can only change the aspect ratio, which may lead to some of the product images being cut off. In a summary block, you can set to ‘Auto’ to show the full image, but there isn’t an option to show the entire image on commerce pages yet. As a workaround, you can use the code below.

For 7.0 Brine family sites, put the following in Design -> Custom CSS:

/* Show Full Image On Product Page */
.ProductItem-gallery-slides-item-image.loaded {
    object-fit: contain !important;
    object-position: middle;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}
.ProductList-image {
    object-fit: contain !important;
    object-position: middle;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

For 7.1 sites, put the following in Design -> Custom CSS:

/* Show Full Image On Product Page */
.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: top !important;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}