The product card badge is a feature that displays a badge on product cards — such as on collection pages or recommended product lists — only during the campaign period. It lets you promote offers like "SALE," "10% OFF," or "Gift included" on product listing pages.
The badge is displayed when all of the following conditions are met:
Campaign status is Active
The current time is within the campaign period (the badge is not shown outside the period)
"Show badge on product card" is turned on in the display settings
If a display period or display conditions are set, those conditions are met
The "During campaign" badge text is set
The product on the product card is included in the target products (if target products are specified)
The product card badge is displayed during the campaign period only. It is not shown before the start or after the end. Only the "During campaign" badge text is displayed.
Displaying the product card badge requires two steps: activating the app embed, and configuring the campaign's display settings.
Step 1: Activate the app embed
Click Enable app in theme from the setup guide on the app's top page.
Select the Shopify theme where you want to install the app from the dropdown.
Click Enable app.
Enable RuffRuff Order Bonus from the left panel in the theme editor.
Click Save in the upper right corner.
Step 2: Configure the campaign's display settings
Open the campaign's Display settings.
Turn on Show badge on product card.
Set the target products or collections (if left blank, all products are targeted).
In the Badge section under Contents, set the "During campaign" text, background color, text color, and shape.
Configure the display period and display conditions as needed.
Click Save.
The position and size of the product card badge can be customized from the storefront settings page.
Available Settings
Field | Description | Default |
|---|---|---|
Position | Choose from: top-left / bottom-left / top-right / bottom-right | Top-left |
Inset (top / bottom / left / right) | Fine-tune the badge position (px) | 0px |
Maximum badges per card | Maximum number of badges shown on a single product card | 2 |
Font size | Badge text size (px) | 14px |
Font weight | Badge text weight | 500 |
Badge text can be translated by selecting the target language from the language selector in the app's display settings and entering the translation.
Displayed during the campaign period only: Badges are not shown before the start or after the end.
Only the "During campaign" badge is shown: Other states (Before start, After end, Unavailable) are not displayed on product cards.
Hidden when text is not set: If the "During campaign" badge text is not entered, the badge is not displayed.
Character limit: Up to 10 characters per badge text.
Target can only be specified by collection or product: Filtering by variant is not supported.
Maximum badges per card: The default maximum is 2 badges per product card, up to a maximum of 10.
Supports dynamic insertion: Badges are automatically injected into product cards that are dynamically added after the page loads.