Cart Drawer

Cart details appear in a drawer that slides out from the side of the page.

Cart Drawer replaces your store's default cart page redirect with a smooth slide-in panel that appears whenever a customer adds an item to their cart. Instead of leaving the product page to view their cart, customers see their items instantly in a side drawer — which keeps them in the shopping flow and cuts friction on the path to checkout. The drawer can also surface upsells, goals, gifts, announcement bars, discount codes, and order notes — so a single panel handles your full cart experience.

Is this for me?

Almost certainly yes if you want shoppers to stay on the page after they hit "Add to Cart" instead of being bounced to a separate cart page. Every redirect is a chance for a customer to get distracted, close the tab, or lose momentum. A drawer keeps them in the flow and gives them a clear next step.

If your Shopify theme already has its own cart drawer, you should turn that off before enabling this one — running both at the same time will cause conflicts.

What's Included

Slide-In Cart Panel

When a customer clicks "Add to Cart" on any page, the drawer slides in from the side without navigating away. Customers can review their cart, adjust quantities, and head to checkout — all without losing their place.

Per-Section Color Schemes

When this matters: If you want a clean drawer but a more eye-catching upsell or goal section, color schemes let you treat each part of the drawer separately.

The drawer lets you set independent color schemes for each section. The "Color scheme" setting appears on the overall drawer (General), the Bar area, Gifts, Product Upsells, and Goals sections — each can be set to Light, Dark, or Custom. Choosing Custom unlocks trait-based color controls so every section can match your exact brand palette.

Product Upsells

The drawer can display product recommendations right inside the cart. Enable "Show product upsells" to show suggestions powered by your Upsell Builder offers. Customize the heading with "Offer title" (default: "You may also like") and the add button with "Button text" (default: "Add to cart").

Goals and Gifts

When to use these: If you've configured Goal or Gift offers in Upsell Builder — like "Spend $50 for free shipping" or "Get a free sample at $75" — surfacing them inside the drawer is the perfect place to remind customers right as they're deciding whether to add more.

Enable "Show goals" to display a progress bar toward the next reward. Enable "Show Gifts" to let customers claim gifts as they qualify, directly from within the drawer.

Announcement Bar and Cart Notice Integration

The drawer integrates with two other Vitals apps to show messages in its bar area. Enable "Show messages from the Announcement Bar app" to pull your active announcement into the drawer, or "Show the Cart Notice app message" to display your Cart Notice content there. Useful when you want a single message surface and don't want a separate top bar competing with the cart for attention.

Built-In Discount Code Input

When to enable this: Turn this on if you regularly run promo codes — letting customers apply them inside the drawer is faster than waiting for checkout and reduces "I forgot to enter the code" support tickets.

Toggle "Show Discount Code" to add the input, and optionally enable "Discount Code Expanded by Default" to show it open on load. All labels — field heading, placeholder, apply button, success and error messages — are translatable.

Order Note

Enable "Show order note" to give customers a text area for special instructions (gift wrapping, delivery preferences, allergy notes, etc.). The "Label" and "Placeholder text" fields are both translatable. Enable "Order note expanded by default" if you want the note field open instead of collapsed.

Disclaimer

Enable "Show disclaimer" to add a small notice below the subtotal reassuring customers that shipping, taxes, and discounts get applied at checkout. The text in the "Shipping and discounts disclaimer" field is fully editable and translatable (default: "Discounts and shipping calculated at checkout.").

Checkout vs Cart Button

The "Main button action" setting controls what the primary action button does:

• Checkout — sends customers straight to the Shopify checkout. Fastest path to conversion.
• Go to cart — takes them to the standard cart page first. Use this if you want a final review step or you have logic on your cart page that customers should see.

Both button labels — "Checkout button label" and "Go to cart" — are fully customizable and support the {{ amount }}  variable to show the cart total inline (e.g., "Go to checkout • $42.50").

Fully Translatable Labels

Every visible text string in the drawer has a dedicated setting — the drawer header, subtotal label, continue shopping links, old price label, empty state title and button, and all error messages for failed cart operations. This makes the drawer ready for multilingual stores without touching any theme code.

How It Works

What Customers See

When the app is enabled, it attaches a hidden drawer panel to every page on the store. Whenever a customer adds a product to their cart — from a product page, a collection page, or any upsell widget — the drawer slides in from the side and shows the current cart contents.

Inside the drawer, customers see their cart items with product images, titles, variant details, prices, and quantity controls. Below the cart items they see the subtotal and the primary action button. Any sections you've enabled (upsells, goals, gifts, announcement bar, discount code, order note, disclaimer) appear in their configured order.

When the cart is empty, the drawer shows the empty state title and a "Continue shopping" button.

The drawer closes when the customer clicks outside it or uses the close button in the header.

What You Do in the Dashboard

The Cart Drawer has no fixed injection point in your theme — it attaches itself to the page automatically when enabled. From the Cart Drawer section of your Vitals dashboard you can:

