How to create a cart drawer in Shopify: Power up your online store with a cart drawer
A sticky cart button is an easy way to boost your Shopify store sales. Here’s how to add a cart drawer in minutes
The best online stores include clever features that encourage us all to buy more: recommendations, wishlists, “save for later’, free shipping and so on. If you’re a user of the powerful ecommerce platform Shopify, there’s an easy way to add all these functions to your online store in one go: create a cart drawer.
At its most basic, a cart drawer is a sticky button that launches a pop-out cart panel from any page of your store, allowing your customers to see and manage their cart from anywhere. The best cart drawers are fully customisable shopping panels, packed with clever ways to boost sales.
Adding a cart drawer to your Shopify store is quick and usually free. The easiest way is to add a cart drawer app from the Shopify App Store, but if you’re handy with code, you can also create your own cart drawer in Shopify by writing a few lines of CSS.
In this article we’ll reveal the best Shopify cart drawer apps, and explain how to add one to your Shopify store in just a few clicks.
Why does my Shopify store need a cart drawer?
A cart drawer is one of those functions that make the best-designed online stores and apps a pleasure for customers to use. Whatever page of the store you’re on, you can click the cart icon to see and manage your cart without interrupting your browsing.
Happy customers buy more stuff, so it’s wise to include a well-designed cart drawer on your Shopify store. A cart drawer has also been shown to reduce the chance of shoppers abandoning their carts and failing to complete their purchases.
The best cart drawers include additional features to help you sell more and retain customers:
- “Save for later” options
- Quick buy options (buy it now)
- Wishlists
- Discount code boxes
- “You may also like…” recommendations, often powered by AI
- Shipping options and discounts
- Digital payment options, including PayPal and BNPL (buy now pay later).
How do I add a cart drawer from the Shopify App Store?
Many Shopify themes have a basic cart drawer built in. To enable it, head to the Template section of your theme’s editor, unfurl the menu and click Cart Drawer, if it’s there.
You’ll get much more choice over the style and functionality of your cart drawer if you install one from the Shopify App Store. Go to the Shopify App Store and search for “cart drawer”, or click “Apps by category” and choose “Marketing and conversion” to see a wide range of sticky carts and upselling tools.
To try out any app, click it and then click “Add app”. On the page that opens, review the app’s required permissions and, if you’re happy, click “Install app”. You can then test the cart drawer app on your store, regardless of whether or not you’ve published it.
If this is the first time you’ve added an app to your Shopify store, you’ll be prompted to enable app integration. You can either do this when adding the app, or beforehand by going to your Admin page and clicking Themes, Customize, “App embeds” (the blocky icon below the paintbrush), then Save.
You’re free to try out as many cart drawer apps as you like. Many are free to add and use, while others charge a subscription fee, usually after a free trial.
READ NEXT: What is Shopify?
What are the best Shopify cart drawer apps?
The best cart drawers are quick, easy and unobtrusive for your customers to use, and enhance their shopping experience rather than getting in the way of it. Many cart drawer apps can be customised to suit your store, either via drag-and-drop or by tweaking the code, and most include additional upselling features.
Here are a few of our favourites, all available to add from the Shopify App Store.
1. Best free Shopify cart drawer app: K Slide Cart
Price: Free
This customisable sliding cart drawer adds a small cart icon to every page of your online store, so your customers can check and manage their cart from anywhere. Optional features include discount code boxes, wishlists and the option to save items for later.
2. Best for growing your sales: Upsellkit
Price: Free for up to 500 views per month, then $11 (£9)/mth
“You may also like…” has become an upselling must-have for online sellers. Upsellkit uses AI to automatically generate targeted cross-selling, upselling and discount recommendations in real time, then offer them to your buyer via the customisable cart drawer.
3. Best for Shopify stores with international buyers: UpCart
Price: Free for stores in development, then $15 (£12)/mth for up to 200 orders; $25 (£20)/mth for up to 500; $40 (£32)/mth for up to 1,000
This feature-rich cart drawer app will help your customers understand their shipping options and let them toggle extras such as insurance. You can customise it using HTML as well as CSS, and add upselling features such as free shipping rewards and marketing announcements.
How do I create a Shopify cart drawer using code?
If you’re a confident coder and you want full control over how your cart drawer looks and behaves, writing it from scratch may be the best option for you. You can either edit your theme’s existing cart drawer code via its code editor, or add a completely new cart drawer using your theme’s custom CSS feature.
There are plenty of cart drawer code snippets in Github and the Shopify Community forum to draw upon if you’d rather not write all the code yourself. Be aware that most files that make up a Shopify theme are written in Liquid, Shopify’s templating language, while CSS accounts for most of the rest, although you’ll also find HTML, JSON and JavaScript.
Shopify recommends that you only attempt to edit the code for a theme if you know HTML and CSS, and you have a basic understanding of Liquid. Shopify also recommends that you duplicate your theme to create a backup before you start tweaking its code, so you can ditch your changes and start again if you need to.
