What Are Components?
Components are the building blocks that control how the Reco recommendation widget looks and behaves on your product pages. Each component defines the styling, text, and scope of the recommendations displayed.
Types of Components
| Type | Description | Limit |
|---|---|---|
| Global Default | Shown on all product pages that don't have a specific component assigned | One per store |
| Product-specific | Assigned to a specific product; overrides the Global Default on that page | Unlimited |
You need at least one Global Default component for Reco to display recommendations across your store. Without it, only pages with product-specific components will show the widget.
Creating a Component
- Navigate to the Components page
- Click Create Component
- Fill in the component details:
| Setting | Description |
|---|---|
| Name | A label for your reference (not shown to customers) |
| Global Default | Toggle on if this should be the store-wide default |
| Assigned Product | If not Global Default, select which product this is for |
| Heading | The title displayed above the widget (e.g., "Customers who viewed this also bought") |
| Max Products | How many recommended products to show (1-5) |
- Customise the styling (see Customising Widget Appearance for details)
- Click Save
Component Settings Overview
| Section | What You Can Customise |
|---|---|
| Assignment | Global Default toggle or specific product selection |
| Component details | Name, heading text, max products |
| General styling | Widget text colour |
| Badge styling | Badge colours, border radius |
| Product card styling | Card borders, background, corner radius, image background |
| Recommendation scope | Same product type only, or all products |
Only one Global Default component is allowed per store. If a Global Default already exists, you won't be able to create another one until the existing one is removed or changed to product-specific.
Editing a Component
- Go to the Components page
- Click on the component you want to edit
- Make your changes
- Click Save
Changes to a component take effect immediately on your live storefront — no need to republish your theme.
Deleting a Component
- Go to the Components page
- Click the delete button on the component you want to remove
- Confirm the deletion
Deleting a Global Default component means product pages without a specific component will no longer show the widget. Consider creating a new Global Default before deleting the existing one.