Badges

Use this setting to customize the "Badges" Show percentage discount, Show price differance, Corner radius and Badges color scheme.

Block
Description

Corner radius

Adjust the corner radius (in pixels) to control the roundness of badge corners.

Font size

Adjust the font size (in pixels) for the badge text.

Uppercase text

Toggle to display badge text in uppercase letters, creating a more prominent and bold style.

"Discount badge" customization as is follow:

Block
Description

Discount badge

Show badge Enable discount badges and their settings. Position

Customization of the "Position" in this section is as follows:

  • Beside the price

  • Top

Icon Select icon from given list to show with discount icon.

Background color Choose the background color for the discount badge.

Color picker Choose the text color for the discount badge. Border color Choose the border color for the discount badge.

Sale badge

Show badge Enable discount badges and their settings. Show badge as Enable badge as sale or save amount. Icon Select icon from given list to show with discount icon. Background color Choose the background color for the discount badge.

Color picker Choose the text color for the discount badge. Border color Choose the border color for the discount badge.

Soldout badge

Show badge Enable discount badges and their settings. Icon Select icon from given list to show with discount icon. Background color Choose the background color for the discount badge.

Color picker Choose the text color for the discount badge. Border color Choose the border color for the discount badge.

New Badge

Show badge Enable discount badges and their settings. Show badge as Enable badge as sale or save amount. Icon Select icon from given list to show with discount icon. Background color Choose the background color for the discount badge.

Color picker Choose the text color for the discount badge. Border color Choose the border color for the discount badge.

Custom metafield badge

Label Enter custom_badge text in this field and then add label to the perticular product. How to create metafield Icon Select icon from given list to show with discount icon. Background color Choose the background color for the discount badge.

Color picker Choose the text color for the discount badge. Border color Choose the border color for the discount badge.

Last updated