Progress bar

Overview

A simple horizontal progress bar block driven by a Value between 0 and 100. Use it for static milestones, campaign progress, or connect Value to a product or page metafield so the fill updates per product or context. This block is separate from the cart progress bar, which calculates progress from cart totals and tiers.

Common use cases

• Show completion toward a goal (for example fundraising or a multi-step story)

• Pair Value with a metafield for per-product readiness or capacity

• Match bar height and colors to surrounding sections

Compatible blocks

This block does not accept nested blocks.

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals device visibility for the block	Checkbox (default: false)

Content

Setting	Description	Options
Value	Fill level for the bar (clamped between 0–100)	Text (default: 50). Use a number or a dynamic source such as a metafield

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the bar	Checkbox (default: false)
Enable top padding	Adds top padding above the bar	Checkbox (default: false)
Enable bottom padding	Adds bottom padding below the bar	Checkbox (default: false)
Gap size	Space between the bar and other flex items	• None • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Type	Use theme base colors or a custom scheme for the fill	• Custom • Base (default)
Bar (custom)	Color scheme for the filled portion	Color scheme picker Visible when type is Custom
Bar (base)	Base color token for the fill	• Body background • Body foreground (default) • Accent 1–3 • Shade 1–3 Visible when type is Base

Layout

Setting	Description	Options
Height	Bar thickness	2–24 px, step 2 (default: 8 px)

Display

Setting	Description	Options
Visibility	Device visibility for the block	• All devices (default) • Mobile only • Desktop only Visible when Show advanced settings is on