Docs Block Reference Cart

Cart

A shopping-cart block in one of two layouts: Full (a cart-page table with images, quantities, subtotals) or Mini (a compact list with a Checkout button — for sidebars and drawers).

When to use it

  • Dedicated /cart page (Full mode)
  • Mini cart inside a header dropdown or off-canvas drawer (Mini

    • mode)

  • Cart preview block on a sidebar

When not to use it

  • Adding the actual checkout fields — use Checkout
  • Cart-icon-only in the header — Site Header has its own

    • built-in cart icon toggle

Cart mode — Full · Mini (default: Full)

Top-of-panel toggle. The rest of the panel adapts.

Mini mode

Alignment — Left · Center · Right (default: Center)

Horizontal alignment.

Text inputs

  • Title (default: "Your Cart")
  • Empty (default: "Your cart is empty")
  • Button (default: "Checkout")

Toggles

  • Subtotal (left, default: on) — show running subtotal
  • Remove btn (right, default: on) — show × per-item remove
  • Hide if empty (default: on) — auto-hide when cart is empty

Colours (2-up rows)

  • Background + Text
  • Button BG + Button Text

Sliders

  • Width — 280–480px (default: 320)
  • Radius — 0–24px (default: 0)
  • Image — 40–100px (default: 60). Per-item thumb size.
  • Btn size — 12–18px (default: 14). Button font size.

Full mode

Text inputs

  • Title (default: "Shopping Cart")
  • Empty (default: "Your cart is empty")

Toggles (3 rows of 2 — per-device responsive)

Row 1: Images (left) · Quantity (right) Row 2: Subtotals (left) · Header (right) Row 3: Table labels (left)

Each toggle has device-specific defaults — the desktop default is on, mobile / tablet may default off depending on the saved value.

Colours

  • Background — page-style cart fill (default: #fff)

Checkout Button (sub-section)

  • Label — text input (default: "Checkout")
  • Background — button fill colour
  • Text — button text colour

Sliders

  • Radius — 0–24px (default: 4). Button radius.
  • Width — 30–100% (default: 100). Cart container max-width.

Per-device overrides

Mode, alignment, toggles, sliders all have per-device values.

Common overrides:

  • Mode — Full on desktop, Mini on mobile
  • Width (Mini) — wider on mobile (full-width drawer)

Common patterns

Full cart page

Mode Full · Title "Shopping Cart" · Images on · Quantity on · Subtotals on · Header on · Width 100% · Checkout button label "Pay Now" · Radius 4.

Mini cart in drawer

Mode Mini · Hide if empty on · Subtotal on · Remove btn on · Width 360 · Radius 8. Place inside an Off-canvas/Modal drawer linked from the header cart icon.

Sidebar mini cart

Mode Mini · Alignment Right · Width 320 · Background #fff · Button Checkout linking to /checkout.

Related

  • blocks/products — for the product grid that adds items to the

    • cart

  • blocks/bundle — for fixed product bundles (with their own

    • Add-to-Cart button)

  • blocks/checkout — the next step after the cart page