> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/sections-and-features/cart.md).

# Cart

The cart page and the floating cart box.

A dotted-border table: a count line, the item rows, a subtotal, then the shipping note and buttons.

Each row is the shot, what it is, and what it costs behind a rule — the price cell is a square at the end of the row.

## No footer under it

The cart is a page for finishing on, so there is nothing below the buttons to scroll into — no footer, on any screen. The reference does the same.

## The lines scroll

On desktop the item rows scroll inside a pane of their own while the count above and the subtotal and buttons below stay put. The cart keeps one shape whether it holds two items or twenty, and the row cut off at the bottom says there's more.

## On phones

The lines run edge to edge on white, and everything past them takes the header's grey.

If the list is long enough to run off the screen, the subtotal and buttons pin to the bottom of the window so checkout is always reachable — they settle back into place once you scroll to the end. A short cart doesn't pin at all.

## The floating cart box

On desktop, once there's something in the cart, a small box appears in the left margin — the count, the subtotal, **view/edit cart** and **checkout now**. It sits on the same rail as the collection sidebar, and the category list steps down below it.

Hidden on phones, where the header bar carries the count and checkout instead.