Product Box Designer: Block — Ribbon
Block — Ribbons
Ribbons are the labels placed on top of the product card — for discounts, new arrivals, customer club, and bundles. All ribbons on a card share position and basic style, but each ribbon type can be toggled on and off and styled individually.
Ribbons are an overlay block. It belongs in a Tags Overlay-section, so that the ribbons float on top of the card. See [How to combine blocks and sections].
What the block does
The block combines several label types into one block. You decide where the ribbons are anchored on the card and how they look, and enable the types that are relevant for your store. Each ribbon is only displayed when relevant — a discount ribbon appears on products on sale, a new arrival ribbon on recently added products, and so on.
Placement and common style
These settings apply to all ribbons on the card.
Setting | What it does |
|---|---|
Ribbon positioning | Which corner the ribbons are anchored to, whether they are stacked in a column or row, the distance between them, and the distance from the edges. |
Corner radius | Rounding of the ribbons' corners. |
Padding | Space inside each ribbon. |
Font | Font size, weight, and style. |
Text transformation | None, UPPERCASE, lowercase, or Capitalize. |
Icon position | Whether the icon is before or after the text. |
Ribbon types
Each type is turned on and off individually, and has its own colors, shape, style variant, and icon.
Ribbon type | What it shows |
|---|---|
Custom ribbon (HTML) | A ribbon based on a custom HTML tag set on the product. |
Custom text tag | A custom text label. |
Discount badge | The discount percentage on products that are on offer. |
New product tag | «New» badge on recently added products. |
Customer club badge | Badge on products with customer club price. |
Bundle tag | Badge on bundle products. |
Common choices per type:
- Shape: None, Pill, Circle, or Square.
- Style variant: Solid, Outline, Soft (toned), Pill, Badge, or Elevated.
- Colors: background color, text color, accent/border color, and an optional gradient end color.
- Icon: optional icon on the ribbon.
How to use it
- Decide on one corner for the ribbons and stick to it across all templates. This will make the cards consistent in the category list.
- Only enable the ribbon types you actually use. Too many badges on one card means none of them will stand out.
- Give the discount badge a color associated with sales, and keep news and customer club badges in their own, recognizable colors.
- Select «column» as the direction if multiple ribbons can appear simultaneously and you want them to stack neatly below each other.
Tips
- The ribbons are controlled by product data: the discount badge automatically appears on offers, the news badge on new products. You do not need to manually tag products for the ribbons to appear.
- If you need a single, freely placed badge that you control yourself — for example, a campaign label that you rotate and place exactly where you want — then [Block — Tag] is often a better choice.