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. Admin

  2. Online Store → Themes → Customise

  3. Theme Settings

  4. Choose "checkout"

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

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:

An example from the Flow (Queenstown) demo store.

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.

For further information relating to images and aspect ratio, please take a look at our documentation below:

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.

Example from the Flow (Bryon) demo theme.

Custom image

This adds a logo to the top of your checkout page, within the banner space.

Position

The logo position of the logo can be set in 3 alignments:

Logo size

Scale your logo with the selected size option:

Main content area

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

Background image

A background image can be placed behind the contact form. This is where your text entry fields are displayed:

Image repeats vertically and horizontally.

Background color

Choose a solid chunk of color, instead of an image background.

You must first remove an image if you wish the background color to be shown.

Form fields

Pick between White and Transparent:

Order summary

Displays product information added to cart before confirming the purchase.

Background image

Applies a background image to the Order summary of the Checkout page.

Image repeats vertically and horizontally.

Background color

Choose a solid chunk of colour, instead of an image background:

You must first remove an image if you wish the background color to be shown.

Typography

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

Headings

Affects two areas of the checkout:

Body

Affects the rest of the text on the checkout page:

To add custom fonts to your storefront, see our Custom Fonts documentation below for further information:

Colors

Accents

Links, highlights, and checkmarks:

Buttons

Gift card/discount and next step buttons:

Errors

Messages and invalid fields: