In this guide, you’ll learn how to add Shopify cart drawer with step-by-step instructions, along with best practices to optimize its design and performance.
1. What is a Shopify cart drawer
A Shopify cart drawer is a sliding panel that appears from the side of the screen when a customer clicks the add-to-cart button. Instead of being redirected to a separate cart page, customers can instantly review their selected items, see the total cost, and check shipping details on the current page. Some merchants also refer to this cart interface as a mini cart.
Shopify cart drawer example
2. Why do many Shopify stores use cart drawers
When you add side cart drawer to Shopify, you keep shoppers inside the purchase flow without forcing them to navigate away from the product page. This uninterrupted experience directly improves user experience (UX), reduces abandoned cart, and creates natural opportunities to increase average order value (AOV) through upsell and cross-sell tactics.
The data shows that a well-designed cart experience is a primary driver of store performance. An analysis of more than 20,000 Shopify stores found that:
- Cart drawers deliver a 3.2X revenue multiplier before checkout, compared to 2.2X for full cart pages and 1.95X for popup carts.
- Optimized drawers increased AOV by 73.8%.
- Cart-to-checkout rate reached 5.66%, nearly double the global e-commerce average of 3%.
3. Different ways to add Shopify cart drawer
Now that you know why a cart drawer can make a real difference, the next step is knowing how to add cart drawer to Shopify. There are 3 main approaches:
3.1 Add Shopify cart drawer using custom code
This approach is built for developers, or store owners comfortably working with HTML, CSS, JavaScript, and Shopify Liquid. In short, you'll create new cart drawer files inside your theme's source code, then connect them to activate the slide-out panel.
Steps to add AJAX cart drawer Shopify:
- Step 1: Start by going to Online Store > Themes, select your active theme, then click Edit Code. There are 2 folders that you need to work with: Asset & Section.
Step to edit store's code
- Step 2: Next, open the Assets folder and create two new files: drawer.css and drawer.js. Add your styling rules to the Shopify cart drawer CSS file and your JavaScript logic to the JS file using these codes:
.drawer { display: none; } .drawer__header { padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; } .drawer__close { margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; } .drawer__wrapper { position: fixed; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; max-width: 500px; z-index: 9999; overflow: auto; transition: transform 0.3s; background-color: #fff; display: flex; flex-direction: column; box-shadow: 0 2px 6px #777; } .drawer.is-active { display: block; } .drawer.is-visible .drawer__wrapper { transform: translateX(0); }var drawer = function () { var settings = { activeClass: 'is-active', visibleClass: 'is-visible', selectorTarget: '[data-drawer-target]', selectorTrigger: '[data-drawer-trigger]', selectorClose: '[data-drawer-close]', }; var openDrawer = function (trigger) { var target = document.getElementById(trigger.getAttribute('aria-controls')); target.classList.add(settings.activeClass); document.documentElement.style.overflow = 'hidden'; setTimeout(function () { target.classList.add(settings.visibleClass); }, 50); }; var closeDrawer = function (event) { var closestParent = event.closest(settings.selectorTarget); closestParent.classList.remove(settings.visibleClass); document.documentElement.style.overflow = ''; setTimeout(function () { closestParent.classList.remove(settings.activeClass); }, 350); }; var clickHandler = function (event) { var toggle = event.target, open = toggle.closest(settings.selectorTrigger), close = toggle.closest(settings.selectorClose); if (open) { openDrawer(open); } if (close) { closeDrawer(close); } if (open || close) { event.preventDefault(); } }; document.addEventListener('click', clickHandler, false); }; drawer();- Step 3: Then move to the Sections folder and create a new file called drawer.liquid. Define the HTML layout here using this code:
<section class="drawer" id="drawer-name" data-drawer-target> <div class="drawer__overlay" data-drawer-close tabindex="-1"></div> <div class="drawer__wrapper"> <div class="drawer__header"> <div class="drawer__title">Continue Shopping</div> <button class="drawer__close" data-drawer-close aria-label="Close Drawer"></button> </div> <div class="drawer__content" id="cart__drawer"> <div id="cart__drawer_items"></div> <div style="margin-top: 50px"> <h4>Total: <span id="cart__total_price"></span></h4> <a id="cart__checkout_btn" href="/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Proceed to Checkout</a> </div> </div> </div> </section><script> fetch('/cart.js') .then((resp) => resp.json()) .then((data) => { if (data.items.length > 0) { data.items.forEach(function(product) { document.getElementById('cart__drawer_items').innerHTML += '<img src="' + product.featured_image.url + '" alt="' + product.featured_image.alt + '"><h5>' + product.title + '</h5><p>' + product.quantity + ' x ' + Shopify.formatMoney(product.line_price) + '</p>'; }); document.getElementById('cart__total_price').innerHTML = Shopify.formatMoney(data.total_price); } else { document.getElementById('cart__drawer_items').innerHTML = '<p>Cart is empty</p>'; } }); </script>- Step 4: After that, open theme.liquid and link both CSS and JS files inside the headtag.
- Step 5: Finally, open header.liquid, locate the cart icon anchor tag, and modify it so it triggers the drawer instead of redirecting shoppers to a separate cart page. Click "Save" to save all changes.
<a href="#" class="site-header__icon site-header__cart" data-drawer-trigger aria-controls="drawer-name" aria-expanded="false"> {% include 'icon-cart' %} <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span> <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}"> <span data-cart-count>{{ cart.item_count }}</span> </div> </a>- Strengths: Free to implement, no additional cost involved
- Weaknesses:
- Requires solid knowledge of coding, not suitable for non-developers
- JavaScript errors are hard to debug without experience, and a single misplaced edit can break your entire storefront
- Time-consuming compared to other methods
3.2 Add Shopify cart drawer via theme features
Some Shopify themes come with a built-in cart drawer with no coding required. Both free and paid options support this feature, including popular themes like Dawn, Brooklyn, Pop, Supply,.... If your current theme already includes it, this is the fastest Shopify cart drawer setup available.
Steps to add mini cart shopify via theme settings:
- Step 1: From your Shopify admin, go to Online Store > Themes > Edit theme
- Step 2: Click the gear icon to open Settings, then navigate to the Cart section
- Step 3: Under Cart type, select Drawer and save your changes
Shopify theme Settings > Cart > Cart type
Verdict:
- Strengths:
- Easy to use
- No extra cost involved
- Automatically syncs with your theme's fonts, colors, and layout for a seamless look
- Weaknesses:
- Limited to basic functionality, typically only shows items, quantities, and totals
- Difficult to customize to match the brand's style
- Any further personalization still requires code or third-party apps due to theme compatibility constraints
3.3 Add Shopify cart drawer using apps
Using a Shopify cart drawer app is the easiest method of the three with the most feature-rich, with no coding required. Unlike built-in theme options, cart drawer apps typically come loaded with advanced marketing features that help reduce cart abandonment and increase AOV rights at the pre-checkout stage.
Steps to get started:
- Step 1: Go to the Shopify App Store and search for a cart drawer app that fits your needs
- Step 2: Install the app to your store and follow the onboarding setup
- Step 3: Customize font, color,... and enable additional features such as progress bars, product suggestions if needed, then save and publish
There are a lot of apps to add Shopify cart drawer
Verdict:
- Strengths:
- Easiest and fastest method
- Packed with powerful marketing features beyond basic cart display
- Easy to edit cart drawer to match a specific brand style
- Weaknesses:
- Some apps come with a monthly subscription fee
- Adding too many Shopify apps can slow down your store's performance
- Potential app conflicts with your existing theme or other installed apps
Among the available options, using an app remains the most practical choice for most Shopify merchants. In the next section, we'll walk you through a complete step-by-step guide using Snap Cart Drawer, one of the most highly rated cart drawer apps, so you can get your cart drawer up and running in just a few minutes.
4. Step-by-step guide to add Shopify cart drawer using snap cart drawer
This Shopify cart drawer tutorial walks you through setting up Snap Cart Drawer from start to finish. The process is straightforward and requires no coding knowledge , just a few clicks inside your Shopify admin and the app itself.
- Step 1: Visit this link or search for "Snap Cart Drawer Progress Bar" in the Shopify App Store, then click Install to add it to your store
Install the app
- Step 2: After installation, the app will guide you through an initial setup flow. Select your store type and the system will automatically suggest suitable features and color schemes tailored to your business
Snap Cart Drawer set up page
- Step 3: Enable the app embed inside your theme editor. This step activates the add to cart drawer functionality and makes it visible on your storefront
Enable the app embed
- Step 4: Return to the app's main dashboard, where you can explore and configure the following features:
- Appearance: Customize your cart drawer's visual style including background, text, buttons, icons, cart body, and cart footer
- Multiple Carts: Set up and manage several cart drawer variations targeting different markets or customer segments
- Sticky Button: Keep a floating cart icon always visible on the side of the screen for quick access
- Analytics: Track and measure your cart drawer's performance over time
Set up the cart drawer
- Step 5: Select a feature and customize it to fit your needs. Once finished, click 'Save' to apply changes or 'Discard' to cancel.
Modify the cart's appearance
5. Best practices after you add Shopify cart drawer
5.1 Add supporting features and place them strategically
Once your cart drawer is live, the real opportunity begins. A well-structured Shopify cart drawer is one of the most effective spots to increase AOV without disrupting the shopping experience. That said, element placement matters just as much as the features themselves. A cluttered or poorly visual hierarchy can feel intrusive and push shoppers away rather than nudging them toward checkout.
Here is how to structure your cart drawer from top to bottom for maximum impact:
- Free shipping progress bar sits at the very top, immediately motivating shoppers to add more items to unlock free shipping. You can further enhance this by dividing the progress bar into multiple milestones, such as tiers for free shipping, percentage discounts, or free gifts to gamify the cart experience and maximize order value.
- Items list comes next, showing product names, thumbnails, alongside integrated add/remove item buttons for seamless quantity updates, allowing shoppers to manage their cart with ease.
- Cart drawer upsell and cross-sell section follows, placed right after the items list where shoppers are already engaged with their selections
- Discount field is positioned below the product area, allowing shoppers to apply codes before seeing their final total. For optimal performance, it should be designed with a minimal footprint and auto-fill to maintain user focus.
- Subtotal section appears next, giving a clear cost summary before the final step
- Checkout button anchors the bottom of the drawer, always visible and easy to tap
One more element worth enabling is cart drawer auto open. When activated, the auto-open cart triggers the drawer to slide out automatically each time a shopper clicks "Add to Cart". Pair this with dynamic cart updates so item quantities and totals refresh instantly without a page reload, keeping the entire experience smooth and responsive.
Example of a cart drawer with good visual hierachy
5.2 Match cart drawer design with your brand style
Adding a cart drawer to your Shopify store is only half the job. How it looks matters just as much as how it functions. A cart drawer that feels visually disconnected from the rest of your store can quietly erode trust and make your brand appear less polished, even if the checkout experience itself works perfectly.
To keep your cart layout consistent with your overall brand style, pay attention to these key design elements:
- Colors: Use the same primary and accent colors found across your storefront, including buttons and links
- Typography: Match the font family and weight used in your theme, so the drawer feels like a natural extension of the page
- Icons and imagery: Use the same icon style throughout to avoid visual inconsistency inside the drawer
5.3 Test Cart Drawer Across Devices and Screen Sizes
Before going live, cross-device testing is a step you should never skip. A cart drawer that looks perfect on desktop may display broken layouts, overlapping elements, or unresponsive buttons on mobile and tablet.
Run tests across all three device types and watch for these common issues:
- Cart drawer not working on mobile: The drawer fails to open or close properly on touch screens. Check for JavaScript conflicts with your theme or other installed apps and review the browser console for script errors
- Layout breaking on smaller screens: Product thumbnails, product prices, or buttons overlap and become unreadable. Revisit your CSS and apply proper responsive design rules for each breakpoint
- Drawer content not loading correctly: Items, totals, or the checkout button fail to appear. This often points to a script loading issue or a theme compatibility conflict introduced after a recent update
If your issue persists after checking the above, you should contact the app's support team to get help.
Conclusion
Add Shopify cart drawer is one of the most impactful upgrades you can make to your store's checkout experience. Whether you choose custom code, built-in theme features, or a dedicated app, the right approach depends on your technical comfort level and business goals. What matters most is that your cart drawer is well-designed, properly tested, and built to convert.
FAQs (Frequently Asked Questions)
1. How to create cart drawer in Shopify?
You can create a cart drawer in Shopify using three methods: writing custom code with HTML, CSS, JavaScript, and Shopify Liquid; enabling it through your theme settings if supported; or installing a cart drawer app from the Shopify App Store. For most merchants, the app approach is the fastest and most reliable option.
2. How to open cart drawer in Shopify using JavaScript?
To open cart drawer using JS, add an event trigger to your cart icon so it listens for a click event. When fired, your JavaScript function updates the DOM to toggle the drawer's visibility, typically by adding an active class without requiring a page reload or redirect.
3. What is the best Shopify cart drawer app?
The best Shopify cart drawer app depends on your store's needs, but top-rated cart drawer apps typically offer a visual editor, upsell and cross-sell features, a free shipping progress bar, and smooth theme integration without requiring any coding knowledge or configuration complexity.