e-commerce cart checkout shopping order cart shopping checkout quantity total order shopping cart page layout e-commerce cart with summary
Shopping Cart Base
Fetch pattern JSON:
curl https://webspire.de/patterns/shopping-cart/base.json base.html
<section
class="ws-shopping-cart"
style="
--ws-shopping-cart-bg: oklch(0.98 0.005 75);
--ws-shopping-cart-text: oklch(0.2 0.02 75);
--ws-shopping-cart-text-soft: oklch(0.45 0.015 75);
--ws-shopping-cart-border: oklch(0.85 0.01 75);
--ws-shopping-cart-accent: oklch(0.55 0.15 150);
--ws-shopping-cart-action-bg: oklch(0.35 0.02 75);
--ws-shopping-cart-action-text: oklch(0.98 0.005 75);
"
>
<div class="mx-auto max-w-4xl px-6 py-16 lg:py-24" style="background:var(--ws-shopping-cart-bg);color:var(--ws-shopping-cart-text)">
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-shopping-cart-text)">Shopping Cart</h1>
<!-- Cart Items -->
<div class="mt-8 space-y-0 divide-y" style="border-top:1px solid var(--ws-shopping-cart-border);border-color:var(--ws-shopping-cart-border)">
<!-- Item 1 -->
<div class="flex gap-4 py-6 sm:gap-6">
<div class="h-24 w-24 shrink-0 rounded-lg sm:h-32 sm:w-32" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Wireless Headphones"></div>
<div class="flex flex-1 flex-col justify-between">
<div class="flex justify-between">
<div>
<h3 class="text-base font-semibold" style="color:var(--ws-shopping-cart-text)">Wireless Headphones</h3>
<p class="mt-1 text-sm" style="color:var(--ws-shopping-cart-text-soft)">Black / Medium</p>
</div>
<button type="button" class="self-start p-1 transition hover:opacity-70" style="color:var(--ws-shopping-cart-text-soft)" aria-label="Remove Wireless Headphones">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="mt-2 flex items-center justify-between">
<div class="inline-flex items-center rounded-lg" style="border:1px solid var(--ws-shopping-cart-border)">
<button type="button" class="px-3 py-1 text-sm font-medium transition hover:opacity-70" style="color:var(--ws-shopping-cart-text)" aria-label="Decrease quantity">−</button>
<span class="min-w-[2.5rem] text-center text-sm" style="color:var(--ws-shopping-cart-text)">1</span>
<button type="button" class="px-3 py-1 text-sm font-medium transition hover:opacity-70" style="color:var(--ws-shopping-cart-text)" aria-label="Increase quantity">+</button>
</div>
<p class="text-base font-semibold" style="color:var(--ws-shopping-cart-text)">$99.00</p>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="flex gap-4 py-6 sm:gap-6">
<div class="h-24 w-24 shrink-0 rounded-lg sm:h-32 sm:w-32" style="background:linear-gradient(135deg, oklch(0.65 0.12 180), oklch(0.55 0.14 230))" role="img" aria-label="Smart Watch Pro"></div>
<div class="flex flex-1 flex-col justify-between">
<div class="flex justify-between">
<div>
<h3 class="text-base font-semibold" style="color:var(--ws-shopping-cart-text)">Smart Watch Pro</h3>
<p class="mt-1 text-sm" style="color:var(--ws-shopping-cart-text-soft)">Silver / One Size</p>
</div>
<button type="button" class="self-start p-1 transition hover:opacity-70" style="color:var(--ws-shopping-cart-text-soft)" aria-label="Remove Smart Watch Pro">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="mt-2 flex items-center justify-between">
<div class="inline-flex items-center rounded-lg" style="border:1px solid var(--ws-shopping-cart-border)">
<button type="button" class="px-3 py-1 text-sm font-medium transition hover:opacity-70" style="color:var(--ws-shopping-cart-text)" aria-label="Decrease quantity">−</button>
<span class="min-w-[2.5rem] text-center text-sm" style="color:var(--ws-shopping-cart-text)">2</span>
<button type="button" class="px-3 py-1 text-sm font-medium transition hover:opacity-70" style="color:var(--ws-shopping-cart-text)" aria-label="Increase quantity">+</button>
</div>
<p class="text-base font-semibold" style="color:var(--ws-shopping-cart-text)">$498.00</p>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="flex gap-4 py-6 sm:gap-6">
<div class="h-24 w-24 shrink-0 rounded-lg sm:h-32 sm:w-32" style="background:linear-gradient(135deg, oklch(0.72 0.08 100), oklch(0.62 0.12 150))" role="img" aria-label="Leather Backpack"></div>
<div class="flex flex-1 flex-col justify-between">
<div class="flex justify-between">
<div>
<h3 class="text-base font-semibold" style="color:var(--ws-shopping-cart-text)">Leather Backpack</h3>
<p class="mt-1 text-sm" style="color:var(--ws-shopping-cart-text-soft)">Brown / Large</p>
</div>
<button type="button" class="self-start p-1 transition hover:opacity-70" style="color:var(--ws-shopping-cart-text-soft)" aria-label="Remove Leather Backpack">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="mt-2 flex items-center justify-between">
<div class="inline-flex items-center rounded-lg" style="border:1px solid var(--ws-shopping-cart-border)">
<button type="button" class="px-3 py-1 text-sm font-medium transition hover:opacity-70" style="color:var(--ws-shopping-cart-text)" aria-label="Decrease quantity">−</button>
<span class="min-w-[2.5rem] text-center text-sm" style="color:var(--ws-shopping-cart-text)">1</span>
<button type="button" class="px-3 py-1 text-sm font-medium transition hover:opacity-70" style="color:var(--ws-shopping-cart-text)" aria-label="Increase quantity">+</button>
</div>
<p class="text-base font-semibold" style="color:var(--ws-shopping-cart-text)">$149.00</p>
</div>
</div>
</div>
</div>
<!-- Summary -->
<div class="mt-8 rounded-xl p-6" style="border:1px solid var(--ws-shopping-cart-border)">
<div class="space-y-3">
<div class="flex justify-between text-sm">
<span style="color:var(--ws-shopping-cart-text-soft)">Subtotal</span>
<span style="color:var(--ws-shopping-cart-text)">$746.00</span>
</div>
<div class="flex justify-between text-sm">
<span style="color:var(--ws-shopping-cart-text-soft)">Shipping</span>
<span style="color:var(--ws-shopping-cart-text)">$12.00</span>
</div>
<div class="flex justify-between pt-3 text-base font-bold" style="border-top:1px solid var(--ws-shopping-cart-border)">
<span style="color:var(--ws-shopping-cart-text)">Total</span>
<span style="color:var(--ws-shopping-cart-text)">$758.00</span>
</div>
</div>
<button type="button" class="mt-6 w-full rounded-xl px-6 py-3.5 text-base font-semibold transition hover:opacity-90" style="background:var(--ws-shopping-cart-action-bg);color:var(--ws-shopping-cart-action-text)">Proceed to Checkout</button>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commercecartcheckoutshoppingorder
Slots
| Name | Required | Description |
|---|---|---|
| items | Yes | List of cart items with thumbnails and controls. |
| summary | Yes | Order summary with totals and checkout button. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| maxWidth | string | max-w-4xl | Container max width utility. |
Base variant for the Shopping Cart family. Use this as the main cart page in an e-commerce checkout flow.