• Toggle the app on or off
• Choose color schemes per section
• Set the main button action (Checkout vs Go to cart)
• Enable or disable each section (upsells, goals, gifts, discount code, order note, disclaimer)
• Turn on the Announcement Bar and Cart Notice integrations
• Customize every visible text string

Setup, Step by Step

1. Enable the app. Go to the Cart Drawer section in your Vitals dashboard and toggle it on.
2. Disable your theme's native cart drawer if it has one — running both will cause duplicate drawers and unexpected behavior.
3. Pick a main button action. Set "Main button action" to Checkout for the fastest path to payment, or Go to cart if you want customers to review the cart page first.
4. Set your color schemes. Choose Light, Dark, or Custom for the General color scheme. If you want different styling for the bar, upsells, goals, or gifts sections, set each one independently.
5. Enable the sections you want. Turn on "Show product upsells", "Show goals", "Show Gifts", "Show Discount Code", "Show order note", "Show disclaimer", and the Announcement Bar / Cart Notice integrations based on what your store offers.
6. Configure upsell content. If using product upsells, update "Offer title" and "Button text" to match your brand voice. Goals and gifts pull their content automatically from your active Upsell Builder offers.
7. Customize text labels. Update the "Cart" header, button labels, empty state text, and the rest of the translatable strings to match your language and brand.
8. Test the drawer. Add a product to your cart on the storefront to confirm the drawer slides in, your enabled sections appear, and the checkout path works.

Tips for Getting the Most Out of It

• Start with Checkout as the main action. Unless you have a strong reason to send shoppers to the cart page first, fewer steps usually mean more conversions.
• Match the drawer's color scheme to your theme. A drawer that visually clashes with your storefront feels glued-on. Light or Dark covers most cases; reach for Custom when those don't match exactly.
• Add a Goal or Gift offer in Upsell Builder before turning those sections on. The toggles do nothing on their own — they surface offers that already exist.
• Use the disclaimer if you charge shipping or taxes at checkout. It heads off the "why did my total go up?" support ticket.
• Test on mobile. Most carts get opened on phones. Add an item, open the drawer, and walk through the full flow on your actual device before going live.

Settings Reference

General

Text Labels

Empty State

Order Note

Disclaimer

Discount Code

Integrations

Product Upsells

Goals

Gifts

Bar

Frequently Asked Questions

How does the Cart Drawer open?

The drawer opens automatically whenever a customer adds a product to their cart. There's no button to configure — the drawer intercepts add-to-cart events across the store and slides in on its own.

Can I use both the Cart Drawer and my theme's built-in cart drawer?

You should disable your theme's native cart drawer to avoid conflicts. Vitals Cart Drawer is designed to replace the theme's cart behavior. If both are active, customers may see duplicate drawers or unexpected behavior.

What's the difference between Light, Dark, and Custom color schemes?

Light and Dark are pre-built themes with default colors that suit light or dark storefronts. Custom unlocks trait-based color controls so you can set specific colors for backgrounds, text, buttons, and borders to match your brand exactly. Each section of the drawer (General, Bar, Gifts, Goals, Product Upsells) can have its own independent color scheme.

Do I need Upsell Builder to use Product Upsells, Goals, and Gifts?

Yes. The Cart Drawer's product upsells, goals, and gifts sections surface content from active Upsell Builder offers. If Upsell Builder isn't installed — or those offer types aren't configured — those sections won't show anything even if their toggles are on.

Can I show an Announcement Bar message inside the Cart Drawer?

Yes. Enable "Show messages from the Announcement Bar app" to pull your active Announcement Bar content into the drawer's bar area. The content and styling come from your Announcement Bar app settings.

What is Cart Notice and how does it work inside the drawer?

Cart Notice is a separate Vitals app that lets you show a custom notice message in the cart. When you enable "Show the Cart Notice app message" in Cart Drawer settings, that message appears inside the drawer's bar area alongside or instead of the Announcement Bar content.

Can the drawer show a discount code field?

Yes. Enable "Show Discount Code" to add a discount code input directly inside the drawer. Customers can type a code and apply it without leaving. Note that some discount types are handled at Shopify's checkout rather than in the cart — the "Discount calculated at checkout" label covers that case.

Can I translate the Cart Drawer into another language?

Yes. Every visible text string — the header, button labels, subtotal, empty state message, discount code labels, order note labels, error messages, and disclaimer — has a dedicated translatable setting. Update each field to your target language.

Can I show cart item prices?

Yes. "Show price" is enabled by default. Turn it off to hide product prices from the cart item list in the drawer.

What does "Overlay Priority" control?

It sets the CSS stacking order (z-index) of the drawer. If the drawer appears behind other elements like sticky headers, chat widgets, or cookie banners, increase this number until the drawer renders on top. Default is 1000.

What happens when the cart is empty?

The drawer shows the empty state title and a "Continue shopping" button. Both can be customized in the Empty State settings section.

Can I change what the main action button does?

Yes. Set "Main button action" to Checkout to send customers directly to Shopify checkout, or Go to cart to take them to the standard cart page first. Customize the button label for each option using "Checkout button label" and "Go to cart" respectively. Both support the {{ amount }}  variable to display the cart total inline in the button.