Theme compatibility

Hype recognizes the cart icons and native drawers of most Shopify themes out of the box. When yours is not recognized, you tell Hype what to look for with two fields in the editor's Advanced panel: Extra cart trigger selectors and Extra native drawer selectors. The panel says it in one line: "If your theme's cart icon or native drawer isn't detected, add its CSS selectors here."

What is recognized already

Cart triggers — the header cart bubble, mini-cart toggles and cart links used by Dawn, Horizon and the common conventions built on them, plus any plain link to your cart page.

Native drawers — the theme drawer and cart notification elements those themes use, including both the #CartDrawer spelling used by Dawn-era themes and the #cart-drawer spelling used by Horizon.

Adds are detected by watching the network rather than by matching selectors, so the drawer opens on an add-to-cart no matter what your theme's button looks like. There is no selector to configure for that.

Adding your own selectors

1. Open the cart in the editor and expand Advanced.
2. Put one CSS selector per line in the right field — the fields' hint is "One CSS selector per line."
3. Click Save.

Extra cart trigger selectors — elements that should open the Hype drawer when clicked. Use this when clicking your theme's cart icon navigates to /cart or opens the theme's own panel instead of the Hype drawer.

Extra native drawer selectors — containers to hide while Hype is in charge. Use this when your theme's drawer or cart popup still appears on top of, or instead of, the Hype drawer. List the drawer container itself, not the cart icon and not the item count — hiding those removes your header's cart badge.

Your selectors are added to the built-in lists, never replacing them.

Finding the selector

1. Open your storefront and right-click the element (the cart icon, or the theme drawer while it is open).
2. Choose Inspect.
3. In the highlighted markup, look for an id or a class on the element or its container.
4. Write it as a CSS selector: #site-cart, .header-cart-toggle, [data-cart-panel].

Prefer an id or a stable-looking class name. Auto-generated class names (long strings of letters and numbers) change when the theme is updated and will stop matching.

Both selectors are per-cart

These fields live on the cart, not on your store. If you run several carts for different markets, each one carries its own selectors — and duplicating a cart carries them across. See Duplicating, renaming and deleting carts.

When a theme is not detected at all

If neither field helps, work through this before contacting support:

1. Check the app embed is on the theme you are looking at. The app checks the theme selected in Settings → Theme; enabling the embed on a different theme is the single most common cause. See The drawer isn't showing on my store.
2. Check the cart is Active, not Draft.
3. Reload after a few minutes. Shopify's page cache means changes are not instant.
4. Turn on Debug logging in the Behavior panel, reload your storefront, and open your browser's console. The drawer logs what it is doing, which is what support will ask for. Turn it off again when you are done.

One limit is worth knowing: the stylesheet Hype injects can hide a theme element and everything it contains, but it cannot reach inside another component's shadow DOM. If your theme's cart lives there, target its outer host element rather than the panel inside it — and if that isn't possible, turn Hide the theme's own cart drawer off and disable the theme's cart drawer in the theme's own settings instead.

Related

• Taking over the theme's cart
• The theme's cart still opens