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
- Open the campaign's Blocks page and select the Product page tab.
- Click Add campaign block and choose Gift banner.
- 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.
- 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.
| Setting | Range | Default |
|---|---|---|
| App identifier | The App block ID from the admin | Hype Free Gift Banner |
| Font size | 12px to 24px | 14px |
| Font weight | Regular, Bold | Bold |
| Header background color | #000 | |
| Header text color | #fff | |
| Body background color | #fff | |
| Body text color | #000 | |
| Product background color | #fff | |
| Maximum width | 50% to 100% | 100% |
| Custom CSS | Extra styles for the gift banner | empty |
| Custom JavaScript | Extra script for the gift banner | empty |
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
Was this article helpful?
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.