The look of product card badges is set for the whole store in the "Product card badge" section of Settings.
You can set the following items.
(1) Open Settings
Open "Settings" in the left app menu, then open "Product card badge."
(2) Set the design
Set the position, spacing, maximum number to display, shape, font size, and font weight.
Setting | What it does |
|---|---|
Position | Top left, top right, bottom left, or bottom right of the product card |
Spacing | Vertical and horizontal spacing (px) from the selected corner |
Maximum number to display | How many badges appear on one product card. Default 2, maximum 10 |
Shape | Square, pill, tag, or custom. Custom also sets the corner radius (px) |
Font size and weight | The font of the badge text |
(3) Save
Select "Save."
Badge text, background color, and text color are set per selling period rule, not on this screen.
For text and colors, see Configure / Edit product card badge.
If the default selectors cannot find the product card or insertion point, specify CSS selectors in "Advanced settings." You can leave them empty when the defaults work.
Product card CSS selector: The selector for the whole product card
Badge insertion CSS selector: The selector for where to insert the badge