Pill badges
Overview:
The Pill Badges section is used to display compact badge-style labels for promotions, features, categories, announcements, product highlights, or trust indicators. It supports animated badge transitions, customizable typography, responsive spacing, grid layouts, color schemes, and flexible alignment options to create visually engaging badge collections across the storefront.
Blocks Configuration
Badge Block:
The Badge block displays an individual pill-style label inside the section.
| Setting | Description |
|---|---|
| Badge Label | Defines the text displayed inside the pill badge. |
Section Configuration
Heading:
| Setting | Description |
|---|---|
| Section Heading | Defines the main heading displayed above the pill badges section. |
| Heading Size | Controls the size of the heading text. |
| Heading Weight | Adjusts the font thickness of the heading text. |
| Heading Case | Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Heading Tag | Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family | Allows switching between default and body font family styles. |
| Heading Color Style | Applies predefined color styling to the heading text. |
| Heading Link Style | Controls the styling behavior of links used inside the heading content. |
| Enable Heading Gradient | Enables gradient styling for the heading text. |
Badge Settings:
| Setting | Description |
|---|---|
| Enable Next Animation | Enables animated transition effects between badges. |
| Badge Text Size | Controls the size of badge text. |
| Badge Text Weight | Adjusts the font thickness of badge text. |
| Badge Text Case | Changes the text transformation style for badge text. |
| Badge Font Family | Allows switching between default and heading font family styles. |
Grid Settings:
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Adds spacing between badges on desktop devices. |
| Mobile Grid Spacing | Adds spacing between badges on mobile devices. |
Layout:
| Setting | Description |
|---|---|
| Container Layout | Determines whether the section uses a contained, contained content, or full-width layout. |
| Container Width | Controls the maximum width of the section container on desktop devices. |
| Text Alignment (Desktop) | Sets the horizontal alignment of section content on desktop devices. |
| Text Alignment (Mobile) | Sets the horizontal alignment of section content on mobile devices. |
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color palette to the section background and content. |
| Gradient Mode | Enables gradient styling for the section background. |