Progress bar

Placement and available controls for the Progress bar block.

Scale Theme · v1.9.3 · 2 min read

Where to find it

Open the parent section and use Add block where this block is offered.

Usage notes

Use the progress bar for shipping or other cart promotions. The progress bar will show a success message once the customer reaches the set goal. If needed, make sure to set up an [automatic discount](https://admin.shopify.com/discounts).

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Color source: Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom
Color schemeConditional: Choose an available Shopify color scheme.
Text and labelsConditional: Choose a local color when the relevant custom source is enabled.
Progress and iconConditional: Choose a local color when the relevant custom source is enabled.
Marker iconConditional: Choose a local color when the relevant custom source is enabled.
TrackConditional: Choose a local color when the relevant custom source is enabled.
Base the goal on: Determines if the goal will be based on the total cart subtotal price, or the total quantity of items added to cart (excluding the items with the "cart-hidden" tag).Options: Cart subtotal price · Quantity of added cart items
Bar appearance: Choose the presentation or source that fits this component.Options: Standard · Milestone rail
Progress bar goal: Required cart subtotal/quantity for the promotion.
Progress message: Use '[amount]' to display the amount/quantity needed to reach the goal.
Success message: Edit the text shown by this component.
Icon: [View all available icons.](https://fonts.google.com/icons)
Filled icon: Enable or disable this option and preview the result.
Custom icon: Choose an image from your shop. Preview its crop on desktop and mobile.
Icon position: 'Above the bar' renders a circular icon badge floating above the track (like the checkpoints bar).Options: Inline with text · Above the bar (marker)
Marker alignmentConditional: Choose the presentation or source that fits this component.Options: Start (left) · Center · Goal (right)
Marker sizeConditional: Adjust within the range offered by the theme editor.
Marker labelConditional: Short caption shown directly under the marker icon (e.g. 'FREE SHIPPING'). Leave blank to hide.
Marker label font sizeConditional: Adjust within the range offered by the theme editor.
Marker label font weightConditional: Choose the presentation or source that fits this component.Options: Regular · Medium · Semibold · Bold
Uppercase marker labelConditional: Enable or disable this option and preview the result.
Marker label colorConditional: Leave blank to inherit from the message text color.
Accent color: Choose the presentation or source that fits this component.Options: Accent 1 · Accent 2 · Text
Text color: Choose a local color when the relevant custom source is enabled.
Amount highlight color: Choose a local color when the relevant custom source is enabled.
Achieved text color: Choose a local color when the relevant custom source is enabled.
Bar height: Adjust within the range offered by the theme editor.
Bar fill color: Choose a local color when the relevant custom source is enabled.
Track color: Choose a local color when the relevant custom source is enabled.
Text to bar gap: Adjust within the range offered by the theme editor.
Top margin: Adjust within the range offered by the theme editor.
Bottom margin: Adjust within the range offered by the theme editor.