Product Recommendations
AI-powered cross-selling with related products, complementary items, and recently viewed.
Quick Setup
- On product template, add section ā Product recommendations
- Choose intent: Related or Complementary
- Enable Recently viewed tab if desired
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | You may also like | Section heading. Examples: 'Complete the Look', 'Pairs Well With', 'Customers Also Bought'. |
| Products | range | 4 | Number of products to display. Range: 2ā12. |
Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Image effect | radio | None | Animation effect for product images. Options: None, Reveal, Zoom. |
Recommendations
| Setting | Type | Default | Description |
|---|---|---|---|
| Intent | select | Related | Type of recommendations to show. 'Related' shows similar products. 'Complementary' shows products often bought together. |
| Tab label | text | Recommended | Label for the recommendations tab. |
| Use Shopify recommendations | checkbox | true | Use Shopify's AI-powered product recommendations. When disabled, uses the fallback collection. |
| Fallback collection | collection | - | Collection to show if Shopify recommendations are disabled or unavailable. |
š” Related vs Complementary:
ā¢ Related ā Shows similar products (same category, similar attributes)
ā¢ Complementary ā Shows products frequently purchased together (best for accessories, add-ons)
Curated Override
For complete control over recommendations, you can use metafields:
| Setting | Type | Default | Description |
|---|---|---|---|
| Use curated metafield | checkbox | false | Override Shopify recommendations with a curated list from a product metafield. |
| Metafield key | text | theme.complete_the_look | The metafield namespace and key containing curated product references. |
ā ļø Metafield Setup: To use curated recommendations, create a product metafield with type "Product list" using namespace theme and key complete_the_look. Then add products to each product's metafield in the Shopify admin.
Recently Viewed
| Setting | Type | Default | Description |
|---|---|---|---|
| Show tab | checkbox | true | Display a 'Recently Viewed' tab showing products the customer has previously looked at. |
| Tab label | text | Recently viewed | Label for the recently viewed tab. |
| Show price | checkbox | true | Display prices on recently viewed products. |
| Show compare price | checkbox | true | Show the compare-at (original) price if applicable. |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Mobile | select | 2 columns | Mobile layout. '2 columns' shows two products per row. '1 + peek' shows one product with the next peeking. |
| Card image position | select | Top center | How product images are cropped in cards. |
| Card Style | select | Default | Visual style for product cards. Options: Default, Minimal (clean borders), Premium (soft shadows). |
| Desktop columns | range | 4 | Number of visible products on desktop. Range: 2ā6. |
| Width | select | Inherit | Section width. Options: Inherit (page width), Narrow, Wide. |
Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Include top padding | checkbox | false | Add padding above the section. |
| Desktop top/bottom | range | 0px | Margins on desktop. |
| Mobile top/bottom | range | 0px | Margins on mobile. |
How It Works
Recommendation Priority
The section follows this priority order:
- Curated metafield ā If enabled and products are set, uses these first
- Shopify recommendations ā AI-powered suggestions based on purchase history and browsing behavior
- Fallback collection ā Used when Shopify recommendations are unavailable or disabled
Recently Viewed
The "Recently Viewed" tab works client-side:
- Products are stored in the browser's localStorage
- Automatically tracks products the customer views
- Shows up to the configured number of products (excludes current product)
- Persists across sessions until browser data is cleared
Card Styles
Three visual styles are available:
Card Style Options
Default
Standard theme styling
Minimal
Clean borders, subtle hover effect, modern look
PremiumRecommended
Soft shadows, lift on hover, luxury feel
Best Practices
Recommendation Strategy
- Use "Related" for discovery ā Helps customers find similar products
- Use "Complementary" for upsells ā Shows accessories, add-ons, or matching items
- Curate for hero products ā Manually curate recommendations for best sellers
Content Tips
- 4 products is optimal ā Shows a full row without scrolling on desktop
- Use descriptive headings ā "Complete the Look" or "Pair It With" performs better than generic "You May Also Like"
- Enable Recently Viewed ā Helps returning customers find products they were considering
Mobile Considerations
- "2 columns" is cleaner ā Shows products without horizontal scrolling
- "1 + peek" encourages scrolling ā Better for visual products like fashion
Troubleshooting
Recommendations not showing
- Ensure Use Shopify recommendations is enabled
- New stores may need purchase history for recommendations to work
- Set a Fallback collection for stores with limited data
- Check that the product page actually has the section added
Recently viewed is empty
- The customer needs to view other products first
- Clear browser data resets the list
- Works across sessions but not across different browsers/devices
Curated products not appearing
- Verify the metafield exists on the product
- Check the Metafield key matches exactly (case-sensitive)
- Ensure the metafield type is "Product list"
- Products in the metafield must be published
Wrong products showing
- Switch from "Related" to "Complementary" or vice versa
- Use a curated metafield for precise control
- Set a specific fallback collection