Getting Started: Build Your Cart and Turn It On

Essential Cart Drawer replaces your store's cart page with a drawer that slides out where the customer is shopping. They review items, apply a discount, see upsells and check out without losing their place.

This guide covers building your cart and putting it live.

Build your cart first

You don't need a plan to build your cart. Set up everything first and turn it on when you're happy with it.

1. Open Essential Cart Drawer in your Shopify admin.
2. On the home page, click Set up (or Customize) on the Essential Cart Drawer card.
3. Build your cart in the editor: upsells, spend tiers, colours, texts. The preview on the right shows every change.
4. Click Save as you go. Everything you save is kept.

Customers don't see any of this until you enable the cart drawer.

Turn it on when you're ready

Step 1: Enable the cart drawer

1. Click Enable at the top of the editor, or use the toggle beside the cart name.
2. Pick a plan. The Free plan costs $0 for up to 30 orders a month. Paid plans start with a 14-day free trial. Shopify asks you to approve the plan. On Free you're charged $0. Only orders attributed to the Cart Drawer count toward the limit. See How Pricing Plans Work.

The badge next to the cart name changes from Off to Live. If you close the plan window, your settings stay saved and the cart stays off.

Step 2: Turn on the app embed in your theme

1. In Shopify admin, go to Online Store > Themes.
2. Click Customize on your live theme.
3. In the left sidebar, click App embeds.
4. Turn on Essential Cart.
5. Click Save.

The drawer is now live. When a customer clicks Add to cart, the drawer slides open instead of the page reloading or going to the cart page.

Open on add to cart

In Settings, the Position card has Open cart drawer on add to cart:

• Ticked (default): the drawer opens every time a customer adds a product.
• Unticked: the drawer opens only when the customer clicks your cart icon. Adds happen in the background.

It still goes to the cart page

If Add to cart sends customers to /cart instead of opening the drawer, the app couldn't catch your theme's cart button. It's almost always one of two things:

• The app embed isn't on. Check Step 2.
• Your theme uses a non-standard cart button the app can't recognise.

For the second case, point the app at the right button:

1. Open Settings.
2. Scroll to the Advanced card.
3. In Custom cart button selector, enter the CSS selector of your theme's cart button, like .header__cart or #cart-icon-bubble.
4. Save and test your store.

Not sure which selector to use? Send us your store URL and we'll find it.

Two carts are showing

If your theme's own cart drawer opens next to ours, or slides in behind it, the theme's drawer isn't being hidden.

1. Open Settings, the Advanced card.
2. In Custom drawer hide selector, enter the CSS selector of your theme's cart drawer.
3. Save and test.

Unsure of the selector? Contact support with your store URL.

Saving your changes

When you edit settings, a save bar appears at the top of the screen. Click Save to apply your changes or Discard to undo them. Saved changes go live right away while the cart drawer is enabled.