Product card badges appear on product cards, such as collection pages and recommended product lists, only during the campaign. They can display messages such as "SALE," "10% OFF," or "Gift included" on product listing pages.
You can check how it works on the demo page → RuffRuff Order Bonus Demo Products
It is displayed when all of the following conditions are met.
The campaign status is "Active"
During the campaign period (it is not displayed outside this period)
"Show badge on product cards" is on in display settings
If a display period or display conditions are set, those conditions are met
The "During campaign" text is set for the badge
The product on the product card is included in the target products (when target products are specified)
Note: Product card badges are displayed only during the campaign. They are not displayed before it starts or after it ends, and only the "During campaign" badge text is used.
In each campaign's display settings, you can set the following items.
Field | Description |
|---|---|
Show badge on product cards | When on, badges are shown on product cards such as on collection pages |
Applies to | You can limit the products or collections where it appears. If none are specified, all products are included. You cannot specify individual variants. |
During-campaign badge | Set text, background color, text color, and shape. Product cards use only the "During campaign" state |
Display period | Follow the active dates, or set a display-only period. Product card badges are shown only during the period |
Display conditions | Set this to display only to specific customers |
You can customize product card badge position and size from the storefront settings page.
Field | Description | Default value |
|---|---|---|
Display position | Choose from top left, bottom left, top right, or bottom right | Top Left |
Top, bottom, left, and right inset | Fine-tune the badge position (px) | 0px |
Maximum badge count | Maximum badges displayed on one product card | 2 |
Font size | Badge text size (px) | 14px |
Font weight | Badge text weight | 500 |
To display Product card badges, enable the app embed and configure the campaign's display settings.
(1) Open the theme from the app setup guide
From the setup guide on the app home page, select "Enable the app in the theme".
(2) Select a theme
From the select box, choose the Shopify theme where you want to install the app.
(3) Activate the app
Select "Enable app".
(4) Enable "RuffRuff Order Bonus" in the theme editor
Enable "RuffRuff Order Bonus" on the left, then select "Save" in the upper-right corner.
(1) Open the campaign "Display settings"
Open "Display settings" for the target discount campaign or gift campaign.
(2) Enable "Show badge on product cards"
Set eligible products or collections as needed. If none are specified, all products are eligible.
(3) Configure the "During campaign" badge
For item details, see "Items you can set in campaign display settings".
(4) Save the 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.
Product cards show only the badge for the campaign period. Its position and size can be changed under "Items configurable in storefront settings."
Displayed only during the campaign period: Badges are not displayed before the start or after the end.
Only the "During campaign" badge is displayed: Badges for other states (Before start, After end, Unavailable) are not shown on product cards.
Hidden when no text is set: If the "During campaign" badge text is empty, the badge is not shown.
Text character limit: You can set up to 10 characters.
You can target only collections or products: You cannot narrow this down by variant.
Maximum display count limit: The badge limit per product card is 2 by default and 10 at maximum.
Supports dynamic addition: Badges are also injected automatically into product cards added dynamically after page load.