Checkout

Unify your customer’s experience on your storefront by ensuring the final step of their journey matches the quality of the very first.

This continuity will not go unnoticed and should elevate your store above others when the customer makes a decision about where to buy in the future.

It is not possible to edit the code of this page as this is controlled by Shopify Payments - as such, design options are limited. You'll need to have a Shopify Plus store in order to edit the code elements of the Checkout page:

Customising the Checkout

To customise your checkout design, head to your theme’s settings area:

1. Online Store → Themes → Customise

2. Theme Settings → Checkout

3. You will then be presented with the following options:

Banner

Add a banner to the Checkout page, to improve the look of the checkout page and improve reinforcing your brand image.

Uploading an image adds the image as a banner that sits across the top of your checkout page:

We recommend using an image which is 1000 x 400 pixels. Depending on the effect you're trying to achieve, editing and resizing may be required.

Logo

A logo can be added to display on the checkout page, above where the customer enters the final information and acts as a final reminder of your brand or stamp at the Checkout stage.

Position

The logo position of the logo can be set in 3 alignments: Left / Center / Right

Logo size

Scale your logo with the selected size option: Small / Medium / Large

Main content area

The Main content area of the contact page is your contact form, and the information included.

Background image or color

A background image can be placed behind the contact form. This is where your text entry fields are displayed or you can choose a solid chunk of color, instead of an image background.

Order summary

Displays product information added to cart before confirming the purchase.

Background image or color

Applies a background image to the Order summary of the Checkout page which repeats vertically or choose a solid chunk of colour, instead of an image background.

Typography

Choose from a selection of serif, sans-serif, cursive and monospace fonts.

Headings

Changes the main headings on the page.

Body

Affects the rest of the text on the checkout page.

Colors

Accents

Links, highlights, and checkmarks will change based on your chosen color.

Buttons

Gift card/discount and next step buttons will change based on your chosen color.

Errors

Messages and invalid fields when inputs are inccorect are highlighted in your chosen color.