Product Banner Element

Overview

The <hype-product-banner> is a web component that displays a banner on product pages to inform customers about active discounts. As a standard custom element, it must be placed within your product page templates (e.g., product.json).

This approach is ideal for developers who need to deeply integrate the banner's appearance and position within a custom theme design.

Usage

For prerequisites and common setup instructions, please see the UI Elements Overview.

Place the element in your product template files:

<hype-product-banner identifier="YOUR_BLOCK_ID"></hype-product-banner>

Attributes

The component's behavior can be modified using the following HTML attributes.

Attribute	Required	Description	Default
identifier	Yes	A unique string that links the element to its configuration in the Hype admin.
background	No	Sets the background style. Can be solid or a pre-defined gradient name.	solid
design-mode	No	Set to true to display a dummy banner for styling in the Shopify Theme Editor.	false

Styling with CSS

You can customize the banner's appearance by overriding its CSS Custom Properties. For precise targeting, assign a unique id to the element and use it as a selector in a <style> tag or your theme's stylesheet.

Example

First, add an id to your element:

<hype-product-banner id="my-custom-banner" identifier="YOUR_BLOCK_ID"></hype-product-banner>

Then, target that id to apply your styles:

#my-custom-banner {
	--background-color: #333;
	--text-color: #fff;
	--font-size: 16px;
	--border-radius: 8px;
	--max-width: 100%;
}

Available CSS Properties

Property	Description	Default
--background-color	Background color when background is "solid".	#000
--text-color	The color of the banner message text.	#fff
--font-size	The font size of the banner message.	14px
--font-weight	The font weight of the banner message.	normal
--border-radius	The border radius of the banner container.	0px
--text-align	The alignment of the content (left, center, right).	center
--inline-padding	The left and right padding.	15px
--block-padding	The top and bottom padding.	8px
--box-shadow	The box shadow of the banner container.	0 2px 8px rgba(0,0,0,0.15)
--max-width	The maximum width of the banner.	100%

Advanced Backgrounds

The background attribute can be set to one of our pre-defined gradient names for a more vibrant look.

<hype-product-banner
  identifier="YOUR_BLOCK_ID"
  background="--magic-gradient"
></hype-product-banner>

Available Gradients

• --magic-gradient
• --electric-horizon
• --neon-sunset
• --tropical-burst
• --cyber-fusion
• --vibrant-dawn
• --laser-pulse
• --digital-candy
• --future-glow

You can either override these existing gradient variables or define your own new CSS variable and pass its name to the background attribute.

:root {
	--magic-gradient: linear-gradient(to right, #ff0000, #00ff00);
}

Advanced Styling with Shadow Parts

For more granular control, you can directly style internal elements of the component using the ::part() CSS pseudo-element. This allows you to target specific pieces of the component's Shadow DOM.

Example

/* Style the main banner container */
#my-custom-banner::part(product-banner) {
	border: 1px solid blue;
}

/* Style the message text */
#my-custom-banner::part(message) {
	font-style: italic;
}

Available Parts

Part Name	Element Description
product-banner	The main wrapper for the entire component.
content-wrap	The container for the icon and message content.
message	The <p> element that contains the banner text.