Developers: styling the storefront
5 articles
Styling Hype's storefront componentsHype Cart Drawer's storefront components are styled in three layers. Pick the lowest one that does the job. Layer Who uses it Reaches Design…Sep 10, 2026Cart drawer CSS variablesEvery visual decision in the Hype Cart Drawer drawer is a --hype-cd-* custom property on the drawer's host. Set them on hype-cart-drawer (or an…Sep 10, 2026Cart drawer parts and recipesWhen a --hype-cd-* variable does not reach far enough, style the drawer's named internals with ::part() . Parts apply from the page's own stylesheet…Sep 10, 2026Custom CSS and custom JavaScriptThere are three places to put your own CSS or JavaScript, and which app you are in decides which of them exist. Where App Reaches Holds The Hype…Sep 10, 2026Open the cart drawer with JavaScriptDispatch hype:cart:open from your storefront JavaScript to open Hype Cart Drawer: document.dispatchEvent(new CustomEvent('hype:cart:open')) You can…Sep 21, 2026
Still need help?
Start a chat and we'll pick it up right here.