How to make Related Products a specific ratio - Squarespace 7.1

On Squarespace 7.1, the Related Products section typically pulls the “Related Product” images based on the ‘Gallery’.

You can override this by forcing the Related Products images into a consistent ratio using CSS. This guide shows you how to do that, using a square ratio as the example, and how to tweak it for other ratios.

What we’re going to do

We’ll use CSS to:

1. Give the Related Products image wrapper a fixed aspect ratio (for example 1:1 for a square).

2. Hide any overflow.

3. Make the product image fill that space and crop nicely.

If you want to change this ratio, then change the 1/1 to be something like 3/2.

---

Code:

Add this to your Custom CSS

.product-list-image-wrapper {
  margin-bottom: 1rem;
  .grid-image-wrapper {
    aspect-ratio: 1/1 !important;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}