Customizing the style of your checkout
Logo
| Setting | Description |
| Logo | Choose an image: Select a logo from the image library, or upload a new one. This logo will appear at checkout. |
| Logo max width | Adjust the maximum width of the logo on checkout using a slider. |
| Logo alignment | Choose how the logo is positioned:
|
| Logo position | Determine where the logo appears at checkout:
|
Background image for header
Note: Visible only if logo position is full width in settings.
| Setting | Description |
| Background image | Select an image from the library, free images, or upload a new image to the library. |
Checkout form
Background 1
| 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. |
Order summary
Background 2
| 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. |
Colors
| 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:
|
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 |
| One-page checkout | Faster, shorter checkout on a single page. |
| Three-page checkout | Stepped checkout across multiple pages. |
Address autocompletion
| Setting | Description |
| Use address autocompletion | Enable Address Autocompletion to streamline the checkout process by allowing customers to fill in their address details quickly.
|