Progress bar
Updated Sep 10, 20263 min read
On this page (6)
The progress bar shows shoppers how close their cart is to the next reward in a Cart Goals campaign — free shipping, an order discount, or a free gift — and lets them claim any gift they have unlocked. It is only offered on campaigns whose discount type is Cart Goals.
Add it
- Open the campaign's Blocks page and select the Storewide tab.
- Click Add campaign block and choose Progress banner.
- Copy the App block ID, add the Hype: Progress Bar block in your theme editor, and paste the ID into its App identifier field. Full steps: Adding a block to your theme.
- Click Next, fill in the wording, and save.
Even though it is listed under Storewide, this is a section app block, so you decide where it lives. The theme editor link opens the Products template; a cart page, cart drawer section, or a header section are all valid placements. Add it wherever shoppers should see their progress.
Content settings in the Hype admin
- Title and Header — the heading above the bar, with an optional icon.
- Show icon in progress bar — draws each goal's icon on the track.
- Goal name, Label and Success message — set per goal. Goal types are Free Gift, Free Shipping, and Order Discount, matching the goals configured on the campaign.
- Show offers — choose Current goal, Next goal, or Hide goal to control which goal's offers are displayed.
- Replace header with final success message and Final success message — swap the header out once every goal is met.
- For a Free Gift goal: Show gift block, Product Subtitle, Description, Claim button text and Claimed button text.
Messages accept variables such as {{pending_amount}} and {{next_discount}}. See Variables you can use in block text.
Style settings in the theme editor
Open the Hype: Progress Bar block.
| Setting | Range | Default |
|---|---|---|
| App Identifier | The App block ID from the admin | Hype Tiered Cart Progress Bar |
| Font size | 12px to 24px | 14px |
| Font weight | Regular, Bold | Bold |
| Header background color | Also colors the filled part of the bar | #000 |
| Header text color | #fff | |
| Body background color | #fff | |
| Body text color | #000 | |
| Product background color | Background behind each gift | #fff |
| Maximum width | 50% to 100% | 100% |
| Custom CSS | Extra styles for the progress bar | empty |
| Custom JavaScript | Extra script for the progress bar | empty |
The App Identifier value must match the App block ID from the Hype admin, or the block renders nothing.
Preview
In the Shopify theme editor the block renders with placeholder tiers and gifts, so you can style it before the campaign goes live.
Notes and limits
- This block belongs to Hype Discounts. It is not part of the Hype Cart Drawer app, even when you place it inside your cart.
- The bar tracks the cart, so it updates whenever the cart changes.
- Gifts a shopper has unlocked can be claimed from the bar itself when Show gift block is on.
Related
Was this article helpful?
Related articles
Still stuck?
Ask a follow-up and we'll see it came from “Progress bar”.
Opens chat with your question and a link to this article.