Essential Cart Drawer: setup and feature walkthrough

This guide walks through every part of Essential Cart Drawer: what it does, how to set it up, how each feature works, what you can measure, and the Shopify limits to know about.

What the app does

Essential Cart Drawer replaces your theme's cart with a slide-out cart drawer, and adds a sticky add-to-cart bar for product pages. You can:

• Open a cart drawer on add to cart, from the right, left or bottom, attached or floating, with your own width and corners per device
• Show a progress bar with spend tiers: free shipping, order discounts and free gifts, unlocked automatically
• Show upsell offers inside the cart, in a column beside the cart, and in the empty cart, with triggers, sub-triggers and automatic discounts
• Add order upsells like shipping protection or gift wrapping
• Let customers change variants and quantities, switch to a subscription and back, add an order note and apply discount codes inside the cart
• Show a countdown timer and an announcement bar in the cart
• Require customers to accept your terms before checkout
• Show express checkout buttons (Shop Pay, Apple Pay, Google Pay, PayPal) and payment icons
• Add your own HTML blocks and custom CSS
• Style every section, translate every customer-facing text, and set spend tiers per market
• Track cart views, checkouts, upsell and spend tier results in the app's analytics

Every plan includes every feature. Plans differ only by monthly order volume. You can build and preview the whole cart before you choose a plan.

Notes on platform rules and Shopify limitations

• The cart drawer runs on your Online Store through a theme app embed called Essential Cart. It must be on, and the cart drawer must be enabled in the app, for customers to see anything.
• Spend tier and upsell discounts run through one Shopify automatic discount the app creates, called Essential Cart - Automatic Discount. Don't delete it.
• That discount is set to combine with other order, product and shipping discounts. A code a customer types stacks with it only if that code also allows combining in Shopify admin > Discounts.
• Shopify allows 25 active automatic discounts per store. At that limit, the app can't create its discount and rewards won't apply.
• Express checkout buttons come from your Shopify Payments settings. The app shows or hides them, but Shopify decides which wallets appear.
• Auto recommended upsell products come from Shopify's own recommendations, not the app.
• The drawer follows Shopify Markets currencies. Third-party currency converter apps are not followed.
• Translations are added by hand, per language. There is no auto-translate.

Get started

1. Open the app and click Set up (or Customize) on the Essential Cart Drawer card.
2. Build the cart in the editor. The left menu lists every section, the middle panel holds its settings, and the preview on the right shows each change.
3. Click Save as you go.
4. When you're ready, click Enable at the top of the editor and pick a plan. The Free plan is $0 up to 30 orders a month.
5. In Shopify admin, go to Online Store > Themes > Customize > App embeds and turn on Essential Cart.

The editor has a Preview products picker to show your own products in the preview, a Language picker to preview translations, and a desktop / mobile switch. See Getting Started.

How the editor is organised

The left menu groups the drawer's sections the way they stack in the cart. Each section has a Settings tab and a Design tab (upsells have Offers, Widget and Design). A badge shows whether each section is On or Off.

Drag sections in the menu to change their order in the cart.

1) Settings: the drawer itself

Position

The Position card sets each device separately. Desktop means screens 750px and wider.

Open cart drawer on add to cart also sits here. Untick it to open the drawer only from the cart icon.

Header, empty cart and advanced

• Header: the cart title ({item_count} shows a live count) and an optional logo with Show image.
• Empty cart: a message, an icon, and an optional button with your own text and URL, for example /collections/new.
• Advanced: Custom cart button selector and Custom drawer hide selector, for themes where the app can't find the cart button or hide the theme's own cart on its own.

Design

Font (Use your theme fonts or 8 system fonts), Button and badge corner radius, Cart background, Border color, text colours, and a Custom CSS editor. See Styling the Cart Drawer.

2) Header: timer, announcement bar, spend tiers

Timer

A countdown message at the top of the cart, like Your cart is reserved for {timer}.

• Timer type: Countdown to date (ends at a set date) or Fixed minutes (a separate countdown for each shopper session).
• When it ends: Hide the timer, Repeat the timer, Show message or Remove all items from cart.
• Timer labels for days, hours, minutes and seconds.

Announcement bar

A rich-text message line in the cart, for offers or shipping notes.

Spend tiers

A progress bar that rewards customers for spending more. When a goal is reached, the reward applies automatically at checkout.

Extra options per tier:

• Free gift: one or more gift products, and Allow customer to choose gift with a Choose gift button. Unticked, one gift is picked at random.
• Shipping discount: Exclude shipping rates over amount keeps express rates paid. Unlock with discount codes marks the tier unlocked while a listed code is applied.
• Show reward milestone badge: an icon on the bar for the tier.
• Discount name: the label customers see at checkout.

Each market can use the default tiers or its own. Quick-start templates: Free shipping bar, Buy X get Y, Buy One get One, Spend X → order %, Spend X → Free gift, Custom.

The bar can also show outside the cart, on any page, with the Essential Spend Tiers theme app block. See Spend Tiers.

3) Content: line items, upsells, order note

Product line item

• Variants: a variant picker on each line.
• Quantity selector: plus and minus buttons.
• Strike through price: shows the compare-at price, or the price before a discount.
• Subscriptions: show the selling plan name, a Subscribe & Save button on one-time lines, a Cancel subscription button on subscribed lines, and a plan dropdown (Enable subscription editing). See Subscriptions in the Cart Drawer.

Upsell

Product offers inside the cart.

