The cart

The cart is a drawer, not a page. It sits over whatever page the shopper is on, and it is shared by the whole site — the Layer tree says exactly that above its group: "Site-wide — shown on every page."

That is the most important difference from everything else you build: you design the cart once, not once per page.

Editing it

A closed drawer cannot be clicked on the canvas, so there are two ways in:

• Open Layer on the rail, expand the Cart group at the bottom of the tree — it starts collapsed because the drawer is long — and click the drawer's row. The drawer opens on the canvas.
• Or select any element carrying the Open cart action — the cart icon in the header, say.

Either way, the element's toolbar shows Edit cart. Press it and you edit the drawer like any piece of page: drag elements in, style them, set the spacing. While you do, the editor shows Editing the cart drawer so you do not lose track of where you are.

"Could not open the cart drawer." is a loading failure rather than a damaged cart — close it and try again.

It is not in the page document

The cart is composed onto a page when it is read and stripped back out when it is written. A page's stored document holds no trace of it — unlike a global section, which leaves a reference node. What you can observe from that:

• In the Layer tree it sits in its own group under Header/Body/Footer, cannot be dragged up into them, and does not count towards the top/bottom rules that govern headers and footers.
• Editing the cart on one page edits it on every page. There is no per-page version.
• Deleting a page does nothing to the cart.

The cart item

Inside the drawer is a Cart item — the template for one line. You design one line, and the storefront repeats it for each thing the shopper added. Do not build three lines to hold three items.

Two cart lists in one place show every item twice. The canvas does not show you that: each list previews one placeholder row, so two of them read as one list with a row under it. The doubling only appears once a shopper has put something in the basket, live. So the editor labels both in red — "Two cart lists here — every item shows twice" — and deleting one is the fix.

The cart's elements live in the Store panel, Storefront group: Cart (the header icon; clicking it opens the drawer), Cart item, Cart total.

Add to cart

Add to cart is not an action you attach to any button — it is a ready-made button, in the Store panel's Product group. The button knows which product is being viewed (a product page, or a card inside a list) and shares the Quantity box placed beside it.

Its inspector holds a choice of what happens after adding: Stay on the page, Open the cart, or Go to checkout.

Cart actions

The On click actions any button or element can carry:

Action	vi	What it does
Open cart	Mở giỏ hàng	Slides the drawer out
Close cart	Đóng giỏ hàng	Closes it
Go to checkout	Đến thanh toán	Moves to the checkout page
Remove cart line	Xoá dòng giỏ hàng	Drops the line this button sits in
Increase quantity	Tăng số lượng	+1 on the line this button sits in
Decrease quantity	Giảm số lượng	−1 on the line this button sits in

The last three only make sense on a button inside the Cart item.

Names in the shopper's language

On a store selling in more than one language, each line in the drawer shows the product's name in the language the shopper is reading. A line remembers the name it was added under, and the cart outlives a language switch — so when the shopper moves from the Vietnamese pages to /en/, the lines added earlier are renamed in English rather than leaving the drawer half one language and half the other. A product you have not translated keeps its original name, exactly as the page itself would print it.

A course added with its enrol button shows as the product that sells it, not under the course's title — the product is what is actually being bought, and it is the name the order, the receipt and the shopper's order history will all carry. Give that product a name a buyer recognises. See Courses.

Checkout

Go to checkout leads to your site's page of type Checkout — always at /checkout; the page has no slug of its own. After an order is placed, the shopper reaches the page of type Order complete. Both are template pages: built once, used for every order.

With no Checkout page, the cart's Checkout button lands on a 404. Not an empty page — "page not found", at the moment a shopper is holding a full basket.

It is the easiest part of the selling flow to leave broken, so the Publish dialog lists what is still missing before anybody can buy and offers Create and publish the checkout page, which does all four steps: the page of the right type, an order form that takes its lines from the cart, the payment methods your store has switched on, and the publish. See Putting a page online.

Building it yourself, remember two things: the page must be of type Checkout, and the order form on it must have Order source = Shopper's cart — left on the default "pinned product", the form collects a full address and then refuses the order. See Forms.

Only products that are live can be bought. A product you moved back to Draft or Archived stops being sellable through the cart at once — even if it is already sitting in a shopper's basket. The cart total and the checkout both refuse, telling the shopper a product in the cart is no longer available, rather than charging for something you took off sale. The one exception is a course renewal link: a student renewing keeps being able to buy their course even after its product has been archived.

The Order complete page has no such trap: if you never built one, the platform shows a plain built-in receipt — unbranded, but never an error page.

Trying it

The cart only behaves for real on a published page or in Preview — on the canvas you see its shape, while adding items and totalling runs on the storefront. Use Preview to walk the whole flow without publishing.