Badges

Manages product badge appearance and behavior across collections and product grids. Use it to highlight special product states like Sale, Sold out, New, Custom tags, or Pre-Order.

Badge text size: Automatically scales based on your theme’s base typography size: Extra small, Small, Medium, Large, or Extra large.

Alignment: Controls where badges appear on product cards: Top left, Top center, Top right, Bottom left, Bottom.

Tip: Avoid bottom alignment when Quick Add is enabled to prevent overlap.

Sale badge - Highlight discounted products and display savings visually.

  • Show sale badge: Toggles the sale badge visibility.

  • Show savings: Displays discount value.

  • Saving type: Percentage or Money

  • Background / Text colors: Customize sale badge colors to fit your theme.

Custom badge - Add unique product tags to showcase special messages like 'Pre-order' or 'Best Seller'. To activate, add the tag _badge_with_custom_text to a product.

  • Show custom badge: Enables custom tag badges.

  • Background / Text colors: Define badge colors for visual distinction.

Sold out badge - Automatically marks unavailable products.

  • Show sold out badge: Displays when a product is out of stock.

  • Background / Text colors: Customize the appearance to match your theme.

New badge - Highlight recently added products automatically.

  • Show automatic new badge: Enables auto 'New' label.

  • Background / Text colors: Set custom badge colors.

  • Date limit: Determines how many days after creation a product shows as new.

Preorder - Used for products available for early purchase. To enable, add the tag _preorder to the product.

  • Show pre-order badge: Displays pre-order label.

  • Background / Text colors: Set theme-appropriate colors.

Last updated