Cart progress bar element

<hype-tiered-cart-progress-bar> renders a Cart Goals campaign: a collapsible header, a progress bar with one dot per goal, the success messages for goals already reached, and any free gifts those goals unlock. It reads the cart from the SDK, so it re-renders whenever the cart changes.

This is a Hype Discounts campaign block. It is not part of Hype Cart Drawer, even though it usually sits next to the cart.

Placement

The theme editor block is Hype: Progress Bar, and it can go in any section — a header group, a cart section, a sidebar. In custom code, place the tag wherever you want it and pass the campaign's App block ID:

<hype-tiered-cart-progress-bar  id="hype-progress"  identifier="YOUR_APP_BLOCK_ID"  {% if request.design_mode %}design-mode="true"{% endif %}></hype-tiered-cart-progress-bar>

The element renders nothing when the campaign is inactive or has no goals.

Attributes

Attribute	Required	Default	Description
`identifier`	Yes	`""`	The campaign block's App block ID
`design-mode`	No	`false`	`true` renders placeholder goals for styling in the theme editor
`is-open`	No	`true`	Whether the body is expanded. Reflected: it flips when the shopper clicks the header, so you can style the open and closed states.

is-open treats only the exact string "false" as closed. Any other value, including an empty attribute, means open.

What controls the content

The wording, the icons, the goals and their gifts all come from the block's settings in the Hype admin, not from attributes. Two settings change the structure you are styling:

Show icon decides whether each progress dot renders an icon above its label.
Show offers decides when gifts appear: Current goal shows a goal's gifts only once that goal is unlocked, Next goal shows them regardless, and Hide goal hides that goal's gifts entirely.

CSS custom properties

Property	Default	Applies to
`--font-size`	`14px`	Header and gift text. Dot labels and success messages are 2px smaller.
`--font-weight`	`bold`	Header and gift titles
`--header-bg-color`	`#000`	Header background, the filled part of the progress bar, and unlocked dots
`--header-text-color`	`#fff`	Header text and the icon inside an unlocked dot
`--body-bg-color`	`#F7F7F7`	Expanded body background
`--body-text-color`	`#000`	Gift titles, subtitles and descriptions
`--product-bg-color`	`#fff` from the theme block	Background of each gift row
`--max-width`	`100%`	Outer width
`--border-radius`	`10px`	Header and body corners

--header-bg-color does more than the name suggests: change it and the progress fill and the unlocked dots change with it. The unfilled track and locked dots are a fixed #ccc.

Parts

Part	Element
`progress-wrapper`	Outer container
`progress-header`	Clickable header
`header-content`	Icon and message inside the header
`header-icon`	Header icon, when the block sets one
`arrow-icon`	Expand/collapse chevron
`progress-body`	Collapsible body
`progress-bar-container`	Wrapper around the bar
`progress-bar`	The track
`progress-bar-fill`	The filled portion
`progress-dot`	One goal marker
`progress-dot-icon`	Icon inside a marker
`progress-dot-label`	Label under a marker
`progress-success-messages`	Container for reached-goal messages
`success-message`	One reached-goal message
`gifts-block`	Wrapper around one goal's gifts
`gift-items-container`	The list of gift rows
`tier-gift-container`	The `<hype-free-gift-item>` itself

These parts are forwarded out of each gift row:

Part	Element
`tier-gift-item`	Gift row
`tier-gift-image`	Image container
`tier-gift-details`	Text column
`tier-gift-status`	Subtitle line
`tier-gift-title`	Product title
`tier-gift-description`	Description line
`tier-claim-button`	Claim button
`tier-free-label`	Badge over the image

The gift banner forwards the same row under banner- names, and it does not forward a description part. The two prefixes exist so a page carrying both elements can style them separately.

Gift state

Each gift row reflects its state, so no JavaScript is needed to style claimed or locked gifts:

#hype-progress hype-free-gift-item[is-added-to-cart] { opacity: 0.6; }#hype-progress hype-free-gift-item[is-disabled] { filter: grayscale(100%); }

is-disabled means the goal is not reached yet, or a claim is in flight. is-loading marks the gift whose claim request is running.

Styling example

<style>  #hype-progress {    --header-bg-color: #14532d;    --header-text-color: #f0fdf4;    --body-bg-color: #ffffff;    --product-bg-color: #f8fafc;    --border-radius: 6px;    --font-size: 15px;    --max-width: 480px;  }  #hype-progress::part(progress-header) {    text-transform: uppercase;    letter-spacing: 0.06em;  }  #hype-progress::part(progress-bar) {    height: 8px;  }  #hype-progress::part(progress-dot-label) {    font-weight: 600;  }  #hype-progress::part(tier-claim-button) {    border-radius: 999px;    padding: 8px 16px;  }</style>