Taking over the theme's cart

An active Hype cart replaces your theme's cart in two ways, each controlled by a switch in the Behavior panel: Take over add-to-cart forms performs adds itself instead of letting the page reload, and Hide the theme's own cart drawer hides the theme's slide-out and cart notification. Both are on by default.

Take over add-to-cart forms

Most modern themes add to the cart in the background and never reload the page. Hype notices those adds by watching the network and opens the drawer with the result. Nothing needs intercepting.

Older themes — and any product form that has not been wired up for AJAX — submit the form and reload the page. That is the case this switch covers. With it on, Hype cancels the reload, performs the add itself and opens the drawer.

Two safeguards make this safe to leave on:

• If your theme claims the submit, Hype stands down. It waits until every other handler on the page has had its turn and only steps in when nothing else took the form. A theme running its own AJAX add is left alone.
• If Hype's add fails, the form is submitted normally. A network error falls back to your theme's own behaviour rather than losing the sale.

Turn it off if you have a custom add-to-cart flow — a subscription widget, a product customizer, a bundle builder — that does its own thing with the form and would rather not be second-guessed.

Hide the theme's own cart drawer

With this on, Hype injects one stylesheet that hides the theme's cart drawer and cart notification, and closes any that is already open.

It covers the common Shopify conventions, which is nearly always enough for Dawn-based and Horizon-based themes. Because it works through CSS, it also covers drawers your theme creates later on the page, with no delay.

Closing is handled carefully on purpose: a theme drawer built as a modal <dialog> keeps the rest of the page inert until it is properly closed, so Hype closes it through the theme's own close routine rather than just hiding the box.

If your theme's drawer still appears, add its selector under Advanced → Extra native drawer selectors — see Theme compatibility.

Turn the switch off if you want both carts available, for example while you are testing on a live theme.

Reaching your normal cart page

Add ?hype_cart=off to any storefront URL and the whole takeover is skipped for that one page view: cart-icon clicks navigate normally, forms submit normally, and the theme's drawer is not hidden. Nothing is saved and no other shopper is affected. This is the quickest way to compare the two carts or to reach /cart while an active Hype cart is running.

Turning the takeover off completely

Deactivating the cart is the real off switch. A cart with the status Draft publishes nothing, so the theme's cart behaves exactly as it did before Hype was installed. Disabling the Hype: Cart Drawer app embed in your theme has the same effect for every cart at once.

Changes take effect when Shopify re-renders the page, usually within minutes — see My changes aren't visible on the storefront yet.

Related

• Opening the drawer
• Theme compatibility
• The theme's cart still opens