The shopping cart, everywhere it needs to be: a dropdown in the header, a drawer from either side, a bottom sheet, a centered pop-up or right inside the page. Change quantities, remove with undo, apply coupon codes, watch a progress bar fill up and add suggestions without leaving the page.
The carts above the live section are samples: play with them freely, nothing goes into a real cart.
Filled, soft, outlined, a pill that shows the total, a plain icon or a spinning gradient ring — each with a number bubble or a small dot that bumps when the count changes. Click any of them: the cart drops down underneath.
Filled circle · icon: bag
Soft circle · icon: cart
Outline · icon: basket
Pill + total · icon: box
Plain icon · icon: bag
Gradient ring · icon: cart
The same cart as a drawer from the right, a mobile-style bottom sheet you can swipe down, a centered pop-up and a drawer from the left. Each one traps the keyboard focus while open, closes with Esc or a click outside, and returns you to the button.
Drawer from the right · roomy rows, goal bar
Bottom sheet · dark, card rows
Centered pop-up · color header, compact
Drawer from the left · frosted glass
The floating button sits in the bottom-left corner of the screen for the whole visit — it is the glowing one you may have noticed already. Tap it for a bottom sheet. Next to this text: the frosted-glass button that suits dark or photo headers.
Frosted glass · on a dark header
Everything here is real: add products with the buttons and the cart on the right updates instantly, as does any cart button on this page. Try the coupon code FEKBD ADDONS10 for 10% off, change quantities, remove something and hit “Undo”.
Add a few things
Or open it from a header button
201 premium elements, Mini Cart included.