Styling overview
Every badge has its own styling fields. Anything you leave empty falls back to the slot, then the placement, then the global defaults. This page documents the available fields and the resolution order.
Available style fields
Section titled “Available style fields”The same set of fields exists on a badge, a slot, a placement and the global defaults:
| Field | Effect |
|---|---|
| Background color | Solid background fill (any CSS color). |
| Text color | Color of the text and inline icon. |
| Font size | Badge text size. |
| Line height | Vertical spacing of the badge text. |
| Padding | Inner spacing between the text and the badge edge. |
| Margin | Outer spacing around the badge. |
| Gap | Spacing between text and icon. |
| Border radius | Corner rounding (set to 0 for ribbons). |
| Backdrop filter | CSS backdrop-filter (e.g. blur(8px)) for frosted-glass effects. |
| Icon size | Size of the SVG icon, if present. |
| Flex direction | Order of text and icon (row, row-reverse, column, column-reverse). |
All values use CSS custom properties internally — they integrate cleanly with any theme.
Inheritance order
Section titled “Inheritance order”Styles are resolved from highest priority to lowest. The first level that has a non-empty value wins:
- The badge — its own styling overrides everything.
- The placement — when the badge uses a non-overlay placement (above/below buy box, above/below product info), the placement defaults apply next.
- The slot — when the badge uses image overlay, the Left or Right slot defaults apply next.
- The global defaults — the values on the Badge defaults tab of the global configuration apply last.
Setting a value at the badge level overrides everything else — even if the slot and global defaults disagree, the badge wins.
When to set defaults vs. per-badge values
Section titled “When to set defaults vs. per-badge values”- Global defaults — choose values that match your store’s visual language. Most badges should look “good enough” without any per-badge styling.
- Slot defaults — use them when one side of the image needs a distinct style (e.g. ribbons on the right with chunky padding, flat stickers on the left with tight padding).
- Placement defaults — set them when above-buy-box and below-buy-box badges need different visuals (e.g. larger above, smaller below).
- Per badge — only override what is genuinely badge-specific (the brand color of a campaign, an oversized font for a hero promotion).
Combining colors with backdrop filter
Section titled “Combining colors with backdrop filter”For frosted-glass effects, pair a backdrop filter like blur(8px) with a semi-transparent background such as rgba(255, 255, 255, 0.6). The plugin emits these as CSS custom properties, so the effect works on any background image.
Live preview
Section titled “Live preview”The badge edit form has a Preview panel (toggle in the header). It re-renders in real time as you edit any style field. Switch the preview between placements to verify how the badge looks in each position.
See Live preview tips for more.