Checkout
Branding the checkout
Logo, colours, fonts, corner radius, one page or two steps, your own texts and the announcement bar, with a live preview.
Updated
The editor
Checkout in the dashboard is a branding editor with a live preview on a desktop and a mobile frame. Until you change anything, the checkout uses Shopify's own defaults (system font, 14px, dark pay button, 5px corners) plus your store name from Shopify. The settings are the same kind Shopify Plus offers for its checkout; the four tabs are Design, Layout, Content and Language.
Design
Logo
Shown in the header instead of the store name, rendered at most 400px wide; position left or centre, size small, medium or large.
Colours
Primary button (background, text, hover), secondary button, accent (links, focus ring, selected radio), fields (border, background, text, placeholder), body and secondary text, the header, main and order-summary backgrounds, and the error colour.
Typography
Primary and heading font from System, Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Playfair Display, DM Sans and Source Sans 3; base size 14, 15 or 16px; heading weight 400 to 700.
Corner radius and background images
None, small, base or large, applied to fields, buttons, cards and thumbnails. Background images for the header (with an overlay slider so the store name stays readable), the main column and the order summary, as https:// URLs; a file on your Shopify Files page works.
Layout
- One page (default): contact, delivery, shipping, payment and the pay button on one screen.
- Two steps: an information page, then a payment page with a Cart › Information › Payment trail and a "Return to information" link.
- Show or hide the cart link in the header, the discount code field and the product images in the order summary.
Content
- Pay button label: the translated "Pay now", or your own words.
- The "Total" label in the order summary.
- Short notes under the contact, payment and footer sections.
- An announcement bar above the header with its own colour, for free-shipping thresholds or holiday notices.
Your own texts are shown exactly as written in every language; everything else is translated.
Language
Automatic follows the buyer (storefront language, then the browser's, then English). Pinning a language shows it to everyone. See Checkout languages.
Preview, save, discard
Changes show in the preview at once and reach buyers only when you press Save; Discard drops the draft. The preview is your real checkout page rendered with the draft, inside the dashboard, so what you see is what a buyer gets.