Styling the Related Products section: number of items per row, title and price font (7.0 & 7.1)

Apr 4

Recently, someone sent me a couple of questions/suggestions regarding how to style the Related Products section in Squarespace.

Personally, I hadn’t realized that there were a few more available tweaks for this area in 7.0 than for 7.1!

So, I wanted to address a couple of them in today’s tutorial to help you customize this specific part of your client’s site when needed.

Briefly, we’ll be looking into:

How to set a different number of items per row for the Related Products section SEPARATELY from the main Shop page layout in 7.1 (in 7.0 that’s doable through the Site Styles).
How to modify the gap or the space in BETWEEN these related items in 7.1.
And, how to tweak the font for the title and price of these elements, for both 7.0 and 7.1.

Wanna know how to implement these changes? Then hop right onto the vid:

Tutorial

Overview & timestamps

I’ll be showing you the breakdown of these customizations in 7.1, but you’ll find the adapted code for the font tweak in the Full code section of this post below:

00:00 - Intro
01:15 - Where to enable the Related Products section for product pages in Squarespace
Just in case you don’t have this section showing up on your client’s site yet, we’ll first take a look at where you can turn it on.
03:10 - Modifying the number of Related Product items per row
Once our selected products are in full display, we’ll hop right into the Inspector tool and look into how Squarespace is currently setting up the layout to see what we can do to modify it (want a hint? It starts with G and ends with RID).
07:09 - Adding the selector to the Custom CSS window and changing the value
Next up, we’ll use the selector we’ve chosen in the previous step to be able to make the value tweak needed to force our own number of items per row, starting from a specific breakpoint. And, similar to a previous customization, we’ll need to make sure we “escape” our value in order for the browser to translate it correctly, while on edit mode.
08:41 - Modifying the space in between the Related Product items in Squarespace 7.1
With our new layout in place, we’ll take a minute to see how we can also modify the gap in between the related items, just in case that’s something you’d like to have control over as well!
09:33 - Styling the Related Product items title and price font
Then, moving onto something completely different, we’ll look into how we can style the font for the product titles and prices, while making sure only the ones showing inside this RP section get modified.

That’s it for now!

Hopefully these customizations will point you in the right direction to make this area of shop pages more on-brand.

Until next time,

Full code

May 2023: the code has been modified to make sure the main shop page DOESN’T get affected by the column number snippet!

Squarespace 7.1

/*STYLING THE RELATED PRODUCTS SECTION: NUMBER OF ITEMS PER ROW, TITLE AND PRICE FONT (7.1)*/
//To change the number of related items per row
@media screen and (min-width: 768px) {
  #pdp .list-grid {
    grid-template-columns: repeat(~"3,minmax(0,1fr)");
    column-gap: 10px;
  }
}

//To style meta title and price
.ProductItem-relatedProducts .grid-title {
  font-size: 15px;
}
.ProductItem-relatedProducts .product-price {
  font-size: 13px;
}

Squarespace 7.0

/*STYLING THE RELATED PRODUCTS SECTION: TITLE AND PRICE FONT (7.0)*/
//To style meta title and price
.ProductItem-relatedProducts.ProductList h1.ProductList-title {
  font-size: 23px;
  margin-top: 0;
}
.ProductItem-relatedProducts .product-price {
  font-size: 13px;
  font-weight: normal;
}

Shop/product pageTutorial