Checkout

Overview

Under Checkout, you can edit the appearance of your checkout page and ensure that the final steps of your customer's transaction are as intuitive and enticing as possible.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Themes.

  2. Click your theme, and select Customize.

  3. On the left-hand menu, select Theme settings.

  4. Scroll down to select Checkout.

Theme settings > Checkout

Banner

Under Banner, you can add an image to the top of your checkout page.

Go to Background image and click Select image. Upload a new image, or select a pre-existing image from your Library or Shopify's Free Images.

🌟 We recommend using an image which is 1000 x 400 pixels - for more information on image sizes, click here to read our guide.

Adding a background image to the checkout banner.

Logo Image

Under Logo, you can also add a logo to your banner.

Go to Custom image and click Select image. Upload a new image, or select a pre-existing image from your Library or Shopify's Free Images.

Adding a logo image to the checkout banner.

Logo Position

In the Logo position drop-down menu, you can choose whether your banner logo sits to the Left, to the Center, or to the Right.

Left

Banner logo to the left.

Center

Banner logo in the center.
Banner logo to the right.

Logo Size

Use the Logo size drop-down menu to choose whether your banner logo is Small, Medium, or Large.

Small

Small banner logo.

Medium

Medium banner logo.

Large

Large banner logo.

Background Image

Under Main Content Area, you can add a Background image by clicking Select image. Upload a new image, or select a pre-existing image from your Library or Shopify's Free Images.

This image you upload will repeat itself vertically and horizontally.

Background image to the main checkout area.

Background Color

Using the Background color selector, you can change the background of the main content section instead of adding a background image.

Changing the background color of the main content section.

You must first remove any background images you have uploaded if you wish the background color to be shown.

Form Fields

By using the Form fields drop-down menu, you can choose to turn the entry fields on your checkout page either white or transparent.

White

White form fields.

Transparent

Transparent form fields.

Order Summary Background Image

Underneath the banner on the checkout page, clicking the Show order summary link will open up a rundown of what is inside your customer's cart.

Show order summary on the checkout page

Under Order Summary, you can add a Background image by clicking Select image. Upload a new image, or select a pre-existing image from your Library or Shopify's Free Images.

Order summary background image.

This image you upload will repeat itself vertically and horizontally.

Order Summary Background Color

Using the Background color selector, you can change the background of the order summary instead of adding a background image.

Changing the background color of the order summary.

You must first remove any background images you have uploaded if you wish the background color to be shown.

Heading & Body Typography

By using the Headings and Body drop-down menu, you can change the fonts on your checkout page.

The following fonts are available:

System Roboto Playball Arvo Helvetica/Arial Raleway Source Sans Pro Slabo Open Sans Fjalla One Garamond Playfair Lato Abel PT Serif Vidaloka Oswald Lobster Two Lora Glegoo

Colors

Under Colors, you can use the selectors for Accents, Buttons, and Errors to change the colors for your checkout section.

Accents

Use the Accents color selector to change the links, highlights, and checkmarks.

Changing the color of the links, highlights, and checkmarks under Accents.

Buttons

Use the Buttons color selector to change the gift card or discount buttons, and the 'next step' buttons.

Changing the color of the buttons, including the 'Continue to shipping' button.

Errors

Use the Errors color selector to change the error messages and invalid fields.

Changing the color for the the error messages.

Checkout Settings

You can customize your checkout settings further within your Shopify admin space.

  1. Within your Shopify admin, go to Settings.

  2. Go to Checkout.

Editing your checkout settings through your Shopify admin.