How do I customize the product image zoom on Squarespace?

Squarespace 7.1 uses a lightbox-style zoom on product images by default. You can adjust the zoom cursor, transition speed, and overlay background to match your brand.

The .ProductItem-gallery-slides-item-image container handles the zoom interaction. You can also target the lightbox overlay with .sqs-lightbox-meta to restyle the expanded view.

.ProductItem-gallery-slides-item-image {
  cursor: zoom-in;
  transition: transform 0.4s ease;
}
.ProductItem-gallery-slides-item-image:hover {
  transform: scale(1.03);
}
.sqs-lightbox-meta {
  background: rgba(0, 0, 0, 0.85);
}