Toast element

<hype-toast> is a floating notification that Hype appends to <body> — typically to tell the shopper that a campaign discount is now active. Like the announcement bar, it takes all of its content from attributes, so you can create one from JavaScript at any moment you choose.

How it is normally injected

The Hype: Toast app embed listens for hype:campaigns-loaded, looks each loaded campaign up in window.HypeUIBlocksSchema, finds the block whose type is toast, and appends a toast with that block's message, icon, position and width. One toast per campaign.

If the block's show only when first applied setting is on, the embed writes hype-toast-shown-<campaignId> to localStorage and skips the toast on later visits. Inside the theme editor it appends a placeholder toast instead, so you can style it with no active campaign.

Creating one yourself

Turn the app embed off first, or the shopper gets two toasts. Then create the element whenever it makes sense — here, when a discount is applied:

document.addEventListener('hype:discount-applied', (event) => {  const toast = document.createElement('hype-toast')  toast.id = 'my-hype-toast'  toast.setAttribute('message', `${event.detail.discountCodes[0]} applied`)  toast.setAttribute('icon-type', 'filled')  toast.setAttribute('icon-name', 'Confetti2Filled')  toast.setAttribute('background-style', 'solid')  toast.setAttribute('toast-position', 'bottom-center')  toast.setAttribute('toast-width', 'width-fit')  toast.setAttribute('toast-auto-close', 'true')  toast.setAttribute('timeout', '4000')  document.body.appendChild(toast)})

Attributes

Two of these are strict. toast-auto-close accepts only the string "true"; anything else, including an empty attribute, leaves auto-close off. toast-position and toast-width are matched by value in CSS, so a missing or misspelled value silently drops the placement rules: the toast is still position: fixed, but with no offsets and no animation, so it lands wherever it happens to sit at the end of the page. Always set both.

width-medium caps the toast at 600px, width-fit sizes it to its content, and width-full stretches it edge to edge with a 15px inset. The width- prefix is part of the value.

The nine gradient names accepted by background-style, and the icon names accepted by icon-name, are listed in Product banner element and Announcement bar element.

Dismissal

• Clicking the close button hides the toast and writes hype-toast-closed to sessionStorage.
• A toast that mounts while that flag is set does not render at all.
• A toast without toast-auto-close="true" clears the flag again on its next render pass, so treat the flag as a guard within the current page rather than a session-wide mute.

Toasts positioned at the top slide down into place; toasts at the bottom slide up. Both animations run for 0.4s.

CSS custom properties

This element uses --text-color for its text, the same name as the announcement bar.

--max-width and --toast-position are declared by the element but no rule uses them. Control the width with the toast-width attribute and the position with toast-position.

Parts

To move the toast away from the viewport edge, or to change its stacking, style toast-main; to restyle the pill itself, style normal-toast.

Styling example

<style>  #my-hype-toast {    --background-color: #052e16;    --text-color: #ecfdf5;    --font-size: 14px;    --block-padding: 12px;    --inline-padding: 20px;    --border-radius: 12px;    --font-weight: bold;    --content-alignment: flex-start;  }  #my-hype-toast::part(toast-main) {    bottom: 40px;    z-index: 10000;  }  #my-hype-toast::part(normal-toast) {    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);    backdrop-filter: none;  }  #my-hype-toast::part(close-button) {    opacity: 0.6;  }</style>

The pill ships with a blurred backdrop, a 0 8px 20px rgba(0, 0, 0, 0.2) shadow and a 4px/15px margin. Override any of them through ::part(normal-toast).

Related

• Announcement bar element
• Storefront SDK (window.Hype)
• Toast (pop-up)