Free gift banner element

<hype-free-gift-banner> renders a Gift with Purchase campaign on a product page: a promo header the shopper can open, a message, and a row per eligible gift with its variant picker and a claim button. It reads the cart from the SDK and re-renders on every cart change, so a gift's row turns from locked to claimable the moment the offer unlocks.

Placement

The theme editor block is Hype: Gift Banner. In custom code, place the tag inside your product template:

<hype-free-gift-banner  id="hype-gift-banner"  identifier="YOUR_APP_BLOCK_ID"  {% if request.design_mode %}design-mode="true"{% endif %}></hype-free-gift-banner>

It must sit on a product page. The controller reads the product handle from the page URL and renders nothing when there is none, so the element is invisible on the cart page, the home page and collection pages. It is also invisible when the current product is not covered by the campaign's gift rule, and when the campaign has no gifts.

Attributes

Everything else — the promo bar title and icon, the message for each gift state, the claim button labels, the gift badge — comes from the block's settings in the Hype admin.

Two layouts

The block's settings decide which structure you are styling:

• With the promo bar on, the element renders a clickable header plus a collapsible body holding the message and gift rows. This is the default.
• With the promo bar off, the header disappears and the gift rows render directly in the container.

A second setting controls whether the header can collapse at all. When it cannot, clicking the header does nothing and no chevron renders.

CSS custom properties

--header-bg-color and --header-text-color also paint the claim button, so a dark header gives you a dark button unless you override the button through its part.

Parts

Each gift row forwards these parts:

The banner does not forward a description part. The cart progress bar forwards the same row with tier- prefixes and does include tier-gift-description.

Gift state

The gift row reflects its state onto itself:

Style them directly:

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

Or read them:

const claimed = document.querySelectorAll(  '#hype-gift-banner hype-free-gift-item[is-added-to-cart]',)console.log(`${claimed.length} gift(s) claimed`)

When a shopper claims a gift, Hype adds the line and dispatches hype:item-added-to-cart on document. Gifts that Hype adds or removes on its own — because the cart crossed or fell below the offer's threshold — dispatch hype:free-gifts-added and hype:free-gifts-removed instead.

Styling example

<style>  #hype-gift-banner {    --header-bg-color: #111827;    --header-text-color: #ffffff;    --body-bg-color: #ffffff;    --product-bg-color: #f9fafb;    --font-size: 14px;    --border-radius: 8px;    --max-width: 100%;  }  #hype-gift-banner::part(header) {    letter-spacing: 0.04em;  }  #hype-gift-banner::part(gift-banner-message) {    justify-content: flex-start;    padding-inline: 8px;  }  #hype-gift-banner::part(banner-claim-button) {    background: #16a34a;    border-radius: 999px;  }  #hype-gift-banner::part(banner-free-label) {    text-transform: uppercase;  }</style>

Gift rows carry a fixed drop shadow and an 8px corner radius of their own; override them through ::part(banner-gift-item).

Related

• Campaign elements overview
• Cart progress bar element
• Gift banner