Overview
Every Reco component comes with a full set of styling options so you can match the widget to your store's brand. All styling is done through the component edit page — no code required.
Styling Sections
| Section | What It Controls |
|---|---|
| General styling | Widget text colour for all non-badge text |
| Badge styling | Badge background and text colours, corner radius |
| Product card styling | Card borders, background colour, corner radius, image background |
General Styling
| Setting | Description | Example |
|---|---|---|
| Text colour | Colour of all non-badge text (title, product names, prices) | #333333 for dark grey |
The text colour applies to the widget heading, product titles, prices, and non-viewed product percentages. Badge text has its own separate colour setting.
Badge Styling
Badges are the percentage labels that appear on each recommended product card (e.g., "60% bought this").
| Setting | Description | Default |
|---|---|---|
| Background colour | The badge background fill | Purple (#6b21a8) |
| Text colour | The text inside the badge | White |
| Border radius | How rounded the badge corners are | Rounded |
For the currently viewed product, the percentage text below the card automatically uses the badge background colour to create a visual connection with the badge.
Product Card Styling
| Setting | Description | Default |
|---|---|---|
| Show card border | Toggle card borders on or off | On |
| Border colour | Colour of the card border (when borders are enabled) | Light grey |
| Background colour | Card background fill | White |
| Border radius | How rounded the card corners are | Slightly rounded |
| Image background | Background colour behind the product image | Light grey |
When card borders are turned off, the border colour and related settings are hidden to keep the interface clean.
Tips for Effective Styling
| Goal | Suggestion |
|---|---|
| Match your brand | Use your store's primary colour for badge backgrounds |
| Improve readability | Ensure high contrast between text and background colours |
| Clean, modern look | Turn off card borders and use a subtle card background |
| Bold, attention-grabbing | Use vibrant badge colours with a contrasting text colour |
| Seamless integration | Match the card background to your page background |
Always preview your changes on the live storefront after saving. The theme editor preview may not render all dynamic styles identically to the live page.
Product Images
Product card images are displayed in a fixed-height container with the image centred and cropped to fill the space. This ensures consistent card heights regardless of the original image dimensions.
For best results, use product images with a consistent aspect ratio across your catalogue. Square or near-square images work particularly well in the widget cards.