How to Adjust the Design and Layout of Related Products in Squarespace 7.1 (Complete Guide)
Related products are one of the great methods to increase product discovery and conversions. The downside is that Squarespace 7.1 natively provides little to few control over the design and functionality of related products on a product page.
The good news?
A mixture of built-in settings and focused custom CSS can make a huge difference in the layout, spacing, hierarchy, and overall visual appearance of related products no plugins or Developer Mode required.
Why Customize Related Products?
Improving the related products layout helps to:
Increase average order value
Improve product discoverability
Match your brand’s visual style
Reduce clutter on product pages
Create a more premium shopping experience
This is especially important for conversion-focused eCommerce stores.
Why Squarespace Is Limited by Default
In Squarespace 7.1, related products are:
Automatically generated
Based on categories or tags
Rendered as a fixed grid
Not configurable through the editor
Because of this, layout changes require CSS overrides, not editor settings.
What This Solution Will Do
By following this guide, your site will:
Control the number of product columns
Adjust spacing and visual rhythm
Improve heading and section separation
Maintain clean hover behavior
Stay fully update-safe
Step 1: Enable Related Products
Before styling, ensure related products are enabled:
Go to Products → Product Page
Enable Related Products
Save
Squarespace will now render the related products section automatically.
Step 2: Improve Spacing Above the “Related Products” Heading
Add breathing room so the section feels intentional and separated from the product content.
Go to:
Website → Pages → Custom Code → Custom CSS
h2.product-related-products-title{
padding-top: 40px;
padding-bottom: 20px;
}
What this does
Creates clear visual separation
Prevents the section from feeling cramped
Improves scanability on long product pages
Step 3: Adjust the Grid Layout (Desktop Columns)
Now refine the product grid layout for desktop.
@media screen and (min-width: 768px) {
.product-related-products.related-products .product-list-container {
grid-template-columns: repeat(3,1fr);
}
}
What this does
Displays 3 related products per row
Creates a balanced, premium layout
Prevents overcrowding
Works only on tablet and desktop
This approach avoids affecting mobile layouts.
Step 4: Control Image Size and Consistency
To keep all thumbnails uniform:
.product-list-item-image {
aspect-ratio: 1;
object-fit: cover;
}
This ensures:
Square thumbnails
No image stretching
Clean alignment across products
Step 5: Improve Typography Hierarchy
Refine product titles and prices for better readability.
.product-related-products.related-products .product-list-item .product-list-item-title {
font-size: 16px !important;
margin-bottom: 6px !important;
}
.product-related-products.related-products .product-list-item .product-list-item-price {
font-size: 14px !important;
opacity: 0.8;
}
This creates:
Clear visual hierarchy
Reduced visual noise
Better scannability
Mobile Optimization (Highly Recommended)
Keep the mobile experience clean and touch-friendly.
@media only screen and (max-width: 767px) {
.product-related-products.related-products .product-list-container {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
This ensures:
Proper spacing on small screens
Easy tapping
No horizontal overflow
What You Cannot Change (Important)
These limitations are enforced by Squarespace:
You cannot manually reorder related products
You cannot select products individually
You cannot change logic beyond tags or categories
You cannot edit this section visually in the editor
Common Mistakes to Avoid
Overcrowding with too many columns
Ignoring mobile layout behavior
Using fixed image heights
Over-animating hover effects
Targeting generic .grid classes globally
Final Thoughts
Although related product design controls aren’t built into Squarespace 7.1, custom CSS allows complete visual control. Using a couple well-scoped overrides, you can turn a standard related products section into a sharp, conversion-optimized asset that seamlessly matches your brand.
FAQ: Related Products Design in Squarespace 7.1
-
No. Squarespace selects them automatically.
-
No. This is a CSS-only solution.
-
Yes. All Squarespace 7.1 templates.
-
Yes. These selectors are stable.
-
Yes, using CSS.
