Skip to content
Progress bar
Overview
A dynamic cart progress bar that displays visual progress toward cart-based rewards or discounts. Shows a progress bar with tier indicators and customizable messages based on cart value. Uses Alpine.js for real-time cart calculations and displays tier messages when thresholds are reached.
Common use cases
- Encourage customers to reach free shipping thresholds
- Display progress toward discount tiers or rewards
- Show visual indicators for cart value milestones
- Customize tier messages and thresholds for different reward levels
- Use in cart drawers or checkout pages to incentivize additional purchases
Compatible blocks
The following blocks can be nested within this block:
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Progress bar calculation | Method used to calculate progress | • Subtotal |
Spacing
| Setting | Description | Options |
|---|---|---|
| Enable horizontal padding | Adds horizontal padding around the progress bar | Checkbox (default: false) |
| Enable top padding | Adds top padding around the progress bar | Checkbox (default: false) |
| Enable bottom padding | Adds bottom padding around the progress bar | Checkbox (default: false) |
| Enable internal padding | Adds internal padding to the tier message | Checkbox (default: true) |
| Gap size | Spacing between progress bar elements | • None |
Color
| Setting | Description | Options |
|---|---|---|
| Color bar | Controls the progress bar fill color | • Body |
| Color scheme | Controls the background and text colors for tier messages | • Body |
| Color text | Controls the text color for tier messages | • Default (default) |
| Color border | Controls the border color | • Body |
Style
| Setting | Description | Options |
|---|---|---|
| Font family | Font family for tier messages | • Standard |
| Font size | Font size for tier messages | • Smaller |
| Border position | Controls where borders appear | • None (default) |
Layout
| Setting | Description | Options |
|---|---|---|
| Horizontal alignment | Controls horizontal alignment of the progress bar | • Left (default) |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |