Checkout

Customize the style of your checkout page

This is where the customer completes payment and provides the information for delivery and contact details that are needed for invoicing.

Steps

1. In the theme editor (Customize), click Theme settings

2. Locate Checkout

3. Make necessary changes

4. Save.

Add your company logo, change the colors, or choose a new font to make the checkout match your business.

Banner & logo

At the top of each checkout page, a banner displays your store name. You can change the background image of that banner. Choose an image that matches your brand. For example, if you sell jewelry, then an image of colorful beads might be a good match. Banner images look best with a resolution of 1000 x 400 pixels.

You can add your store logo to the checkout pages. If you're using a banner image, then the logo appears on top of it. You can position your logo on the left, right, or center of the banner area on the checkout pages.

Main content area

You can add a background image or color to the main content area of the checkout pages. This is the area where your customers enter their shipping and payment information, so make sure that you can still clearly read the fields on the background. You can't add both a background image and color.

You can change the color of the fields to make them either white or transparent. You might want to make the fields transparent so a background image is visible. Make sure that you can clearly read the text in the fields.

Order summary area

When a customer clicks Show order summary on a checkout page, a list of the products they're buying appears. You can add a background image or color to the order summary. Make sure you preview your choices to make sure that you're happy with the way the order summary looks. You can click Show order summary on the preview in the theme editor.

Typography & colors

You can change the color of the buttons, error messages, and accents like links on the checkout pages. If you change the colors, then make sure that you can clearly read the text against the backgrounds of the main content area and order summary.

Although you might want to add a lot of color and interest to your checkout pages, it's best to keep the design simple. Your customers use these pages to enter shipping and payment information for their orders, and you don't want to distract them or make the information hard to read. Choose colors with high contrast, and images that don't draw attention from the words on the page.

Checkout layout

Set how many pages your customers experience when they check out:

• One-page checkout

• Three-page checkout.

Comparing one-page checkout to three-page checkout: see more here.