Product badges
General
Badges are small labels that appear on product cards to highlight key product statuses or promotions. They help customers quickly identify important details, such as whether a product is new, on sale, or out of stock.
To enable Badges, find the setting in Theme settings > Product card > Additional elements.
Default Badges
When badges are enabled, default badges will be displayed based on product tags or other product status details:
- NEW: Displayed when the product has the tag "new."
- SALE: Displayed when the product is on sale (price is lower than the "compare at" price).
- PRE-ORDER: Displayed when the product has the tag "preorder."
- SOLD OUT: Displayed when the product is not available.
Custom Badges
If you want to show a custom badge on product cards, define them as follows:
[Product tag]:[Badge color]:[Text color]
Each value must be separated by a colon, and each badge definition must be separated by a semicolon ( ; ).
Example:
To display a "Limited Edition" badge in green with white text and a "Bestseller" badge in blue with white text, define them in the theme settings as follows:
Limited Edition:Green:White;Bestseller:Blue:White
Color and Style Settings for Badges
You can customize badge appearance by:
- Selecting colors for default badges and text.
- Choosing body or heading fonts for badges.
- Adjusting font size and letter spacing.
- Enabling uppercase text.
- Defining how rounded the corners are with the border radius setting.
Using Badge Styles In Navigation
Badge styles can be applied to navigation menu items. To define a menu item with a badge, use the format:
- "Item name:::Badge"
- For custom badges, prefix the badge name with "Custom-".
Example of Menu Items with Badge Styles:
Badge Styles in the Store's Navigation:
