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.
Within your Shopify admin, go to Sales Channels > Online Store > Themes.
Click your theme, and select Customize.
On the left-hand menu, select Theme settings.
Scroll down to select Checkout.
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.
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.
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.
Use the Logo size drop-down menu to choose whether your banner logo is Small, Medium, or Large.
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.
Using the Background color selector, you can change the background of the main content section instead of adding a background image.
You must first remove any background images you have uploaded if you wish the background color to be shown.
By using the Form fields drop-down menu, you can choose to turn the entry fields on your checkout page either white or transparent.
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.
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.
This image you upload will repeat itself vertically and horizontally.
Using the Background color selector, you can change the background of the order summary instead of adding a background image.
You must first remove any background images you have uploaded if you wish the background color to be shown.
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
Under Colors, you can use the selectors for Accents, Buttons, and Errors to change the colors for your checkout section.
Use the Accents color selector to change the links, highlights, and checkmarks.
Use the Buttons color selector to change the gift card or discount buttons, and the 'next step' buttons.
Use the Errors color selector to change the error messages and invalid fields.
You can customize your checkout settings further within your Shopify admin space.
Within your Shopify admin, go to Settings.
Go to Checkout.