Skip to content
Cart count
Overview
Displays a cart count indicator that shows the current number of items in the cart. Can be displayed inline or as a floating badge with configurable position. The count is dynamically updated using Alpine.js.
Common use cases
- For floating layout, adjust x/y positions to align properly with your cart icon
- Consider visibility settings for responsive designs when using multiple cart icons
- Display cart item count in headers or navigation areas
- Use as a badge overlay on cart icons
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Digit limit | Maximum number of digits to display before showing "+" suffix (e.g., 2 = "99+") | Number input (default: 2) |
Color
| Setting | Description | Options |
|---|---|---|
| Button color | Color scheme for the cart count indicator | • Primary (default) |
Style
| Setting | Description | Options |
|---|---|---|
| Font family | Controls the font family used for the count | • Standard |
| Font size | Controls the font size of the count | • Smaller |
| Radius | Border radius for the count indicator | • None |
Layout
| Setting | Description | Options |
|---|---|---|
| Layout | Controls the layout of the count indicator | • Float |
| Horizontal position | Horizontal position as percentage (for float layout) | 0 - 100 % (default: 55) |
| Vertical position | Vertical position as percentage (for float layout) | 0 - 100 % (default: 0) |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |