Checkout style

Open Settings › Checkout and choose Customize style. What you set shows on the checkout, the order confirmation page, and the pages where customers review an item or withdraw from an order.

Logo

Show chooses what sits at the top:

• Your brand logo: the logo in Settings › General › Brand. Until you add one there, customers see your store’s name.
• Another image: one from your files, for the checkout only.
• Your store’s name, no logo.

Position puts it on the Left (the cart link on the right) or in the Centre. Size is Small, Medium or Large.

On a dark background (when the checkout can be dark): The same logo, or A version for dark backgrounds, such as a white logo, chosen from your files. The checkout shows it wherever it is dark. Under a chosen logo, Change picks another and Edit opens the picture tool (turn, crop to a shape, or trim empty edges); the result is kept as a new file in Content › Files, the original stays.

Sections

Sections lists the parts of your checkout from top to bottom, each with Edit to go where it is set. Untick Show on Discount code or You might also like to take them off. A code in a link still works when the box is hidden. The other parts are needed to place an order, so they always show.

The preview follows what you change. Once your store has a product, it shows your first product, your first delivery option and your order button’s words from Settings › Checkout. Preview on switches it between a computer and a phone.

Light or dark

Appearance sets how the checkout and the order pages look:

• Light (the default): always light, whatever the device.
• Auto: follows each customer’s device, dark when their phone or computer is set to dark and light otherwise.
• Dark: always dark, whatever the device.

The colour of the phone’s status bar follows the checkout’s header.

Colours

Light and dark each have their own colours. With Auto, Colours for: Light / Dark switches between the two sets, and the preview shows the one you are setting; with Light or Dark, you set that one. Each colour starts as Storeloom’s own and shows Default. Change opens a colour picker, where you can also type or paste a hex code such as #c2410c. Reset goes back to the default.

• Page background: behind everything.
• Header background: the strip with your logo.
• Order summary background: the order summary, at the side on wide screens.
• Field background: inside the fields and the shipping and payment choices.
• Field border: around the fields and choices.
• Primary text: headings, labels, what customers type, prices.
• Secondary text: hints, delivery times, the notes under the choices and the button.
• Accent: the chosen shipping option and payment method (a border and a light tint), ticks, links and focus rings.
• Button and Button text: Complete order, with its total, and the checkout’s other buttons: Use my location, Find the nearest and Apply.
• Errors: what a customer needs to fix.

The preview shows your choices together as you make them. When a colour is hard to read on what it sits on, the page says which pair, its contrast and what it needs (4.5:1 for text, 3:1 for the accent on a choice); with Auto it checks both sets and says Light: or Dark:. You can still save it, but some customers may not be able to read it. An order button whose words are hard to read on it is asked about first: Apply opens a question with its contrast and what it needs, and Apply anyway saves it.

Apply in the bar at the top (it says Unsaved changes while something is not saved) applies your style to the checkout at once; Discard goes back to what is saved.