Open the cart drawer with JavaScript
Updated Sep 21, 20261 min read
Dispatch hype:cart:open from your storefront JavaScript to open Hype Cart Drawer:
document.dispatchEvent(new CustomEvent('hype:cart:open'))You can use this in a custom button's click handler or another storefront integration. Dispatching on window also works:
window.dispatchEvent(new CustomEvent('hype:cart:open'))No event detail is required. If the drawer is already open, it stays open.
Before you use the event
- Activate a cart in Hype Cart Drawer.
- Enable and save the Hype: Cart Drawer app embed in your theme.
- Dispatch the event after the cart embed has initialized on the storefront.
The event works even when automatic opening and cart-link interception are disabled. It opens the drawer without adding products or changing quantities.
Events sent before the embed initializes are not queued. If no cart drawer is loaded on the page, the event has no effect. Run it on the storefront, not in Shopify admin.
Related
Was this article helpful?
Related 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, 2026
Still need help?
Start a chat and we'll pick it up right here.