Customizing the style of your checkout

Logo

Setting	Description
Custom image	Choose an image from the library, free images, or upload a new image to the library.
Logo max width	Select a size for the logo, in pixels.
Logo alignment	Display your logo on the left, center, or right of the banner.
Logo position	Select where on the checkout the logo displays.
Background image	Choose the image for checkout header. Click Add images to upload an image file, or select an existing image from your library.

Background 1

The background for the checkout form.

Background:	You can add a background image or color to the main content area of the checkout pages. You can't add both a background image and color.
Background image	Click Add images to upload an image file, or select an existing image from your library.
Background color	To add a color, click Background color to open the color picker, then choose a color or enter a hexadecimal code.

Background 2

The background for customer account pages and the order summary in checkout.

Background:	When a customer clicks Show order summary on a checkout page, a list of the products they're buying displays. You can add a background image or color to the order summary. You can click Show order summary on the preview in the theme editor to make sure that you're satisfied with the way the order summary displays.
Background image	Click Add images to upload an image file, or select an existing image from your library.
Background color	To add a color, click Background color to open the color picker, then choose a color or enter a hexadecimal code.

Color

Setting	Description
Accents	Set up a background color for links, highlights, and checkmarks.
Buttons	Set up a background color for gift card/discount and next step buttons.
Errors	Set up a background color for messages and invalid fields
Form fields and card background	Choose the color for form fields from the dropdown menu: White Transparent

Typography

Setting	Description
Headings	Use the dropdown list to choose the font family for checkout page headings.
Body	Use the dropdown list to choose the font family for checkout page body text.

Checkout layout

By default, the checkout layout on your store is set to be a one-page checkout. You can switch between one-page checkout and three-page checkout from your Shopify admin. Review the differences between the one-page and three-page checkouts before changing your checkout layout.

When you switch your checkout layout, the preview in your checkout and accounts editor doesn't display in real time. After you save your changes, navigate to your storefront checkout to view your new checkout layout.

Setting	Description
Checkout layout	Click One-page checkout or Three-page checkout to set the checkout layout.