Limit the number of Related Products to One Row in Squarespace Commerce (V2)

If you're using Squarespace Commerce, you might have noticed that the Related Products section now displays in two rows by default. This can make your product pages feel cluttered - especially if you're aiming for a clean, minimalist design or have a lot of products.

To keep your layout sleek, you can easily limit the number of related products to just one row (4 items) using a quick CSS tweak.

Add the following snippet to your site under Design → Custom CSS:

Code:

/* related product 4 items */
.product-related-products .product-list-item.is-loaded:nth-child(n+5) {
    display: none;
}

What this does?

This CSS targets the 5th related product (and anything beyond it) and hides it from view. Since Squarespace displays four items per row by default, this keeps your layout to a single, clean row.

If you want to show 3 related products instead, simply change the number in nth-child(n+5) to nth-child(n+4).

---

Need more layout tips for Squarespace Commerce? Book a 1:1 strategy session or check out our library of code snippets and site enhancements.

---

---