A badge is a text element displayed above campaign information in widgets and product messages. It clearly communicates states such as "In progress," "Starting soon," or "Out of stock."
You can check how it works on the demo page → RuffRuff Order Bonus Demo Products
The badge is displayed only in the widget or product message. It is placed above each campaign item.
The badge appears when the widget or product message is enabled and badge text is set for that state. Set badges on product cards under "Product card badge."
In "Badge" under each campaign's display settings, you can set the following items.
You can set badges individually for each campaign state.
Status | Display timing | Target |
|---|---|---|
Before start | Before the campaign start date and time | For both discounts and gifts |
During campaign | During the campaign active dates | For both discounts and gifts |
After end | After the campaign end date and time | For both discounts and gifts |
Unavailable | During the campaign and the gift cannot be distributed (for example, component products are out of stock) | Gift campaigns only |
Tip: If the text for a state is not set, the badge is not shown for that state.
These design fields can be set for each badge.
Field | Description |
|---|---|
Text | Enter the badge text (maximum 10 characters). |
Background color | Set the badge background color. |
Text color | Set the badge text color. |
You can choose from the following 4 shapes for the overall badge.
Shape | Description |
|---|---|
Square | Square badge |
Pill | Rounded badge (pill shape) |
Tag | Tag-shaped badge |
Custom | Set the corner radius (px) freely |
To show badges, you need one of the display methods and the badge design settings.
Prerequisite: Set up the app embed for widgets or product card badges, and an app block for product messages.
(1) Open the campaign "Display settings"
Open "Display settings" for the target discount campaign or gift campaign.
(2) Enable the display method
Enable the widget, product message, or product card badge.
(1) Open "Badge" under "Content"
For item details, see "Items you can set in campaign display settings".
(2) Save settings
Select "Save" in the upper-right corner.
To translate badge text, open Display settings in the app, select the target language from the language selector, and enter the translation.
Statuses are evaluated in the following order.
Current time is before the campaign start date and time → Before start
Current time is after the campaign end date and time → After end
During a gift campaign, when the gift cannot be distributed → Unavailable
Anything else → During campaign
Note: Discount campaigns do not have an "Unavailable" state.
Text character limit: You can set up to 10 characters.
Hidden when no text is set: If the text for a state is empty, the badge is not shown for that state.
Follows the display period and display conditions: Badges are shown according to the campaign display period and display conditions.
"Unavailable" applies only to gifts: The "Unavailable" state exists only for gift campaigns. It is evaluated after the before-start and after-end states, so it does not apply outside the campaign period.