The Cart page and the Checkout page are where shoppers review their products and place the order. Each page has one required section: Cart and Checkout. You style them in the builder, but their content comes from the shopper's cart.
When shoppers see these pages
- These pages are used when your checkout method is Add to cart, or when it is your secondary method. With Fast checkout, shoppers order from the form on the product page. See Checkout settings.
- The cart page opens when the header cart is set to Page. With Drawer or Dropdown, a mini cart opens instead. See Header section.
- The Proceed to checkout button in the cart page, the drawer, or the dropdown opens the checkout page.
The Cart section
Open the builder and choose Cart page. The preview shows two sample products. The section lists each product with its image, name, variants, quantity buttons, line price, and a remove button, then the subtotal with Continue shopping and Proceed to checkout. Quantity buttons respect the product's minimum and maximum quantity.
- Image ratio: Auto, Portrait, Square, or Landscape. With a fixed ratio, Image fit is Cover or Contain.
- Image size: Small, Medium, or Large.
- Density: Compact, Comfortable, or Spacious space inside each row.
- Free shipping bar: shows how much more to add for free shipping, above the subtotal. See How does the free shipping bar work?
- Section width, Color scheme, Gap, padding, and Custom CSS.
When the cart is empty, shoppers see "Your cart is empty" and a button back to your store.
The Checkout section
Choose Checkout page in the builder. The section has the order form on one side and the order summary on the other. The form holds the customer fields, the shipping and payment choices, and the Place order button. The summary lists the products, the subtotal, shipping, the total, and VAT or a discount row when they apply.
Its settings are Section width, Color scheme, padding, and Custom CSS. Neither section takes extra blocks, but you can add other sections above or below them, such as a Text section with a delivery promise.
Change the checkout fields
Which fields show, which are required, and their labels are set for the whole market in Settings, not in this section. See Checkout form fields. Field colors and style come from your color scheme and input settings.
Good to know
- After the order, shoppers go to the thanks page. See How do I customize the thanks page (order confirmation) after an order?
- Shipping and payment choices come from your shipping methods and payment apps, see How do I set up shipping methods and rates per market?
- Each market has its own cart and checkout pages, so style them in every market.