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:

• Progress tier

Block settings

Content

Setting	Description	Options
Progress bar calculation	Method used to calculate progress	• Subtotal • Total (default)

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 • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Color bar	Controls the progress bar fill color	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent
Color scheme	Controls the background and text colors for tier messages	• Body • Neutral (default) • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent
Color text	Controls the text color for tier messages	• Default (default) • Alternative • Primary background • Primary foreground • Secondary background • Secondary foreground • Tertiary background • Tertiary foreground • Neutral background • Neutral foreground • Shade
Color border	Controls the border color	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when border position is not blank

Style

Setting	Description	Options
Font family	Font family for tier messages	• Standard • Heading • Subheading • Accent Visible when font size contains type--
Font size	Font size for tier messages	• Smaller • Small (default) • Default • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6
Border position	Controls where borders appear	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment of the progress bar	• Left (default) • Center • Justify • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only