• Trigger: All products, Specific products or Specific collections.
• Sub-triggers: extra conditions on Cart value, Customers country, Customers tag, Product tag, Products in cart, Number of products in cart and Market. Up to 10 blocks of 10 conditions.
• Offer: hand-picked Products, or Auto recommend (related or complementary products from Shopify).
• Discount: Percentage, Fixed amount or Custom per product, applied automatically. Optionally only while the trigger product is in the cart.
• Widget: 6 layouts (Carousel, Stacked, Gallery carousel, each also Minimal), offer name, badges with {discount} and {savings}, symbols, and 8 button styles.
• Design: every colour, border and text style.

When several offers match, Specific products offers rank first, then collections, then all products, newest first. The top offer always shows. Others show under it only with Show this offer alongside others ticked, up to 3 at once.

Full guides: How to Set Up Cart Upsells: Step-by-Step Walkthrough and Cart Upsells: Multiple Offers, Sub-triggers and Troubleshooting.

Side Cart Upsell

An offer in a column beside the drawer on desktop, on the left or right. On mobile it shows inside the cart in the layout you pick, or not at all. One offer at a time. See Side Cart Upsell.

Empty cart: Upsell

Products shown when the cart is empty. With Auto recommend, picks are based on the product page the customer is viewing, otherwise on your best-seller.

Order note

A note field for gift messages or delivery instructions. It can be collapsable, and required before checkout with your own Validation message.

4) Footer: order upsells to payment icons

Order upsells

A single add-on for the whole order, like shipping protection or gift wrapping, with its own price. Shopify doesn't allow it to be pre-selected.

Run several, and drag them in the menu. See Order Upsells.

Discounts

The discount row and code field.

• Discount tags, and Product discount tags in the discount row for product-level discounts like free gifts and upsell discounts.
• What counts toward the savings total: Discount codes & automatic discounts, Compare-at price savings, Selling plan discounts for preorders and subscriptions.
• Show add discounts action for the code field, which can be collapsable.

See Discounts and the Discount Code Field.

Subtotal

The subtotal row, with Show Total strike through price to highlight savings.

Checkout button

• Button text with {price} for the live total.
• Button action: Go to checkout or Go to cart page.
• Require agreement before checkout: a terms checkbox with links to your policies. Either the button stays disabled until it's ticked, or customers see your Validation message.

Accelerated checkout

Express buttons with their own height for Desktop and Mobile. See Express Checkout Buttons Not Showing.

Payment icons

Static card and wallet icons, with an Icon size.

5) Custom HTML blocks

Click Add custom HTML at the bottom of the menu. Give the block a Name and paste your HTML content. Drag it to any place in the cart. Good for trust badges, a "View cart" link or a delivery note. See Custom HTML Blocks.

6) Sticky Add-to-Cart bar

A bar that stays on screen on product pages with the product, price, variant select and an add-to-cart button. It has its own editor and its own Enable, and doesn't need a paid plan.

• Settings: Show on desktop, Show on mobile, Don't show for sold out products, when it appears (Always, After scrolling past "Add to cart", When "Add to cart" is out of view), what the button does, width, position and offsets.
• Content: product image, name, price, compared-at price, variant select, quantity selector.
• Announcement bar: a message with an optional timer, per device.
• Display: all products, specific products or collections, or all except some.

See The Sticky Add-to-Cart Bar.

7) Languages and markets

• Every section with customer-facing text has a Translations card. Languages come from your Shopify store languages.
• Prices show in the shopper's Shopify Markets currency.
• Spend tiers can differ per market. Upsells can target markets with a Market sub-trigger.

See Translating the Cart Drawer and Sticky Add-to-Cart and Spend Tiers Per Market.

8) Analytics

Open Analytics in the app. Pick a date range at the top. The cart drawer and the sticky bar are tracked separately.

An impression counts once the offer has been on screen for 1 second. A conversion is a paid order with an item from the offer. Revenue added is price times quantity, minus discounts.

9) How rewards and discounts reach checkout

1. Spend tier rewards and upsell discounts are calculated by the app's Shopify discount function, in the cart and again at checkout.
2. Upsell discounts apply only to lines added from that offer.
3. Free gifts are added and removed automatically as the cart changes, one unit per tier.
4. Spend tier goals are measured on what the customer pays after any discount code they entered.

No code is needed for any reward, so customers can't miss a deal by mistyping one.

10) Theme and app compatibility

• The drawer has built-in support for many themes, including Dawn, Horizon, Turbo, Kalles, Shella and Eurus, and a general mode for the rest. If your theme's cart button isn't caught, use the Advanced selectors or contact us.
• Works with one-click checkouts Cashfree, GoKwik and Fastrr, and with apps like Kaching Bundles, Fast Bundle and Easy Protection.
• Upsell products with a single pre-order plan get that plan attached when added. Subscriptions are never attached by an upsell.
• Developers can open the drawer from their own buttons with window.essentialCartApi.openCart(). See Controlling When the Cart Drawer Opens.

11) Plans

• Every plan includes every feature. Plans differ only by monthly order volume.
• Build and preview with no plan. A plan is needed only when you enable the cart drawer.
• The Free plan is $0 up to 30 orders a month, and your first 14 days include the paid tiers.
• The Sticky Add-to-Cart bar doesn't need a paid plan.

See How Pricing Plans Work.

Troubleshooting and common blockers

See Troubleshooting and FAQ.

Last updated October 2026