# Checkout

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Checkout**
3. Make necessary changes
4. **Save**
   {% endhint %}

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/O7F83zo5yRSwJqBzu7V9/image.png" alt=""><figcaption></figcaption></figure>

You have the flexibility to upload your own background banner and logo to personalize your store. If you choose not to, you can simply leave these options blank.

## Banner <a href="#banner-and-logo" id="banner-and-logo"></a>

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/xqa3iuABKmeBFPDdDJsG/image.png" alt=""><figcaption></figcaption></figure>

## Logo

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/3ufDyOuKDZEEXiYL4EQY/image.png" alt=""><figcaption></figcaption></figure>

## Main content area <a href="#main-content-area" id="main-content-area"></a>

The background image you select will be featured on the main content area of the checkout page. Should this option remain unset, a background color will be utilized as the default.&#x20;

Additionally, the background of input forms can be customized to be either white or transparent, offering further personalization to match your store's aesthetic.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/VIuKK3qZFvB2XMUOF3pQ/image.png" alt=""><figcaption></figcaption></figure>

## Order summary area <a href="#order-summary-area" id="order-summary-area"></a>

Appear on the right-hand side of the site. The same as the main content area, background image, and color can be added to meet your expectations.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/osPKnSXyHbWzK9v4z4Pw/image.png" alt=""><figcaption></figcaption></figure>

## Typography & colors <a href="#typography-and-colors" id="typography-and-colors"></a>

Use this part to change fonts and colors that match the store' aesthetic look.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/moaAsvbn7vjqZrvknaRj/image.png" alt=""><figcaption></figcaption></figure>

## Checkout settings <a href="#checkout-settings" id="checkout-settings"></a>

In a **One-page checkout**, customers will navigate through information, shipping, and payment, all within a single page. Conversely, in a **Three-page checkout**, these details will be spread across three individual pages.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/nrEkW2MslEG1qdwRBfqF/image.png" alt=""><figcaption></figcaption></figure>