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.
Sale badge icon Display the badge as an icon that rotates continuously on the product card, drawing attention to the sale.
Corner radius

Use the slider to control the rounding of sale and custom badges. You can adjust the radius to achieve the desired level of roundness or squareness for buttons, aligning them with your design vision.

*Note: Read about Custom badge here  https://docs.muup.co/article/1350-product-cards
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.
Text style

Controls how the sale badge text is displayed. Options:

• Body — displays the badge text in regular body style.

• Uppercase — displays the badge text in all capitals. (Default)
Sale badge font weight

Controls how thick or thin the sale badge text appears. Options:

• Normal — standard weight.

• Medium — slightly heavier than normal. (Default)

• Semi bold — noticeably heavier weight.

• Bold — the heaviest, most prominent weight.


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.
Text style

Controls how the blog card badge text is displayed. Options:

• Body — displays the badge text in regular body style.

• Uppercase — displays the badge text in all capitals. (Default)
Blog card badge font weight

Controls how thick or thin the blog card badge text appears. Options:

• Normal — standard weight.

• Medium — slightly heavier than normal.

• Semi bold — noticeably heavier weight. (Default)

• Bold — the heaviest, most prominent weight.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us