Adding a related products section

You can add a section to your product pages that displays a list of related products that are automatically-generated or manually set by you using the Shopify Search & Discovery app. Learn how to customize related products with the app.

Displaying related products to customers makes it easier for them to discover new products, and can help to increase online store sales.

The heading and layout of the related products section are determined by your theme.

Understanding related products

Related products are based on products that are commonly purchased together, have a similar product description, or products in related collections. Related products become more accurate over time as more order and product information becomes available.

Note

If you're selling in person using Shopify POS, then you can add related products as a product recommendations tile to your smart grid and view recommended products in the cart.

Learn more about the data used for related products from the Shopify theme development documentation.

Customizing the appearance of related products

Related products is a section on your product pages in Online Store 2.0 themes. If you are using a theme that isn't compatible with Online Store 2.0, then you will need to upgrade your theme. You can customize the appearance of your related products to include the title, price, vendor, and a short description, or hide it from your product pages. You can have only one related products section on a product page at a time.

Note

If your screen is wider than 1600 pixels, then your customization and editing options are displayed on the right side of your screen. If your screen is smaller than 1600 pixels, then they're displayed on the left side.

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Select Products > Default product to load the template in the theme editor.
4. Do one of the following:
   • If your product page has a related products section, then click Related products.
   • If your product page doesn't have a related products section, then click + Add section and then select Related products.
5. Click Save.

iPhone

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme that you want to edit, and then tap Customize.
5. Tap Templates.
6. Select Products > Default product to load the template in the theme editor.
7. Do one of the following:
   • If your product page has a related products section, then click Related products.
   • If your product page doesn't have a related products section, then click + Add section and then select Related products.
8. Click Save.

Android

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme that you want to edit, and then tap Customize.
5. Tap Templates.
6. Select Products > Default product to load the template in the theme editor.
7. Do one of the following:
   • If your product page has a related products section, then click Related products.
   • If your product page doesn't have a related products section, then click + Add section and then select Related products.
8. Click Save.

You can disable related products by clicking the eye symbol. Disabling related products hides the section from your product listing, but doesn't delete it.

Related products settings

You can customize how your related products appear to the customer. The related products are automatically generated based on products that are commonly purchased together, have a similar product description, or are products in related collections, and become more accurate over time as more order and product information becomes available.

The settings for the related products section

Setting	Description
Heading	The title of the section.
Color scheme	The background color of the related products section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Image ratio	The image ratio for the images of the recommended products: Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped. Portrait - Crops the images to use a 2:3 ratio. Square - Crops the images to use a 1:1 ratio.
Image shape	Choose one of the following image shapes for your product images: Default - Changes your product image into a rectangle shape. Arch - Curves the top your product image. Blob - Rounds your product image into one of the six random blob shapes that has a unique animation on hover. Chevron left - Changes your product image into a chevron shape that has a sharp bend to the left. Chevron right - Changes your product image into a chevron shape that has a sharp bend to the right. Diamond - Changes your product image into a four-sided diamond shape. Parallelogram - Changes your product image into a shape that has two pairs of parallel lines. Round - Rounds your product image into a circle or oval shape that has a unique animation on hover.
Show second image on hover	When the customer hovers their cursor over the product image, displays the second product image if the product has one.
Show vendor	Displays the vendors of the products.
Show product rating	Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and metafield definitions for reviews.rating_count and reviews.rating.
Section padding	Adds spacing to the top or bottom of the related products section. Use the range slider to add between 0px and 100px of space above or below the section.