Badges
| Setting | Description |
|---|---|
| Badge names | Add here your own badges with the same name as the product tag, separated by a comma. |
| Position on cards | Choose the position of your badge on the cards: top left, top right, bottom left, and bottom right. |
| Badge text weight |
Choose text weight for badge: • Normal • Medium • Semi bold |
| Corner radius | Use the slider to control the rounding of badges. You can adjust the radius to achieve the desired level of roundness or squareness for buttons, aligning them with your design vision. |
| Badges color |
Choose how badge colors are determined: • Default — uses the color schemes selected in Sale badge color scheme and Sold out badge color scheme below. • Inverse to product — colors the badge with the inverse of the product card's own colors instead, so the badge automatically stays visible no matter what color scheme the card uses. |
| Sale badge color scheme | Customize the appearance of the sale badge by selecting a color scheme from the dropdown list. Once selected, all associated colors will be applied immediately to the sale badge. Only available when Badges color is set to Default. |
| Sold out badge color scheme | Set a specific color scheme for the sold-out badge to make it stand out. Only available when Badges color is set to Default. |
| Sale badge style |
• Sale: Displays a "Sale" label on the badge. • Saving: Indicates the amount saved in money, showing the difference between prices. Example: "Save $40" • Percentage: Represents the discount percentage. Example: "20% Off" |
| Sale badge text | Custom text for sale badge when Sale style is selected. |
| Saving badge text | Text prefix for the saving badge when Saving style is selected. |
| Percentage badge text | Text suffix for the percentage badge when Percentage style is selected. |
Field visibility conditions:
- Sale badge color scheme and Sold out badge color scheme appear only when Badges color is set to Default.
- Sale badge text appears only when Sale badge style is set to Sale.
- Saving badge text appears only when Sale badge style is set to Saving.
- Percentage badge text appears only when Sale badge style is set to Percentage.