Related products
Related products shows products related to the product the shopper is viewing. The heading defaults to You may also like.
How to add it
- In the Theme Editor, open the Product template.
- Select Add section, then choose Related products.
The package enables this section on the Product template and the two product gallery templates (gallery left and gallery bottom).
Settings
View the section guide .
Heading content
| Setting | Options | Description |
|---|---|---|
| Heading | Title shown above the recommended products. | |
| Description | Optional text shown under the heading. | |
| Heading size | • Large | Sets the size of the heading to Small, Medium or Large. |
| Heading alignment | • Left | Aligns the heading and description to the left, center or right. When the carousel arrows are set to the section header, they sit opposite the heading unless it is centered. |
Layout
| Setting | Options | Description |
|---|---|---|
| Maximum products | Sets the most recommended products to show. Fewer appear when Shopify has fewer recommendations for the product. | |
| Columns on desktop | Sets how many product cards sit side by side on desktop. Tablets show 3 columns when this is 4 or more. | |
| Column gap | • No gap | Sets the space between product cards: No gap, Small, Medium or Large. |
| Columns on mobile | Sets how many product cards show per row on mobile. A decimal value such as 1.5 lets part of the next card peek in, and the row then scrolls sideways. |
Carousel
Arrow position sets where the arrows sit. Default places them beside the products, and Section header places them beside the heading.
| Setting | Options | Description |
|---|---|---|
| Enable carousel | Displays items in a carousel. | |
| Show arrows | Shows previous and next arrows on the carousel. Only available when Enable carousel is on. | |
| Arrow position | • Default | Places the arrows beside the product row (Default) or in the section header next to the heading. Only used when Show arrows and Enable carousel are on. |
| Show pagination | Displays carousel pagination. | |
| Reveal next item | Shows part of the next item. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how wide the section content is. Page width keeps it inside the standard content area, Wide stretches it further, and Full width runs edge to edge. |
| Top padding | Adds space above the section, in pixels. | |
| Bottom padding | Adds space below the section, in pixels. |
Notes
- Products come from Shopify product recommendations for the current product, up to the Maximum products limit.
No comments yet