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:

  • Left
  • Center
  • Right
Logo position

Determine where the logo appears at checkout:

  • Full width: Displays the logo above the checkout form and order summary, creating a header for them.
  • Checkout form: Places the logo on the checkout form.
  • Order summary: Positions the logo on the order summary side.

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:

  • 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
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.

  • This feature uses Shopify Checkout to propose and complete addresses automatically as customers type.
  • It helps reduce errors and speeds up the checkout experience.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us