Checkout

Use this section to customize the Checkout page.

Tip: To view changes applied on the page, choose the Checkout template in the top drop-down.

Banner

The hero banner will be displayed at the very top of the Checkout page if you choose an image in the "Background image". Hit "Select image" to choose an image from your library or upload a new one from your computer.

The recommended image size is 1000 x 400 pixels. If you use an image of a different size, it will be cut off at the edges:

Logo

To replace the text logo with the custom one, choose an image by pressing the button "Select image":

Position

Replace the logo from the "Left" to "Center", or "Right" by simply using one of the options in the drop-down.

Logo size

Consider using one of the options: "Small", "Medium", or "Large" to resize the logo.

Here is how the described settings might display on the Checkout page:

Main content area

Here you can upload your custom background image or select a background color for the content area.

Use the "Background image" selector to connect an image.

Alternatively, select a color in the "Background color" picker.

Form fields

Use the drop-down to control displaying form fields in the Main content area as "White" or "Transparent".

In the following example, you can view how the "Transparent" option might be shown on the Checkout page for the form fields:

Order summary

Choose the background image by pressing the "Select image" button. The image takes precedence over the "Background color". Remove an image to add a background color to the area.

You can choose a color in the "Background color" picker.

Typography

Use the "Headings" settings to apply the font for the headlines:

The font of the text can be set in the "Body" drop-down.

Colors

Use the color pickers to apply settings for different areas on the Checkout page:

Accents

Change the color of the links, highlights, and checkmarks using the "Accents" color picker.

Buttons

Use the "Buttons" item to change the color of the gift card, discount, and the next step buttons.

Errors

The color of messages and invalid fields will be changed if you set up a color for the item.

Here is how the color settings might display on the page: