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

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 Related Products.
  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.

How related products display

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

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.

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

The section title's font and text size follows the Heading 2 font tweak under the Headings section. To change the color of this section title, navigate to the Colors panel, then select the section theme applied to your Products Page, and adjust the Heading (Largetweak. 

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.

How you edit the font, text size, and color of the related products section title depends on the type of Products 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

Disable related products

To disable related products:

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