Product recommendations

​

What this section controls

• Shopify AI-powered recommendations (automatic)
• Manual product fallback when recommendations unavailable
• Configurable product limit (4-12 products)
• Two layout options for visual variety
• Optional section-level button
• Stock status visibility control
• Responsive grid display

​

How Product recommendations works

• Shopify’s AI recommendation engine suggests products based on:
  • Current product relationships
  • Cart contents
  • Purchase patterns across your store
  • Customer behavior and browsing history

• If AI recommendations are unavailable, displays manually selected products
• Useful for new stores or products with limited data
• Provides consistent display until recommendations improve

​

Getting started

​

Section settings

• Layout
• Content
• Button
• Products
• Styling

​

Layout

Controls the visual style and arrangement of the product grid.

Layout 1

Standard grid layout with consistent product card styling.Best for:

• Clean, minimal designs
• Focus on product imagery
• Standard product pages

Layout 2

Alternative layout with different spacing and card treatment (default).Best for:

• Visual variety
• Differentiation from other product sections
• Enhanced visual hierarchy

Layout choice should match your overall theme aesthetic and other product section layouts.

​

Heading

Main title text for the section.

• Inline rich text supported (bold, italic, links)
• Default: “Heading for Product Recommendations”

Effective heading examples

For product pages:

• “You may also like”
• “Complete the look”
• “Customers also bought”
• “Pairs well with”

For cart page:

• “Don’t forget these”
• “Add to your order”
• “Recommended for you”
• “Frequently bought together”

Use action-oriented, contextual headings that encourage exploration without being pushy.

​

Heading size

Controls the size of section heading.Options: XS, S, M, L, XL
Default: XL

​

Button text

Label for optional section-level button.

• Plain text
• Default: “View all”
• Leave empty to hide button

​

Button URL

Destination link for section button.

• Shopify URL selector
• Useful for linking to collection or shop page

​

Button style

Visual style of the section button.

Filled

Solid background with contrasting text (default).Best for: Primary calls-to-action, prominent visibility

Outlined

Border-only style with transparent background.Best for: Secondary actions, subtle CTAs

Text link

Minimal styling as underlined text.Best for: Tertiary actions, non-intrusive links

Section button appears below product grid and provides an escape route to browse more products beyond recommendations.

​

Products (Manual fallback)

Select up to 12 products to display when AI recommendations are unavailable.

• Product list selector
• Limit: 12 products
• Acts as fallback only

When manual products display

Manual products appear in these situations:New stores:

• Insufficient purchase data
• Limited product relationships
• Recently launched products

Preview mode:

• Theme Customizer
• Development environments
• Testing scenarios

No recommendations:

• Shopify API temporarily unavailable
• Product has no related items
• Recommendation algorithm returns empty set

Select best-selling, complementary, or popular products as fallbacks to ensure quality suggestions even when AI recommendations are unavailable.

​

Max products

Maximum number of products to display (AI or manual).Range: 4 – 12 products
Default: 8

Product count recommendations

4-6 products:

• Minimal, focused suggestions
• Mobile-first designs
• Cart page recommendations

7-8 products (recommended):

• Balanced presentation
• Standard product pages
• Good variety without overwhelming

9-12 products:

• Maximum exposure
• Category landing pages
• Desktop-optimized layouts

Shopify’s AI may return fewer products than max_products setting if insufficient recommendations exist.

​

Show unavailable products

Display products that are out of stock.Options: True / False
Default: False

Stock visibility strategy

Hide unavailable (False - default):

• Only show in-stock products
• Reduces customer frustration
• Focuses on actionable recommendations
• Best for: Most stores

Show unavailable (True):

• Display all recommendations regardless of stock
• Allows “Notify when available” interactions
• Shows full product range
• Best for: Limited inventory or pre-order products

​

Section width

Controls horizontal width of the section.Options:

• Page - Standard container width (default)
• Fluid - Wider, more spacious layout

Fluid width works well for product grids, providing more breathing room for product images.

​

Color scheme

Select color scheme for section background and text.

​

Spacing

Control vertical spacing around the section:

• Spacing top - Margin above (None, S, M, L, XL)
• Spacing bottom - Margin below (None, S, M, L, XL)

Both default to M.

​

Section border

Add decorative borders: None (default), Top, Bottom, Both

​

Best practices

​

Common use cases

​

Related sections