Theme and App Conflicts: Two Carts, Redirects and Overlaps

Most themes work with the cart drawer out of the box. This article covers the problems that do come up: the theme's own cart opening, add to cart going to the cart page, and chat buttons covering the drawer.

Built-in support

The drawer has built-in handling for these themes: Dawn, Horizon, Turbo, Kalles, Shella, Eurus, Grove, Maker, Wonder, Milano, Underground, Ahrite, Archetype themes, Master, Creative, UTD, Concept and Minimog. Other themes use a general mode that works for most.

It also handles bundle and cart apps such as Kaching Bundles, AMP Bundles, AOV and UpCart; one-click checkouts Cashfree, GoKwik and Fastrr; Redo Checkout+ and Samita Wholesale (their checkout button shows instead of ours); Hulk Product Options (option prices show in the drawer); and DealEasy (its gift picker stays open).

The theme's own cart opens too

Settings > Advanced: the cart button and drawer hide selectors.

First check: the Essential Cart app embed is on (Online Store > Themes > Customize > App embeds), and the cart drawer is enabled in the app.

If the theme's cart still opens next to or behind ours:

Open Settings in the editor, then the Advanced card.
In Custom drawer hide selector, enter the CSS selector of the theme's cart drawer, like #CartDrawer or .cart-drawer.
Save and test.

Not sure of the selector? Contact us with your store URL and theme name.

Add to cart goes to the cart page

The app didn't catch your theme's add-to-cart or cart button.

Open Settings > Advanced.
In Custom cart button selector, enter the selector of your cart icon or add-to-cart button, like #cart-icon-bubble.
Save and test.

Also check your theme settings: some themes have a cart type setting (page, drawer or notification). If the theme sends shoppers to the cart page or checkout after add to cart, that theme setting can override the drawer.

Page builders and box builders

Pages built with GemPages, PageFly or box builder apps sometimes use their own add-to-cart code. If the drawer doesn't open from those pages:

Contact us with the page link so we can check it.
Or ask the page builder's developer to call window.essentialCartApi.openCart() after their add to cart. See JavaScript API, Events and URL Parameters.

The drawer shows then the cart page loads

This usually means another script also handles the add to cart. Check other cart or upsell apps you have installed and turn them off one by one to find the conflict. Then contact us with the app name.

Chat buttons or floating buttons cover the drawer

When the drawer is open, the page's <html> element gets the class essential-cart__open. Use it in Custom CSS to hide a chat or back-to-top button while the cart is open:

html.essential-cart__open .your-chat-button-selector { display: none !important; }

Replace .your-chat-button-selector with your chat widget's selector, or ask us for the exact snippet.

Still stuck?

Send us your store URL, theme name and a short screen recording.