Customizing the style of your checkout
To see the Checkout page in the customizer, follow these steps:
- In the Theme Customizer, navigate to the dropdown menu at the top.
- Select Pages from the dropdown.
- Click on Checkout and customer accounts to open the page.
- The Checkout tab in admin settings appears.
- Click on “Customize” button to make the stylization of checkout
Checkout styling:
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
| Setting | Description |
| Background image | Select an image from the library, free images, or upload a new image to the library. |
| Background color | Set up a background color for the main content area. |
| Form fields | Choose the color for form fields from the dropdown menu:
|
Order summary
Background 2
| Setting | Description |
| Background image | Select an image from the library, free images, or upload a new image to the library. |
| Background color | Set up a background color for the order summary area. |
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 |
| Fields and cards |
|
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.
|