Customize a widget
Change a widget's text, layout template, colors and sizes, and add custom code.
Open a widget. The Settings tab holds text and display options. The Design tab holds the look. The Preview shows sample products.
Text
Under Settings → Text:
| Field | Default | Notes |
|---|---|---|
| Heading | You may also like | A small rich-text editor: bold, italic, underline, link and color. |
| Add to cart button text | ADD | |
| Choose options button text | Choose | Shown on products that have variants. |
| Savings label | Save {{amount}} | {{amount}} is the amount saved, in your store currency. |
Each field has Add translations. See Translation text fields. A sold-out product's button always reads "Sold out".
Display
Under Settings → Display:
- Maximum products to show — 1 to 20, default 10.
- Show compare-at (original) price — off by default. The savings label only appears when this is on and the product's compare-at price is higher than its price. The preview always shows it.
- Hide products already in the cart — on by default. Cart drawer only.
- Show Advanced Settings — opens Show 'starting from' price for products with variants (text
From {{price}}) and Savings label position (Top of Card or Alongside Pricing).
Products with several variants show a dropdown for each option. The button adds the selected variant, quantity 1, then opens your cart drawer.
Star reviews
Star Reviews Integration has a switch and a Review app list: Judge.me, Quoli and Loox (Coming Soon), which can't be chosen. Install the app first. Ratings are drawn for Judge.me. Quoli doesn't draw ratings in a widget today. With the switch off, a widget in the cart drawer follows the Show reviews in upselling items setting. See Review app integrations.
Layout template
Design → Template → Layout template:
| Layout | What it is |
|---|---|
| Grid Slider (default) | Cards in a row that scrolls sideways. |
| Block Carousel | One row with arrows on each side. |
| Modern Carousel | A row with arrows next to the heading. |
| Spotlight | Large images with a round add button over each. |
Colors and sizes
- Heading — font size, text color, background, and alignment. Heading alignment only changes Spotlight. Other layouts center the heading.
- Card & Image — widget background and text color, card border radius and color, image width, height, fit (Contain, Cover, Fill) and radius. Card width is for Spotlight and Grid Slider. Add button size and Image padding are for Spotlight.
- Show brand name — Spotlight and Grid Slider: vendor color, size, weight and text transform.
- Typography (collapsed) — product title, price, compare-at price and savings label.
- Add to cart button (collapsed) — background, text color, font size and border radius. Navigation arrows color is for the two carousels.
Custom HTML & CSS
Under Custom HTML & CSS, check Enable custom HTML & CSS. Pick Select HTML location: Above title, Below title, Above products, Between each product or Below products. Enter HTML code (scripts run) and Custom CSS. Each location has its own code. See Custom HTML and CSS injection.
The CSS is added to the page as written. It is not limited to this widget, despite the help text. A built-in widget's outer box has an id starting ia-plw-component-, so you can start rules with [id^="ia-plw-component-"].
Custom template (advanced)
The Custom template card replaces the whole widget with your own code. It shows even if Enable custom template editors is off. Turn its switch on to use it. The Custom Templates button opens ready-made templates, if any exist, with Apply. While it is active, the built-in layout and the five HTML locations are not used, but your CSS still loads. A template with an error hides the widget. Support can't help with template code. See Custom templates.