Developers: campaign elements and SDK
13 articles
Storefront SDK (window.Hype)Hype Discounts exposes its storefront runtime on window.Hype . Use it to read the shopper's active campaigns and cart, apply discount codes, format…Oct 1, 2026UI SDK (window.HypeUI)window.HypeUI holds the controller classes that drive Hype's campaign elements. Every element on the page — the product banner, the gift banner, the…Oct 1, 2026Campaign elements overviewHype Discounts renders its storefront campaign UI as custom elements — <hype-product-banner> , <hype-volume-selector> and the rest. The theme editor…Oct 1, 2026Cart progress bar element<hype-tiered-cart-progress-bar> renders a Cart Goals campaign: a collapsible header, a progress bar with one dot per goal, the success messages for…Sep 18, 2026Free gift banner element<hype-free-gift-banner> renders a Gift with Purchase campaign on a product page: a promo header the shopper can open, a message, and a row per…Sep 18, 2026Volume selector element<hype-volume-selector> renders a Volume Discount campaign as an interactive tier picker on the product page. The shopper chooses a tier, picks a…Sep 18, 2026Volume table element<hype-volume-table> renders a Volume Discount campaign as a plain two-column table: one row per tier, with the condition on the left and the saving…Sep 18, 2026Product 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…Sep 18, 2026Product price element<hype-product-price> renders Hype's own price line on a product page: up to three parts drawn from the product's original price, its discounted…Oct 1, 2026Announcement bar element<hype-announcement-bar> is a full-width message strip that Hype injects at the top of <body> . It takes all of its content from attributes, so it is…Sep 18, 2026Toast 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…Sep 18, 2026Live pricing schemaLive pricing rewrites the prices your theme already rendered, in the shopper's browser, so a campaign's discounted price shows on product cards and…Oct 1, 2026SSR live pricing: the theme snippet and metafield contract (Beta)Client-side live pricing rewrites prices after the page loads, so shoppers see the original price for a moment first. SSR live pricing removes that…Sep 25, 2026
Still need help?
Start a chat and we'll pick it up right here.