Related products settings
You can display related products on the product page to help customers discover new items.
The Related products section shows a list of products related to the main product. These products can be automatically generated or manually selected the Shopify Search & Discovery app. Learn how to customize related products with the app.
Displaying related products makes it easier for customers to discover additional items and can help increase online store sales.
How to configure the Related products section
Basic Components
The “Related products” section consists of general settings.
To start customizing your collection, click on the “Related products” section to access its settings.
General settings
| Setting | Description |
| Color scheme |
Apply color scheme for the related products section from the available color schemes list. Read 'Color scheme' article to learn more about color schemes. |
Top divider
| Setting | Description |
| Show divider | Enable this option to show a divider at the top of this section. |
| Line opacity | Adjust the transparency of the divider line. |
| Thickness | Set the thickness of the line. |
| Top | Space above the divider line. |
| Bottom | Space below the divider line. |
| Top mobile | Space above the divider line on mobile devices. |
| Bottom mobile | Space below the divider line on mobile devices. |
The Subheading, Heading, and Description settings are used across multiple sections, blocks, and templates. To avoid repeating this information, the article is provided in the Global settings category.
For more details, read this article: "Subheading, heading, and description"
Layout
| Setting | Description |
| Products to show | Select how many products (2–10) to display in the section using either a grid or carousel layout. |
Grid style
| Layout style | Grid: Shows products in a static grid layout. |
|
Desktop columns
|
You can display 1 to 6 products per row. |
|
Mobile columns
|
You can display 1 or 2 products per row. |
| Desktop horizontal spacing | Set the space between products in the same row. |
| Mobile horizontal spacing | Set the space between products in a row for mobile devices. |
| Desktop vertical spacing | Set the space between rows of products on desktop. |
| Mobile vertical spacing | Set the space between rows of products on mobile. |
Carousel style
| Setting | Description |
| Layout style | Carousel: Displays products in a slider. Customers can browse items by sliding through them using navigation arrows, a mouse or a Slider progress bar at the bottom. |
|
Desktop columns
|
Choose how many products to show per row on desktop. You can display between 1 and 6 products. |
|
Mobile columns
|
Choose how many products to show per row on mobile devices. You can display 1 or 2 products. |
| Desktop horizontal spacing | Set the horizontal space between product cards on desktop. |
| Mobile horizontal spacing | Set the horizontal space between product cards on mobile devices. |
Product card
Product card settings are global settings that apply to the entire theme. They can be found in the Global settings category.
For more details, read this article: Product card settings
Padding
Padding is the space inside a section that separates the content from the section’s edges.
See this article to set paddings: Section padding