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 theShopify Search & Discoveryapp. Learn how tocustomize 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.
Learn more about thedata used for related productsfrom the Shopify theme development documentation.
Customizing the appearance of related products
Related products is asectionon your product pages inOnline Store 2.0 themes. If you are using a theme that isn't compatible with Online Store 2.0, then you will need toupgrade 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.
Steps:
- From your Shopify admin, go to欧宝体育官网入口首页>Themes.
- Find the theme that you want to edit, and then clickCustomize.
- Open the drop-down menu at the top of the page.
- From theShopify app, tapStore.
- In theSales channelssection, tap欧宝体育官网入口首页.
- 利用Manage themes.
- Find the theme that you want to edit, and then tapCustomize.
- 利用Templates.
- From theShopify app, tapStore.
- In theSales channelssection, tap欧宝体育官网入口首页.
- 利用Manage themes.
- Find the theme that you want to edit, and then tapCustomize.
- 利用Templates.
- Select产品>Default productto load the template in the theme editor.
- Do one of the following:
- If your product page has a related products section, then clickRelated products.
- If your product page doesn't have a related products section, click+ Add sectionand then selectRelated products.
- ClickSave.
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.
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:
|
Image shape | Choose one of the following image shapes for your product images:
|
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 such asShopify Product Reviews, andmetafield definitionsforreviews.rating_countandreviews.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. |