Product badges

Overview

A customizable product badges block that displays various types of informational badges for products. The block can show sold out status, savings information, low stock alerts, custom product tags, and metafield-based badges. Badges can be displayed as plain text or styled badge elements with extensive customization options for positioning, colors, and layout.

Common use cases

• Display sold out badges for unavailable products

• Show savings badges with percentage or amount saved

• Display low stock alerts when inventory is below threshold

• Use product tags prefixed with "badge_" to create custom badges

• Configure metafield badges for custom product attributes like "Featured", "New", or "Limited Edition"

• Use overlay positioning for product images to create eye-catching promotional badges

• Set appropriate stock thresholds based on your inventory management needs

Block settings

Content

Setting	Description	Options
Product	Select the product to display badges for	Product picker
Show sold out badge	Displays a badge when the product is sold out	Checkbox (default: false)
Savings badge	Type of savings badge to display	• None • Percent (default) • Amount
Stock threshold	Minimum stock level to trigger low stock badge (0 = never show)	Number input
Metafield badges	Comma-separated list of metafield namespace.key pairs (e.g., "custom.badge,custom.featured")	Text input

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the badges	Checkbox (default: false)
Enable top padding	Adds top padding around the badges	Checkbox (default: false)
Enable bottom padding	Adds bottom padding around the badges	Checkbox (default: false)

Color

Setting	Description	Options
Color scheme	Controls the background color scheme for badges	• Body (default) • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent Visible when display type is badge
Color border	Controls the border color for badges	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when display type is badge
Color text	Controls the text color	• Default (default) • Alternative • Primary • Secondary • Tertiary • Neutral • Shade
Enable color difference	Uses mix-blend-difference for better visibility on images	Checkbox (default: false)

Style

Setting	Description	Options
Display type	How badges are displayed	• Text • Badge (default)
Font family	Font family for badge text	• Standard (default) • Heading • Subheading • Accent
Font size	Font size for badge text	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment of the badges	• Left (default) • Center • Right
Vertical alignment	Controls vertical alignment when overlay is enabled	• Top (default) • Bottom Visible when enable overlay is true
Enable overlay	Positions badges as an overlay on product images	Checkbox (default: false)

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only