Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Displaying related products

Encourage customers to explore your store by suggesting related products as they shop. Related products display on product details pages based on the product’s category. This is a great way to help shoppers find what they’re looking for and discover new products. You can display related products for all product types.

Related products is a premium feature available on the Commerce Basic and Advanced plans.

Before you begin

To suggest related products, add categories and tags to all products. 

Display related products

To display related products:

  1. In the Home Menu, click Commerce, then click Inventory.
  2. Click .
  3. Under Related products, switch on the Show on Product Details Page toggle.
  4. Click Customize content.
  5. Edit the Section Header to customize the text that introduces the related products section. By default it says “You Might Also Like.”
  6. Click the Sort by drop-down menu to choose how products display.
    • Random - Display random products in the category or tag.
    • Recently added - Display the newest products in the category or tag.
    • Most in stock - Display products with the highest stock level in the category or tag.
  7. Click Save.

How related products display

Related products display at the bottom of a product details page and can show up to five products.

By default, the related products section uses the product's first category. If the product doesn't have a category, it uses the first tag. To change the default settings, edit the product:

  1. In the product editor, click Options.
  2. Click the drop-down menu under Related Products
  3. Select the tag or category you want to use to suggest related products. You can also select Off to disable the related products section for that item.
  4. Click Save

These fields display for each related product:

  • Thumbnail image
  • Title
  • Price

The exact layout varies by template. Here’s how it looks in the Brine template:

Screen_Shot_2019-09-12_at_11.15.40_AM.png

Style related products

How you style the related products section depends on which version of Squarespace your site is on.

Open an item page that shows related products. In Site Styles, scroll to the Products: Related Products section and use these tweaks to change the style:

  • Items Per Row - Adjust the number of related products that display per row.
  • Item Spacing - Adjust the spacing between related products.
  • Image Aspect Ratio - Change the thumbnail image’s width-to-height ratio.
  • Details Alignment: Center, Left - Shift the text alignment of the product title and price.
  • Item Title Spacing - Set the distance between the product title and thumbnail image.

Style the related products section in collection item styles.

Disable related products

To disable related products:

  1. In the Home Menu, click Commerce, then click Inventory.
  2. Click .
  3. Switch off the Show related products toggle.
  4. Click Save.
Was this article helpful?
1 out of 1 found this helpful
Displaying related products