# Checkout

***

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/5d79b71d-90c2-4914-b3a2-049abf88ce27/Screenshot%202023-12-18%20at%204.07.11%20PM.png" alt=""><figcaption><p><strong>Story theme: Checkout page</strong></p></figcaption></figure>

### 1. How to customize the Checkout page?

{% hint style="info" %}
**Steps:**

* In the theme editor, open the template selector at the top of the page.**.**
* Select **Checkout and new customer accounts.**
* Make necessary changes.
* Click **Save** and test the new checkout layout on your live store.
  {% endhint %}

<figure><img src="/files/lRMMK1Ozu8bDKkxW6cnm" alt=""><figcaption></figcaption></figure>

### 2. The settings include

* **Banner & Logo**: You can add the background banner or logo. If not, you can leave these settings blank.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/2cf18624-8374-440a-ab70-2229414266fb/Screenshot%202023-12-18%20at%204.11.17%20PM.png" alt=""><figcaption></figcaption></figure>

* **Main content area**: It shows on the site's left-hand side which has contact info and shipping address. For this area, you can also add a **background image** or leave it blank and use **background color** only. The provided field to add text can be set as white or transparent.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/7a00fe3d-384b-4cf7-ab59-e21a07c9eff5/Screenshot%202023-12-18%20at%204.13.33%20PM.png" alt=""><figcaption></figcaption></figure>

* **Order summary area**: 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://t9008110498.p.clickup-attachments.com/t9008110498/a4cd31f8-32aa-462d-9259-8d09c6a2afdf/Screenshot%202023-12-18%20at%204.18.05%20PM.png" alt=""><figcaption></figcaption></figure>

* **Typography & colors**: Use this part to change fonts and colors that match the store's aesthetic look.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/43a1955f-72c8-4d7b-abea-69c5bbf9a538/Screenshot%202023-12-18%20at%204.15.47%20PM.png" alt=""><figcaption></figcaption></figure>

* **Checkout layout**: Select **One-page checkout** or **Three-page checkout** to set the checkout layout.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/3e19be92-f4f0-43cd-aebd-ac175ebb86c8/Screenshot%202023-12-20%20at%2011.45.49%20PM.png" alt=""><figcaption></figcaption></figure>

The **one-page checkout** collects the same information from your customers as the **three-page checkout**. And the **one-page checkout** also supports the same customization options as the **three-page checkout**. Any customizations that you've made will continue to work seamlessly when you switch between checkout layouts.

The header layout for the **one-page checkout** is different from the **three-page checkout**, which might impact how your background image displays at checkout.

{% tabs %}
{% tab title="One-page checkout" %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/1421ef53-88b0-43b2-8389-baf191534523/Screenshot%202023-12-20%20at%2011.56.26%20PM.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Three-page checkout" %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/61c508b8-6d45-4ed0-b4c3-304dc97a9bf0/Screenshot%202023-12-20%20at%2011.56.00%20PM.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

> ***Note**: 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.*&#x20;
>
> *Choose colors with high contrast, and images that don't draw attention from the words on the page.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.inspiredtheme.com/articles/pages/other-pages/checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
