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
- Enable the app. Go to the Cart Drawer section in your Vitals dashboard and toggle it on.
- Disable your theme's native cart drawer if it has one — running both will cause duplicate drawers and unexpected behavior.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
| Setting | Type | Description |
|---|---|---|
| Color scheme | Dropdown | Overall color theme for the drawer. Options: Light (default), Dark, Custom. Custom unlocks trait-based color controls. |
| Main button action | Dropdown | Controls what the primary button does. Options: Checkout (default) — proceeds directly to Shopify checkout; Go to cart — navigates to the cart page. |
| Show price | On/Off toggle | Shows the cart item price. On by default. |
| Overlay Priority | Number field | Z-index value controlling how the drawer layers over other page elements. Default: 1000. Increase if the drawer appears behind other overlays on your theme. |
Text Labels
| Setting | Type | Description |
|---|---|---|
| Cart | Text field | The heading displayed at the top of the drawer. Default: "Cart". |
| Checkout button label | Text field | Label on the primary checkout button. Supports {{ amount }} to show cart total. Default: "Go to checkout • {{ amount }}". |
| Go to cart | Text field | Label on the button when "Main button action" is set to Go to cart. Supports {{ amount }} . Default: "Go to cart • {{ amount }}". |
| Continue shopping | Text field | Link shown in the drawer header to close the drawer and return to browsing. |
| Subtotal | Text field | Label for the subtotal line. Default: "Subtotal". |
| Old price | Text field | Label shown next to crossed-out original prices when a discount is active. |
| Show discounts and savings | Text field | Label for the discounts/savings summary line. |
| We couldn't update the item quantity. Try reloading the page. | Text field | Error message shown when a quantity update fails. Translatable. |
| Could not add item to the cart. Please try again later. | Text field | Error message shown when adding an item fails. Translatable. |
Empty State
| Setting | Type | Description |
|---|---|---|
| Title | Text field | Message shown when the cart is empty. Default: "You don't have any products in your cart." |
| Continue shopping | Text field | Button label on the empty state screen. |
Order Note
| Setting | Type | Description |
|---|---|---|
| Show order note | On/Off toggle | Adds a text area where customers can leave special instructions. Off by default. |
| Label | Text field | Heading above the order note area. Default: "Add order note". |
| Placeholder text | Text field | Placeholder inside the order note textarea. Default: "Special instructions". |
| Order note expanded by default | On/Off toggle | Shows the order note textarea open on load rather than collapsed. Off by default. |
Disclaimer
| Setting | Type | Description |
|---|---|---|
| Show disclaimer | On/Off toggle | Adds a short notice below the subtotal about shipping, taxes, and discounts. Off by default. |
| Shipping and discounts disclaimer | Text field | The disclaimer text. Default: "Discounts and shipping calculated at checkout." |
Discount Code
| Setting | Type | Description |
|---|---|---|
| Show Discount Code | On/Off toggle | Adds a discount code input field to the drawer. Off by default. |
| Discount Code Expanded by Default | On/Off toggle | Shows the discount code field open on load instead of collapsed. Off by default. |
| Discount Code | Text field | Label for the discount code field. Default: "Discount Code". |
| Enter discount code | Text field | Placeholder text inside the discount code input. |
| Apply | Text field | Label on the apply button. Default: "Apply". |
| Discount applied! | Text field | Success message shown when a code is applied successfully. |
| Discount code could not be applied | Text field | Error message shown when a code fails. |
| Discount calculated at checkout | Text field | Note shown when the discount will be applied at the Shopify checkout rather than in the drawer. |
Integrations
| Setting | Type | Description |
|---|---|---|
| Show messages from the Announcement Bar app | On/Off toggle | Pulls active Announcement Bar content into the drawer's bar area. Off by default. |
| Show the Cart Notice app message | On/Off toggle | Displays your Cart Notice app message inside the drawer. Off by default. |
Product Upsells
| Setting | Type | Description |
|---|---|---|
| Show product upsells | On/Off toggle | Enables product recommendation upsells from Upsell Builder inside the drawer. On by default. |
| Color scheme | Dropdown | Color theme for the product upsells section. Options: Light (default), Dark, Custom. |
| Offer title | Text field | Heading shown above the upsell products. Default: "You may also like". |
| Button text | Text field | Label on the add-to-cart button for each upsell product. Default: "Add to cart". |
Goals
| Setting | Type | Description |
|---|---|---|
| Show goals | On/Off toggle | Enables the goal progress bar (e.g., "Spend $X more for free shipping") from Upsell Builder. Off by default. |
| Color scheme | Dropdown | Color theme for the goals section. Options: Light (default), Dark, Custom. |
Gifts
| Setting | Type | Description |
|---|---|---|
| Show Gifts | On/Off toggle | Enables gift product claims from Upsell Builder Gift offers inside the drawer. Off by default. |
| Color scheme | Dropdown | Color theme for the gifts section. Options: Light (default), Dark, Custom. |
Bar
| Setting | Type | Description |
|---|---|---|
| Color scheme | Dropdown | Color theme for the bar/announcement area at the top of the drawer. Options: Light (default), Dark, Custom. |
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.