Hype Discounts

Product banner

Updated Oct 15, 20262 min read

On this page (6)

The product banner is a single-line message on the product page that advertises the discount running on that product — for example Get 20% off with code SAVE20. It is offered on campaigns whose discount type is Order Discount or Multi Products Discount.

Add it

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

Content settings in the Hype admin

  • Message — the banner text.
  • Icon — a filled or outlined icon, an emoji, or none.

The message accepts two variables: {{discount_code}} and {{discount}}. See Variables you can use in block text.

Style settings in the theme editor

Open the Hype: Product Banner block.

SettingOptionsDefault
App identifierThe App block ID from the adminHype Banner
Background styleSolid color (default), Magic gradient, Electric horizon, Neon sunset, Tropical burst, Cyber fusion, Vibrant dawn, Laser pulse, Digital candy, Future glowSolid color
Background colorUsed only when Background style is Solid color#000
Text color#fff
Text size5px to 40px14px
Border radius0px to 100px0px
Text AlignmentLeft, CenterCenter
Font weightRegular, BoldRegular
Box shadowNone, ActiveActive
Block paddingVertical padding, in pixels8
Inline paddingHorizontal padding, in pixels15
Maximum width50% to 100%100%
Custom CSSExtra styles for the product bannerempty
Custom JavaScriptExtra script for the product bannerempty

The App identifier must match the App block ID from the Hype admin, or the banner renders nothing.

Preview

Inside the Shopify theme editor the block renders a placeholder banner so you can style it without an active campaign.

When it does not appear

  • The Hype: Discounts app embed is off.
  • The App block ID in the theme does not match the one in the admin.
  • The campaign is not active, or the shopper's market is not targeted.
  • The product on screen is not covered by the campaign's discount rules.
  • The change is less than 10 minutes old; see Clearing the cache.

Related articles

Still stuck?

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

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