Hype Discounts

Gift banner

Updated Sep 10, 20263 min read

On this page (6)

The gift banner shows shoppers the free gifts a Gift with Purchase campaign is offering, how close they are to unlocking them, and a button to claim one. It is a product page block, and it is only offered on campaigns whose discount type is Gift with Purchase.

Add it

  1. Open the campaign's Blocks page and select the Product page tab.
  2. Click Add campaign block and choose Gift banner.
  3. Copy the App block ID, add the Hype: Gift Banner 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, then fill in the wording and save.

Place it on the product page. The banner needs the product context to work out whether the shopper qualifies for the gift.

Content settings in the Hype admin

The banner has three states, and you write the wording for each one separately:

  • Pending state — the shopper has not met the condition yet. Default message: Add {{eligibility_pending}} More to Get a Free Gift.
  • Unlocked state — the condition is met and the gift can be claimed. Default message: You've Unlocked Your Gift! Claim Your {{discount}} Gift.
  • Added state — the gift is in the cart. Default message: Gift Added to Your Cart

Each state has a Message, a message icon, a Gift subtitle, and a Button Text. Defaults are Claim, Claim, and Claimed.

The rest of the settings:

  • Show promo bar and Promo bar title — a header strip above the gifts. Default title: You Have Free Gifts Waiting For You.
  • Show collapsible — lets shoppers fold the banner open and closed.
  • Keep dropdown opened by default — starts the banner expanded.
  • Gift badge and Product badge — an icon and text shown on the gifts. Default badge text: Free Gift.

For the variables you can drop into any of these fields, see Variables you can use in block text.

Style settings in the theme editor

Open the Hype: Gift Banner block in the theme editor.

SettingRangeDefault
App identifierThe App block ID from the adminHype Free Gift Banner
Font size12px to 24px14px
Font weightRegular, BoldBold
Header background color#000
Header text color#fff
Body background color#fff
Body text color#000
Product background color#fff
Maximum width50% to 100%100%
Custom CSSExtra styles for the gift bannerempty
Custom JavaScriptExtra script for the gift bannerempty

Leave App identifier at its default only if you are not using the App block ID flow. The value here must match the App block ID shown in the Hype admin, or the banner renders nothing.

Preview

In the Shopify theme editor the block renders with placeholder gift data so you can style it before a campaign is live.

Swatches

If your gift products have variants, the variant picker inside the banner can show color or image swatches instead of a dropdown. See Swatches.

Related articles

Still stuck?

Ask a follow-up and we'll see it came from “Gift banner”.

Opens chat with your question and a link to this article.