Shopping Carts
Cart layouts as modals, slide-overs, popovers, and full-page views.
Ecommerce
Checkout · 6 variantsHow To Use This Page
Shopping Carts sits inside the Ecommerce part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 6 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Ecommerce reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Single column
A full-page cart with inline quantity controls and a checkout summary.
Two column with quantity dropdown
A split cart layout with quantities adjusted in a dropdown and a sticky order summary.
With extended summary
A detailed summary with a promo code field, discount line, shipping estimate, and full totals.
Slide-over panel
A simulated slide-over cart with removable items and a fixed summary footer.
Popover
A compact cart popover with mini product cards and fast actions.
Modal
A centered cart modal with a scrollable item area and a fixed action footer.
Variant 1
Single column
A full-page cart with inline quantity controls and a checkout summary.
Current order
Shopping cart
Bark / Large
$32.00
Aspen White / Large
$64.00
Total
$111.68
Variant 2
Two column with quantity dropdown
A split cart layout with quantities adjusted in a dropdown and a sticky order summary.
Cart review
Items in your bag
Bark / Large
$32.00
Aspen White / Large
$64.00
Order summary
Ready for checkout
Total
$113.92
Delivery in 2 to 4 business days.
Variant 3
With extended summary
A detailed summary with a promo code field, discount line, shipping estimate, and full totals.
Bark / Large
$32.00
Aspen White / Large
$64.00
Extended summary
Estimate your order
Total due today
Standard shipping arrives this week.
$105.68
Variant 4
Slide-over panel
A simulated slide-over cart with removable items and a fixed summary footer.
Slide-over cart
Your bag
Bark / Large
$32.00
Aspen White / Large
$64.00
Subtotal
$96.00
Taxes and shipping are calculated at checkout.
Variant 5
Popover
A compact cart popover with mini product cards and fast actions.
Quick cart
3 items in bag
Artwork Tee
Qty 1 · Bark
$32.00
Basic Tee
Qty 2 · Aspen White
$64.00
Variant 6
Modal
A centered cart modal with a scrollable item area and a fixed action footer.
Modal cart
Review your order
Bark / Large
$32.00
Aspen White / Large
$64.00
Total
Including standard shipping.
$104.00