# Checkout

The **checkout page** on an e-commerce website streamlines the buying process, enhances security, offers transparency in pricing, allows for order review, and provides payment options, ensuring a smooth and trustworthy transaction experience for users

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

### 1. Banner and Logo

Users can add their background banner or logo, choose the logo's position (left, right, center), and adjust its display size. Alternatively, they can leave these fields blank

<figure><img src="/files/4OFdcD4beT5CPRoE2lJO" alt=""><figcaption></figcaption></figure>

### 2. Main content area

You can include a background image or choose a background color for the main content area of the checkout pages. This area is where customers input their shipping and payment details, so ensure that the field text remains easily readable against the background. Note that you can't use both a background image and color simultaneously.

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

### 3. Order summary

On the checkout page, when customers click 'Show order summary,' a list of their purchased products is shown. You can customize the order summary's background with an image or color. Preview your choices to confirm the appearance, accessible through the theme editor's preview.

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

### 4. Typography and Colors

Use this section to customize fonts and colors to match the aesthetics of the checkout page.

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

#### Typography

You can select from a list of fonts to customize your checkout pages. You can't change the color of the text on the checkout page.

#### Colors

You can modify button colors, error messages, and accents like links on the checkout pages. Ensure text remains readable against the main content area and order summary backgrounds when changing colors.

### 5. Checkout settings

For additional checkout customization options, please visit the admin panel for more details.

{% hint style="success" %}
Step: Go to **Dashboard > Settings > Checkout**
{% endhint %}


---

# 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://nextsky.gitbook.io/agile-theme/theme-setting/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.