Product banner element

<hype-product-banner> renders a single-line promotional banner on a product page — an icon and a message announcing the discount that applies to the product being viewed. It supports a solid background color or one of nine named gradients.

Placement

The theme editor block is Hype: Product Banner. In custom code, place the tag in your product template, usually just above or below the price:

<hype-product-banner  id="hype-banner"  identifier="YOUR_APP_BLOCK_ID"  background="--magic-gradient"  {% if request.design_mode %}design-mode="true"{% endif %}></hype-product-banner>

The banner renders only on product pages, only for Multi Products Discount and Order Discount campaigns, and only when the product in the URL matches one of the campaign's discount rules. Anywhere else it renders nothing. It also re-checks itself when the page's URL changes without a reload, so themes that swap products in place keep showing the right message.

Attributes

Attribute	Required	Default	Description
`identifier`	Yes	`""`	The campaign block's App block ID
`background`	No	`solid`	`solid` uses `--background-color`. Any other value is treated as a CSS custom property name and used as the background.
`design-mode`	No	`false`	`true` renders a placeholder banner for styling in the theme editor

The message and icon come from the block's settings in the Hype admin. The message accepts two variables, written without spaces inside the braces:

Variable	Renders
`{{discount}}`	The discount that applies to this product, formatted — for example `20%` or `$5.00`
`{{discount_code}}`	The campaign's discount code

Named gradients

Pass one of these names to background:

Name	Gradient
`--magic-gradient`	Blue → purple → red → orange
`--electric-horizon`	Cyan → violet → pink → amber
`--neon-sunset`	Indigo → magenta → red → gold
`--tropical-burst`	Blue → violet → pink → orange
`--cyber-fusion`	Teal → blue → purple → coral
`--vibrant-dawn`	Green → cyan → pink → yellow
`--laser-pulse`	Mint → blue → purple → red
`--digital-candy`	Cyan → orchid → red → amber
`--future-glow`	Teal → indigo → magenta → yellow

All nine are four-stop linear-gradients at 108 degrees. The same nine names are available on the announcement bar and the toast, through their background-style attribute.

You are not limited to the nine. background accepts any custom property name, so define your own and pass it:

:root {  --brand-fade: linear-gradient(90deg, #0f766e, #14b8a6);}

<hype-product-banner identifier="YOUR_APP_BLOCK_ID" background="--brand-fade"></hype-product-banner>

To change one of the nine built-in gradients, redefine it on the element itself rather than on :root — the element declares its own value for those nine names:

#hype-banner { --neon-sunset: linear-gradient(90deg, #111827, #4b5563); }

CSS custom properties

Property	Default	Applies to
`--background-color`	`#000`	Background, when `background` is `solid`
`--text-color`	`#fff`	Message text and the icon
`--font-size`	`14px` from the theme block	Message text. The icon is drawn 4px larger.
`--font-weight`	`normal`	Message text
`--border-radius`	`0px`	Corners
`--text-align`	`center`	Horizontal alignment. Takes a flexbox alignment value: `center` or `flex-start`.
`--inline-padding`	`15px` from the theme block	Left and right padding
`--block-padding`	`8px` from the theme block	Top and bottom padding
`--box-shadow`	`0 2px 8px rgba(0, 0, 0, 0.15)`	Shadow. Set `none` to remove it.
`--max-width`	`100%`	Outer width

--font-size, --inline-padding and --block-padding have no unit in the element's own fallbacks, because the theme block always supplies one. When you place the element by hand, always write the unit: --font-size: 14px.

--text-align is passed straight to justify-content, so left and right do nothing. Use flex-start, center or flex-end.

Parts

Part	Element
`product-banner`	Outer banner, carries the background, padding, radius and shadow
`content-wrap`	Flex row holding the icon and the message
`message`	The `<p>` with the message text

Styling example

<style>  #hype-banner {    --background-color: #0f172a;    --text-color: #f8fafc;    --font-size: 15px;    --font-weight: bold;    --border-radius: 8px;    --inline-padding: 20px;    --block-padding: 12px;    --box-shadow: none;    --text-align: flex-start;    --max-width: 100%;  }  #hype-banner::part(product-banner) {    border: 1px solid #1e293b;  }  #hype-banner::part(message) {    text-transform: uppercase;    letter-spacing: 0.06em;  }</style><hype-product-banner id="hype-banner" identifier="YOUR_APP_BLOCK_ID"></hype-product-banner>

Leave background off, or set it to solid, whenever you are styling with --background-color. A gradient name always wins over that variable.