Checkpoints bar

Placement and available controls for the Checkpoints 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

Similar to the Progress bar block, but used to display multiple promotions. If needed, make sure to set up [automatic discounts](https://admin.shopify.com/discounts) and/or gift blocks.

Editor controls

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

Appearance: Choose the presentation or source that fits this component.Options: Standard · Milestone rail
Accessible progress label: Edit the text shown by this component.
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 achievedConditional: Choose a local color when the relevant custom source is enabled.
Achieved iconConditional: Choose a local color when the relevant custom source is enabled.
TrackConditional: Choose a local color when the relevant custom source is enabled.
Marker backgroundConditional: 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
Subtotal goal amount unitsConditional: Use minor units for exact goals with cents. Quantity goals are unaffected.Options: Currency units (50 = 50.00) · Minor units (2699 = 26.99)
Progress message: Use [amount] to display amount/quantity needed to reach the next goal and [next_goal] to display "Progress message text" of the next goal.
Success message: Displayed after all promotions are unlocked.
Mobile labels text size: Mobile font size of goal names under icons
Desktop labels text size: Desktop font size of goal names under icons
Accent color: Choose the presentation or source that fits this component.Options: Accent 1 · Accent 2 · Text
Enable goal #1: Enable or disable this option and preview the result.
Goal #1 Label: Displayed under the icon. Use to go into a new line.
Goal #1 Progress message text: Replaces [next_goal] in the progress message.
Goal #1 Amount: Required cart subtotal/quantity for the promotion.
Goal #1 Icon: [View all available icons.](https://fonts.google.com/icons)
Goal #1 Filled icon: Enable or disable this option and preview the result.
Enable goal #2: Enable or disable this option and preview the result.
Goal #2 Label: Displayed under the icon. Use to go into a new line.
Goal #2 Progress message text: Replaces [next_goal] in the progress message.
Goal #2 Amount: Required cart subtotal/quantity for the promotion.
Goal #2 Icon: [View all available icons.](https://fonts.google.com/icons)
Goal #2 Filled icon: Enable or disable this option and preview the result.
Enable goal #3: Enable or disable this option and preview the result.
Goal #3 Label: Displayed under the icon. Use to go into a new line.
Goal #3 Progress message text: Replaces [next_goal] in the progress message.
Goal #3 Amount: Required cart subtotal/quantity for the promotion.
Goal #3 Icon: [View all available icons.](https://fonts.google.com/icons)
Goal #3 Filled icon: Enable or disable this option and preview the result.
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.
Label color: Choose a local color when the relevant custom source is enabled.
Achieved label color: Choose a local color when the relevant custom source is enabled.
Icon inactive color: Choose a local color when the relevant custom source is enabled.
Icon background 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.
Icon circle sizeConditional: Adjust within the range offered by the theme editor.
Progress gradient endConditional: Choose a local color when the relevant custom source is enabled.
Unlocked circle backgroundConditional: Choose a local color when the relevant custom source is enabled.