
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.
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals enable color difference, vertical alignment, enable overlay, and visibility | Checkbox (default: false) |
| 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 |
| 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 |
| 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) |
| Setting | Description | Options |
|---|---|---|
| Color scheme | Controls the background color scheme for badges | • Body (default) |
| Color border | Controls the border color for badges | • Body |
| Color text | Controls the text color | • Default (default) |
| Enable color difference | Uses mix-blend-difference for better visibility on images | Checkbox (default: false) Visible when Show advanced settings is on |
| Setting | Description | Options |
|---|---|---|
| Display type | How badges are displayed | • Text |
| Font family | Font family for badge text | • Standard (default) |
| Font size | Font size for badge text | • Smaller |
| Setting | Description | Options |
|---|---|---|
| Horizontal alignment | Controls horizontal alignment of the badges | • Left (default) |
| Vertical alignment | Controls vertical alignment when overlay is enabled | • Top (default) 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 |
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |
Start by connecting your source repository and choosing the pages you want to publish.
You can then browse your documentation and ask questions about the content your team has shared.