Customizing your cart drawer can boost sales and improve user experience. In fact, according to the Baymard Institute, 69.99% of online shopping carts are abandoned, often due to poor checkout experiences.
By tailoring your cart drawer to match your store’s design and adding helpful features like progress bars and upsells, you can keep customers engaged.
In this guide, you’ll learn how to access, edit, and customize your Shopify cart drawer step by step—no fluff, just actionable tips.
Accessing Your Theme Files
To customize your cart drawer, you first need to access your theme files.
Here’s how:
- Log in to your Shopify admin.
- Navigate to Online Store > Themes.
- Find your current theme and click Actions > Edit Code.
- Look for the files related to the cart drawer. These might include:
- cart-drawer.liquid (for adding or removing elements)
- cart-drawer.js (for functionality)
- Cart-drawer.css or cart-drawer.scss.liquid (for styling)
If you don’t see a file specifically named cart-drawer, it might be part of the main theme files like cart.liquid or a section file. Use the search bar to find the right one.
Note! In this example, we will use the Dawn Theme. If you use a custom cart drawer app, the customization, unfortunately, might not be available.
Customizing the Cart Drawer Layout
Once you’ve located the cart drawer file, you can edit its layout to suit your store’s needs better.
As an example, we will add an MVR Free Progress Bar & Upsell code snippet to a cart drawer to increase our stores’ conversions.
After creating a progress bar in the MVR Free Progress Bar & Upsell app, let’s copy the generated code:
Then, in cart-drawer.liquid file, add a code snippet. We want to choose a location in a cart drawer so that our code snippet is only shown when there are items in the cart.
You can also paste your own customized code, or modify the existing one. You can remove unnecessary items, or add a promotion section in your card drawer.
Save your changes and preview your store to see how it looks!
Here’s the before and after adding an MVR Free Progress Bar to a Cart Drawer.
Styling the Cart Drawer
Your cart drawer should match your store’s branding and be easy to use. To customize its appearance:
Locate the CSS/SCSS File: This might be named cart-drawer.scss.liquid or included in your main theme.scss.liquid.
Update Styles: For example, let’s make the background color orange for the close button:
Do not forget to make it responsive. You may use media queries to ensure the cart drawer works well on mobile devices.
@media (max-width: 768px) {
//your CSS here
}Test the Design: Check how it looks on different screen sizes to ensure it’s user-friendly. By tweaking the layout and styles, you’ll create a polished cart drawer that makes shopping easier for your customers.
Conclusion
Customizing your Shopify cart drawer is a powerful way to enhance your store’s shopping experience and reduce cart abandonment.
Start small, test your changes, and always keep your customer’s experience in mind. A well-designed cart drawer can be the difference between an abandoned cart and a happy, paying customer.
Get yourself the MVR Free Shipping Bar & Upsell app, the easiest way to increase your sales.
