How to Resize Product Images in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

In Squarespace 7.1, Shop (product list) pages will frequently display product thumbnails at a larger size by default. For some brands, this might be cool to go with, but there are many store owners who would want a simpler, compact grid that shows up more than one set of products without breaking the page.

The good news is, with some custom CSS, you can easily override those dimensions and be in complete control of your product image sizes, without breaking the layout of your product detail pages.

Reasons you should resize product thumbnails

Let’s take a look at some benefits of resizing product images on your Shop:

  • Improves visual balance by preventing oversized thumbnails

  • Provide more items per row; they become more visible.

  • Improves mobile scrolling and mobile responsiveness.

  • Brand standing - Modern, minimal feel that elevates brand aesthetics

  • Gives you a touch of professionalism, especially for stores with a huge catalog.

How It Works

We’ll add some CSS that targets just the product grid thumbnails, not the individual product pages. You can:

  • You can have a custom Max Width on your product images.

  • Use object-fit properties for better image scaling

  • Apply behaviors separately on desktop and mobile

  • Include optional hover effects for added interaction.

Step-by-Step Implementation

Step 1: Access the CSS Editor

In your Squarespace site:
Go to Pages → Custom code → Custom CSS

Step 2: Add This Custom CSS

Copied!

/* Resize product images on product list/grid pages */
.products.collection-content-wrapper .grid-item .grid-item-image {
  object-fit: contain !important;
  margin: auto;
}
/* Mobile-specific styling */
@media screen and (max-width: 767px) {
  .products.collection-content-wrapper .grid-item .grid-item-image {
    max-width: 100%;
    object-fit: cover !important;
  }
}

Tip: You can increase or decrease the max-width value to customize the size per your branding needs.

Optional Enhancements

1. Add a Hover Zoom Effect

Create subtle interaction with a smooth zoom animation on hover:

Copied!

.ProductList .ProductList-item-image img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

This effect adds a layer of polish and visual engagement, especially on desktop.

Uniform Box Sizing for All Products

Want every product to appear in the same-sized box, regardless of image dimensions?

Copied!

.grid-item .grid-item-image img {
  height: 220px;
  width: 100%;
  object-fit: cover;
}

This is ideal for shops that want a strict grid layout with equal-sized product cards.

Best Practices & Customization Ideas

  • Edit padding and spacing to balance the amount of white space between products

  • Pair with borders or drop shadows for a card-like look

  • Use object-fit: cover for a uniform, edge-to-edge photo crop

  • Check desktop as well as mobile to confirm the layout behaviour is consistent

Final Thoughts

Product Grid: Your product grid is the most important aspect of your shopping experience. By tweaking the size and behavior of your product images in Squarespace 7.1, you’re going to make sure that your services or products are presented in a clean, organized, and user-friendly way without needing to pull in third-party plugins or go back for a heavy redesign.

Frequently Asked Questions (FAQ)

1. Why are my Squarespace 7.1 product images huge?

Squarespace 7.1 uses huge product thumbnail sizes to establish an oversized graphic layout out of the box. But that can be too much or off-balance for anyone running lots of product-featured stores.

2. How can I modify scaled product images do not affect on product detail page?

Yes. The custom CSS included in this tutorial specifically refers to product images on the product list (Shop) pages, not single product pages. Nothing will change in your product detail views.

3. What is the perfect size for product thumbnails?

Well, there is no “one-size-fits-all” size, but in many stores, a thumbnail height of around 220px with object-fit: cover. is beneficial. This prevents the layout from jumping around while keeping images at the best quality.

4. Is this method mobile responsive?

Yes. The guide includes a mobile-specific media query (@media screen and (max-width: 767px)) to ensure product images scale appropriately on smaller devices.

5. Can I add hover effects to product images?

Absolutely. You can add an interactive hover zoom effect using this CSS:

Copied!

.ProductList .ProductList-item-image img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

This adds subtle polish and encourages engagement on desktop.