Cart & checkout
The cart shows what a customer has put in their basket. The checkout collects their delivery address and payment and completes the sale.
This is the last page between a customer and your money, so it is worth more care than the rest.
First time here? Read How shop pages work first — it covers the header and footer step.
Opening the template
Go to CMS › Project Settings › Shop › Templates and click the Edit icon next to Cart.
You can also get there from CMS › Products › Templates.
Building it
Add the element
Drag the Cart & Checkout element onto the page.
Start with the Cart step
The element covers several steps of the checkout, and you style them one at a time. Select Cart to work on the first.
Set the width
Click the top right corner, select the cog icon, and set a width for the element.
Set typography and colours
Click any part of the element and use the toolbar that appears to style the text and buttons.
Style the address step
Select Address in the element to work on the screen that collects the customer’s delivery address.
Work through each step of the element in turn, so the whole checkout matches rather than just the first screen.
Worth knowing
Buy something from yourself before you launch. Go through the entire checkout as a customer would, on a phone as well as a computer. It is the only way to find a button that is unreadable or a step that scrolls badly.
Keep it plain. Everywhere else on your website, decoration helps. Here it costs sales. Clear text, obvious buttons, nothing competing with Pay.
Your header and footer matter here most. A checkout page missing your branding is where customers hesitate about entering card details. If you skipped the display condition step, do it now — see How shop pages work.