Section: Product recommendations

Everything you'll need to know on how to setup your Product recommendations section.

The Product recommendations section uses Shopify's machine-learning Recommendations API to display products related to (or complementary to) the product currently being viewed. Recommendations are chosen automatically based on order history and product affinity, and are loaded asynchronously after the page renders so they never block initial paint. Use this section on your product template to drive cross-sell and upsell.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Open the Default product template and click on Add section in your left sidebar.

2) Scroll down, or search for Product recommendations, then click on it.

3) Done — your Product recommendations section is added. Preview a product page on the storefront to see live recommendations populate.

The general settings contain the heading, recommendation type, grid layout, badges, and spacing of the Product recommendations section. Simply click on the section to open the settings.

The text shown above the recommendations grid. For example: You may also like, Customers also bought, or Pairs perfectly with. Leave empty to hide.

Visual size of the heading: Small, Medium, or Large. Pick a size that matches the rest of the headings on your product page.

Text alignment of the heading: Left, Center, or Right. Center is the default and works for most stores.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Controls the section background, heading text, and product card styling.

Related shows algorithmically similar products. Complementary shows products from Search & Discovery app. Pick Related products for fashion or general retail (more of the same). Pick Complementary products for cross-sell pairings (camera + lens, dress + shoes) — these come from the Search & Discovery app.

Maximum number of products to display, between 2 and 8. Shopify may return fewer if the algorithm doesn't have enough strong matches. The default 4 works well in most cases.

Number of columns on screens wider than 990 px, between 2 and 5. Match this to your Products to show value for a clean single-row grid (e.g. 4 products + 4 columns).

Number of columns on screens 480 px or narrower: 1 or 2. Tablet (480–990 px) always uses 2 columns regardless.

Visual treatment of the discount or sale badge: Pill (rounded shape) or Diagonal (angled across the corner). Pill is the safer choice for most stores.

What the badge displays: None hides badges. Sale shows a static sale label. Percentage shows the discount percentage. Amount shows the saved money amount.

Format used to display the discount value: Percentage (e.g. -25%) or Amount (e.g. -$10). Only applies when Badge type is set to Percentage or Amount.

Where the badge appears on the product card image: Top left, Top right, Bottom left, or Bottom right. Top left is the most common convention in e-commerce.

Space above the section in pixels (0–120). The default 60 px gives the recommendations enough breathing room from the product details above.

Space below the section in pixels (0–120). The default 60 px works for most product pages.

Shopify's recommendation engine needs order data and product metadata to generate suggestions. Brand-new stores or low-traffic products may not return any recommendations until enough data accumulates. For Complementary products, make sure the Search & Discovery app is installed and you have set up complementary products there.

Products to show is a maximum, not a guarantee. Shopify returns the most relevant products it can find up to your specified limit. If the algorithm has fewer than 8 strong matches, it returns fewer.

This section is designed for the product template only — it depends on the current product to fetch recommendations. Adding it to a homepage or collection page will result in an empty section.

Related products shows algorithmically similar items based on Shopify's machine-learning model. Complementary products shows pairings you set up manually in the Search & Discovery app — perfect for products that go together but aren't similar (e.g. dress + shoes).

The section is configured to collapse via CSS when there are no recommendations. If you still see empty space, your color scheme may apply a background color that draws attention even when content is hidden. Either accept this behavior on rare empty cases, or remove the section from products that consistently have no recommendations.