Related products

This guide describes setting up the Related products section.

Use the section to display related products on a product page. To learn about adding product recommendations to your store, refer to Shopify develop docs: Product recommendations.

​

​The previous image shows a Related products section in the lower half of a store's Product page with the title text "You may also like". In the upper left, part of Theme editor's section menu is displayed. To specify the total number of related products to display inside the section, the menu's Maximum products to show option is set at 2.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up a Related products section

To set up a Related products section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Related products section. For example, select Products > Default product.

   Note

   The section is available on the following product pages only:

   • Products > Default product
   • Products > Horizontal gallery
   • Products > Three column
   • Products > Thumbnails
   • Products > Two column

2. From the side menu, select Related products.

3. Select a setting described in the following table.

Setting name	Description
Product tile type	Use the Product tile type options to specify the type of product tile to display inside the section. The options are Standard or Text overlay. With Standard product tiles, product details, like product title and price, are displayed below the section's product images. With Text overlay product tiles, product details overlay the section's product images.
Maximum products to show	Use the Maximum products to show options to display a total of 2, 3, or 4 products inside the section.
Products per row on desktop	Use the Products per row on desktop options to set the number of products to show in each row, within the section, desktop display devices. The options are 2, 3, or 4.
Products per row on mobile	Select the Products per row on mobile options to set the number of products to show in each row, within the section, on mobile display devices. The options are 1 or 2.
Quick buy > Enable quick buy	Use the Enable quick buy option to show or hide a Choose options button on product tiles inside the section. Stores visitor use the button to choose product options to add to the cart. To use this option, set the Product tile type option to Standard.
Header > Subheading	In the Subheading field, enter text to display as a subheading for the section. To use this option, enter text into the Heading field.
Header > Heading	In the Heading field, enter text to display as a heading for the section.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.