Appearance and text
Matching your theme, setting colours by role, and writing what the widget says.
Under Appearance you decide how the widget looks; under Text you write what it says. The preview beside the editor updates as you go.
Match my theme
The fastest good result. Turn on Match theme colours and the widget inherits your theme’s own colour scheme, which means it keeps matching if you change your theme later. Use it unless you have a specific reason not to.
Colours by role
Turn matching off and you get four groups of colour, named for the job each does rather than the element it paints:
| Role | What it colours |
|---|---|
| Surface | The card background and its border. |
| Text | Product titles, and the quieter secondary lines. |
| Accent | Prices and sale flags: anything meant to catch the eye. |
| Button | The button fill and its label. |
Grouping them this way is what makes Match my theme possible at all: each role maps onto one of your theme’s colour-scheme variables. It also means you set four things instead of twelve.
What each card shows
- Price, and the compare-at price struck through beside it
- A sale badge when there is a saving
- An add-to-cart button, and a variant picker where one is needed
Hiding prices from signed-out visitors
For wholesale and members-only catalogues, prices can be hidden until a shopper signs in. It is decided in your theme against Shopify’s own customer object, so no request reaches us and no shopper is identified. The widget only ever learns “signed in or not”. This is a Pro setting.
Text
Set the heading shoppers read above the widget, and the button labels. Write for your store rather than accepting the defaults: “Goes well with” earns more attention than “Related products” on most storefronts, and it costs one line to change.
Accessibility and motion
The widget ships with real buttons, keyboard navigation, visible focus rings and a default palette that meets 4.5:1 contrast. It respects prefers-reduced-motion, so carousels do not animate for shoppers who have asked their system to stop that. If you set your own colours, check the contrast, because that part becomes yours.
Something here wrong or missing? Tell us. We would rather fix the page than answer the same question twice.