Product Recommendations
Display Shopify-powered product recommendations in a responsive carousel. This section uses Shopify’s recommendation engine to suggest related products based on the current product.
Configure the Section
This section is designed for the Product template. It is already included by default on product pages.
- Navigate to a product page in the theme editor.
- Click the Product recommendations section to configure it.
Section Settings
Product Display
| Setting | Description |
|---|---|
| Max products | Maximum number of recommended products to show. Range: 1-10. Default: 4. |
| Columns | Number of columns on desktop. Range: 1–8. Default: 4. |
| Mobile card size | Size of product cards on mobile. Large (60%) or Compact (44%). Default: Large. |
| Column gap | Spacing between product cards. Range: 0–100px. Default: 8px. |
Carousel Navigation
| Setting | Description |
|---|---|
| Arrow style | Chevron or None. Default: Chevron. |
| Icon size | Arrow icon size. Range: 12–48px. Default: 20px. |
| Icon shape | None or Circle background. Default: Circle. |
| Icon color | Arrow color. Default: #666666. |
| Background color | Arrow background color. Default: #BFBFBF. |
| Background opacity | Arrow background transparency. Range: 0–100%. Default: 20%. |
| Arrow placement | Overlay (on top of cards) or Bottom (below cards). Default: Overlay. |
| Hide nav on mobile | Hide navigation arrows on mobile. Default: Off. |
Layout
| Setting | Description |
|---|---|
| Section width | Page width or Full width. Default: Page width. |
| Content gap | Spacing between heading and product grid. Range: 0–100px. Default: 12px. |
| Color scheme | Select a color scheme for the section. |
| Padding | Top and bottom padding with unified or separate controls. Range: 0–100px. Default: 32px. |
Blocks
Add text blocks for section headings, product item blocks for product-card presentation, container blocks for layout composition, and app blocks for third-party integrations.
Product item blocks can include media, title, price, swatches, and quick-add controls depending on the product-card block settings.
Empty Recommendations
Shopify recommendations can be empty for new stores, new products, products without enough activity, or products that Shopify cannot match yet. If no recommendations are available, the section stays out of the way until Shopify returns products.