Hype Cart

Opening the drawer

Updated Sep 10, 20263 min read

There are three ways the drawer opens, and each is a switch you control: automatically when something is added to the cart, when a shopper clicks your theme's cart icon, and from a floating launcher bubble. The first two live in the Behavior panel; the launcher lives in General.

Open automatically when items are added

Open automatically when items are added — on by default.

The drawer watches the cart and opens whenever the number of items goes up: an add-to-cart button on a product page, a quick-add on a collection page, an Add in the drawer's own upsell. It does not open on page load, and it does not open when a quantity goes down or a line is removed.

Turn it off if your theme already shows its own confirmation you would rather keep, or if adding to the cart is something your shoppers do many times in a row and a panel opening each time gets in the way.

Open on cart icon clicks

Open on cart icon clicks — on by default.

With this on, clicking your theme's cart icon opens the Hype drawer instead of going to /cart or opening the theme's mini-cart. Hype recognizes the common Shopify conventions — the cart bubble in the header, mini-cart toggles, and plain links to your cart page.

Three cases are deliberately left alone:

  • Middle-clicks and Ctrl/Cmd/Shift-clicks, so "open in a new tab" still works.
  • Anything inside Hype's own UI.
  • Any page loaded with ?hype_cart=off in the URL, which turns the whole takeover off for that one page view. That is the escape hatch when you need to reach your normal cart page.

If your theme's icon is not recognized, add its selector under Advanced — see Theme compatibility.

The launcher bubble

Show launcher bubble — on by default, in the General panel — is a floating cart button drawn by Hype itself. Its description in the editor: "The floating cart button that opens the drawer."

It shows a cart icon, and a badge with the item count once the cart has something in it. Clicking it toggles the drawer open and closed.

Launcher position places it in one of four corners:

  • Bottom right (the default)
  • Bottom left
  • Top right
  • Top left

On right-to-left storefronts the corner is mirrored automatically, so Bottom right becomes bottom left.

Choose the corner with your other floating widgets in mind. Chat bubbles, cookie banners and back-to-top buttons all favour the bottom right, and two floating buttons on top of each other is a support ticket waiting to happen. If your theme's header already has a visible, persistent cart icon, you may not need the launcher at all — turn it off and rely on Open on cart icon clicks.

Closing the drawer

Shoppers close the drawer with its close button, by clicking the backdrop outside it, or by pressing Escape. The Continue shopping button on the empty-cart message also closes it — see Products in cart.

Related articles

Still need help?

Start a chat and we'll pick it up right here.