Displaying related products

Suggest other items in the same category when shoppers view a product.

Last updated January 17, 2025

Encourage customers to explore your store by suggesting related products as they shop. Related products display on product details pages based on category or tag. 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.

To encourage customers to add extra items to their order by displaying related or complementary items as an optional add-on, visit Selling add-on products. For tips on increasing your revenue, visit Increasing your store's sales.

Accessing this feature

Related products is a feature available in the Core, Plus, Advanced, Commerce Basic, and Commerce Advanced plans. To learn more, visit Choosing the right Squarespace plan.

Before you begin

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

To display related products:

  1. Open the Related Products panel.
  2. Switch on the Show Related Products toggle.
  3. Click Section title to customize the text that introduces the related products section. By default it says “You Might Also Like.”
  4. Click the Display options 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.
    • Highest quantity - Display products with the highest stock level in the category or tag.
  5. Click Save.

Keep in mind, the related products section only displays products from the same store page.

Related products display at the bottom of a product details page and will show up to five products from the same store page. It's not possible to customize the number of related products that display.

By default, the related products section uses the product's first category. To display related products based on a different category or tag, edit the product:

  1. In the product editor, click Selling Tools.
  2. Click Related products.
  3. Click the drop-down and 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 Apply.
  5. Click Save

These fields display for each related product:

  • Featured 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

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

The related products section follows the tweaks in the store section styles. The fonts follow your site's font tweaks.

The section title's font and text size follow the Heading 2 tweak in the Headings section. To change the color:

  1. Go to the Colors panel and click the section theme applied to your store page.
  2. Change the Heading (Largetweak.

The way to access style settings for related products in version 7.0 depends on the type of store page your template supports. Some style options also differ based on store page type.

  • Classic store page - Open an item page that shows related products. In site styles, scroll to the Products: Related Products section.
  • Advanced store page - While you're on the store page, open site styles and click Product: Details.

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 featured 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 featured image.

How you edit the font, text size, and color of the section title depends on the type of store page your template supports:

  Font and text size Color
Advanced Heading 2 in the Content: Fonts section Heading 2 in the Content: Colors section
Classic Heading 2 in the Typography section Heading 2 in the Color section
Galapagos Enable Custom Headings and use Heading 2 Font in the Site Wide section Enable Custom Headings and use Heading 2 Color in the Site Wide section
Supply Heading Font in the Main Content section Heading Color in the Main Content section

To disable related products:

  1. Open the Related Products panel.
  2. Switch off the Show related products toggle.
  3. Click Save.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.