Overview
The Reco widget appears on your product pages through a Theme App Extension block. This guide shows you how to add it to your Shopify theme.
Theme App Extensions are Shopify's recommended way to add app functionality to themes. They don't modify your theme code and can be removed cleanly at any time.
Prerequisites
Before adding the widget, make sure you have:
| Requirement | Details |
|---|---|
| Tracking pixel installed | Enables data collection for recommendations |
| Products synced | Ensures product names and images display correctly |
| At least one component created | Controls the widget's appearance and behaviour |
Adding the Widget Block
- Open your Shopify admin
- Navigate to Online Store → Themes
- Click Customize on your active theme
- Use the page selector at the top to navigate to a Product page template
- In the left sidebar, click Add block or Add section
- Look for Reco Recommendations under the Apps section
- Click to add it
- Drag the block to your preferred position on the page
- Click Save
Where to Place the Widget
| Position | Best For |
|---|---|
| Below the product description | Natural reading flow; customers see it after learning about the product |
| Below the Add to Cart button | Catches customers at the decision point |
| At the bottom of the page | Non-intrusive; acts as a "you might also like" section |
You can preview different positions in the theme editor before saving. The widget adapts to any width and looks good in most placements.
How the Widget Selects Which Component to Display
When a customer visits a product page, Reco checks for a component in this order:
| Priority | Component Type | Condition |
|---|---|---|
| 1st | Product-specific | A component is assigned to this exact product |
| 2nd | Global Default | No product-specific component exists |
| 3rd | None | Neither exists — no widget is shown |
If you don't have a Global Default component and haven't assigned a component to a specific product, the widget block will appear empty on that page. Make sure you have at least a Global Default component created.
Troubleshooting
| Issue | Solution |
|---|---|
| Widget not appearing | Check that you've created at least one component (Global Default recommended) |
| Widget shows but no products | The pixel needs time to collect data, or you can import historical orders |
| Products showing as "Unknown" | Trigger a product sync from the Dashboard — automatic syncing will also fix this |
| Widget looks different in editor vs live | The theme editor preview may not load all dynamic data; check the live storefront |