Resize Related Products | Squarespace 7.0

What does this code do?

This code snippet will allow you to resize the related products on product pages for multiple screen sizes in Squarespace 7.0.

Site Styles

This code snippet is set up to have the related products be in four columns on screens larger than 900px, two columns on screens smaller than 640px, and three columns on screens between those sizes.

So, the first thing you need to do is allow four related products to show. To do this go to Design > Site Styles and set the Related Products to have four items per row and no spacing in between.

If desired, you can customize the items per row and the widths in the code to change the number of columns displayed on each screen size. Be sure to set the items per row to the maximum number of related products you want to show.

Code Snippet

Copy and paste this code into Design > Custom CSS.

/* Resize Related Products */
.ProductItem-relatedProducts-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between; /* space across the width of the page */
  grid-column-gap: unset !important;
  grid-row-gap: unset !important;
}

@media only screen and (min-width: 900px) {
  .ProductItem-relatedProducts-item {
    width: 23%; /* column of 4 on desktop */
  }
}

@media only screen and (max-width: 900px) and (min-width: 640px) {
  .ProductItem-relatedProducts-item {
    width: 30%; /* column of 3 on tablet*/
  }
}

@media only screen and (max-width: 640px) {
  .ProductItem-relatedProducts-item {
    width: 45%; /* column of 2 on mobile */
  }
}

Note: This code will have the products stretch to fill the width of the screen. To left-align the products change “justify-contents” to “flex-start” instead of “space-between”.

How To Use It

1. Set the number of items per row and the spacing in the Site Styles.

2. Copy and paste the code as indicated above.

3. Customize the widths to change the number of columns displayed at each screen size.