Recommendations
A product row under the product page, fed by Shopify’s Product Recommendations API. One section covers both jobs — “you may also like” and “complete the look” — chosen with the intent setting.
It is enabled only on the product template. The demo product template uses it twice: once as complementary (“Pairs with”), once as related (“You may also like”).
Section settings
Section titled “Section settings”| Setting | Type | Default | What it does |
|---|---|---|---|
| Heading | Inline rich text | You may <b>also like</b> | Row heading. Bold a fragment for the accent treatment |
| Side label | Text | From the same drop | Small label opposite the heading |
| Type | Select | related | related — Shopify’s related products · complementary — pairs you set in the Search & Discovery app |
| Columns | Range 2–6 | 4 | Columns on desktop |
| Max products | Range 2–8 | 4 | Maximum products requested |
| Show “add all” button | Checkbox | false | Show an add all button. Best suited to a complete-the-look row |
| Top spacing | Range 0–160 px | 48 | Top spacing |
| Bottom spacing | Range 0–160 px | 48 | Bottom spacing |
How it loads
Section titled “How it loads”The first render is deliberately empty. The section carries a recommendations URL built from routes.product_recommendations_url with the section id, the limit and the intent; the theme fetches it, and the real cards are rendered on the second pass — so the cards are the theme’s own prod-card, server-rendered, not a client-side imitation.
Until then the section is .s-rec--pending and takes up no visible space. If nothing comes back, it stays hidden on the storefront entirely — no empty heading, no “no recommendations” message.
In the theme editor
Section titled “In the theme editor”Because an empty row is impossible to configure, the editor shows a placeholder instead: the heading plus a line of explanation. For complementary it says pairs are set in the Search & Discovery app; for related it says Shopify’s related products load moments after the page opens on the storefront.
Columns
Section titled “Columns”Columns come from the columns setting, not from how many products came back. Deriving them from the result count meant a single recommendation rendered as one full-width card instead of a normal one.
Add all
Section titled “Add all”With show_bundle_add on, a button adds every product in the row to the bag at once.
- Only available variants are listed — the first available variant of each product.
- The button is withheld below two of them: “add all” of a single item is just “add”.
- Its label carries the count and the combined total.
Related
Section titled “Related”- Product
- Recently viewed — the same server-render-on-refetch trick, driven by browsing history