Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Cart Drawer (Mini Cart) — Free Website Section Template
Cursor & page effects · v1.0.0 · Updated 2026-11-14 · Responsive · GSAP animation · HTML, React & Vue
Extend with AI
Take This Section Further With AI
Ask an AI assistant to adapt the drawer: add upsell suggestions, a gift-note field, saved carts across devices, or a coupon box.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a slide-in cart drawer in plain HTML, CSS and JavaScript.
- A fixed panel (420 px wide, full height) that slides in from the right with a dimmed backdrop. Header with "Your cart" and a close button; a free-shipping bar ("You are $42 away from free shipping" with a progress bar); a list of items (photo, name, options, unit price, quantity stepper, Remove, line total); a footer with Subtotal, a note, a Checkout button and a View cart link; an empty state with a Continue shopping button.
- A cart object saved to localStorage with add, remove, set quantity, count and subtotal, and a custom event or subscriber so the drawer, a cart badge and other pages stay in sync. Build rows with createElement and textContent only.
- Accessibility: role="dialog" aria-modal, focus moves to the close button on open, Tab is trapped, Esc and the backdrop close it, focus returns to the opener and the page does not scroll behind it.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
About this section
Cart Drawer — Free Slide-In Mini Cart Template
Cart Drawer is a free slide-in mini cart for online stores. It opens from the side when a shopper adds a product or taps the cart icon, lists the items with photos and options, lets them change quantities or remove things, and shows a free-shipping progress bar, the subtotal and a Checkout button, with View cart and Continue shopping links. It takes no space in the page.
The shared cart behind it
All the shop sections read one small cart, kept in the visitor's browser. The cart is saved in the visitor's browser (localStorage), so it works on a static site with no server and no account. Add to cart on the Product Detail Page, the Product Grid, the Product Listing and the recommendation strip all fill it, and the cart icon and badge in the ecommerce mega menus open the drawer and show the real count.
Free shipping that nudges
Set a threshold such as 150 and the drawer shows "You are $42 away from free shipping" with a bar that fills as items are added, then "You have free shipping!". The same rule is used on the cart and checkout pages.
Accessible by design
The drawer is a dialog: focus moves to the close button when it opens, Tab stays inside, Esc and the backdrop close it, focus returns to the button that opened it, and the page behind does not scroll. Reduced-motion users get no slide animation.
Edit and export
Edit every label, the free-shipping amount and message, and which side it slides from. Export HTML, a ZIP, React or Vue.
Why use it
Why Use the Cart Drawer (Mini Cart)
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading, empty cart, totals & buttons, free shipping bar, position and labels (screen readers) in the panel. Switch the free shipping bar on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
In real websites
Website Templates That Use the Cart Drawer (Mini Cart) Section
The Cart Drawer (Mini Cart) section is part of 3 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Online Store Website (Full Shop), Cafe & Coffee Shop Website (Order Online), Fashion Boutique Website (Online Store). Open any of them in the builder to edit the whole page, or keep customising this section by itself.
Got questions?
Frequently Asked Questions
In the visitor's browser, in localStorage. It survives page loads and closing the tab, works across the pages of your site and needs no account or server. It is not shared between devices.
Adding to the cart from a section with the built-in cart switched on opens it, and so does any element marked data-cart-open, such as the cart icon in the mega menus.
Type a number in "Free shipping over", such as 150. Leave it empty to hide the progress bar. The cart and checkout pages use the same number.
No. The Checkout button goes to your checkout page, which sends the order by form, WhatsApp or a payment link. See the Checkout Page section.
It saves an editable copy of your Cart Drawer (Mini Cart) in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.