Hype Discounts

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

  1. Open the campaign's Blocks page and select the Storewide tab.
  2. Click Add campaign block and choose Progress banner.
  3. 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.
  4. 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.

SettingRangeDefault
App IdentifierThe App block ID from the adminHype Tiered Cart Progress Bar
Font size12px to 24px14px
Font weightRegular, BoldBold
Header background colorAlso colors the filled part of the bar#000
Header text color#fff
Body background color#fff
Body text color#000
Product background colorBackground behind each gift#fff
Maximum width50% to 100%100%
Custom CSSExtra styles for the progress barempty
Custom JavaScriptExtra script for the progress barempty

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 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.