Shopping Cart V04

Author: Colorlib
Released: September 2026
License: CC BY 3.0
A phone-first shopping bag for a skincare shop with large 48 px quantity buttons and 56 px remove buttons that are easy to hit with a thumb. The total and Checkout button stay pinned to the bottom of the screen while the list scrolls, and order details fold away in a native details element. On desktop the same layout sits in a centred app-style column.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 238 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Sticky bottom bar with live total and safe-area padding
- Touch targets of 48 px and larger, no swipe gestures
- Delivery banner switches between free and amount-to-go
- Native details element for order breakdown
- Empty-bag state disables Checkout

