# 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 ### General | Setting | Description | Options | | ---------------------- | ----------------------------------------------------------------------------------- | ------------------------- | | Show advanced settings | Reveals enable color difference, vertical alignment, enable overlay, and visibility | Checkbox (default: false) | ### 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)

Visible when Show advanced settings is on

| ### 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



Visible when Enable overlay is on and Show advanced settings is on

| | Enable overlay | Positions badges as an overlay on product images |

Checkbox (default: false)

Visible when Show advanced settings is on

| ### Display | Setting | Description | Options | | ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only



Visible when Show advanced settings is on

| --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.brickspacelab.com/slab/content/blocks/products/badges.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.