Badges

Product card badges

Setting	Description
Position on product cards	Customize the placement of badges on your product cards by choosing from the following options: Bottom Left: Places the badge in the lower-left corner, keeping it subtle yet noticeable. Top Left: Displays the badge in the upper-left corner of the card.
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.
Sale badge style	Default: Sale: Displays a “Sale” label on the badge. Saving: Indicates the amount saved in money, showing the difference between prices. Example: “Save $11.01” Percentage: Represents the discount percentage. Example: “8% Off”
Large sale from	Differentiate between sale badges by applying distinct colors for large and small sales. The colors automatically adjust based on the size settings for the discount. You can control the start of the large sale using the slider.
Sale badge icon	Display the badge as an icon that rotates continuously on the product card, drawing attention to the sale.

Sale badge icon and difference in icon colors between large and small sale

or when the icon is disabled, standard view of badge with large and small sale

Blog card badges

Setting

Description

Position on blog cards

Customize the placement of badges on your blog cards by choosing from the following options:

Top Left: Displays the badge in the upper-left corner of the card.
Top Right: Positions the badge in the upper-right corner for a clean, standout look.
Bottom Left: Places the badge in the lower-left corner, keeping it subtle yet noticeable.
Bottom Right: Positions the badge in the lower-right corner for balanced visibility.

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.