# Checkout Installation

### How to Add App Blocks to Your Checkout

Before configuring individual App Blocks, you need to add Order Editing to your checkout pages.

**We recommend doing this to a duplicated version of your checkout and then publishing it once you are ready to complete tests.**

***

### Thank You Page Setup Options

You have **three options** for how Order Editing appears on the Thank You Page:

{% embed url="<https://www.youtube.com/watch?v=-7JUSnsrI_Y>" %}

#### Option 1: Informational Banner Only (Recommended)

Display a prominent banner that links customers to the Order Status page where they can edit.

#### Option 2: Full Editing Module Only

Display the complete Order Editing interface directly on the Thank You Page.

#### Option 3: Both Banner + Module

Combine both approaches for maximum visibility.

***

### Option 1: Add Informational Banner to Thank You Page

**Why use this approach:**

* Cleaner, simpler Thank You Page
* Directs customers to full Order Status page experience
* Less cluttered checkout flow
* Still highly visible

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

**Setup Instructions:**

1. Go to **Shopify Admin** > **Settings**
2. Click **Checkout**
3. Click **Customize** (next to your checkout configuration)
4. Navigate to the **Thank You Page** tab
5. Click **Add block** or **Add app block**
6. Select **"Informational Banner"** from Order Editing
7. Choose **"Card"** block type (recommended)
8. Drag it into the main body section where you want it to appear

**Configure the Banner:**

**Heading:**

```
Did you make a mistake?
```

**Body:**

```
You have [X minutes/hours] to make any changes
```

(Customize based on your editing deadline)

**CTA Button:**

* **Button text:** "Edit Your Order"
* **Link:** `order-status-url`

9. Click **Save**

***

### Option 2: Add Full Editing Module to Thank You Page

{% embed url="<https://youtu.be/e_b_eRl7Epc>" %}

**Why use this approach:**

* Customers can edit immediately without leaving Thank You Page
* Faster editing experience
* All features visible at once

**Setup Instructions:**

1. Go to **Shopify Admin** > **Settings**
2. Click **Checkout**
3. Click **Customize** (next to your checkout configuration)
4. Navigate to the **Thank You Page** tab
5. Click **Add block** or **Add app block**
6. Select **"Thank You Page Editing"** from Order Editing
7. Drag it into the main body section where you want it to appear
8. Click **Save**

***

### Option 3: Add Both Banner + Module

**Why use this approach:**

* Maximum visibility (customers can't miss it)
* Banner draws attention, module enables immediate editing
* Best for stores where post-purchase editing is critical

**Setup Instructions:**

1. Add **Informational Banner** (follow Option 1 steps)
2. Position it at top of main body section
3. Add **"Thank You Page Editing"** module below it (follow Option 2 steps)
4. Click **Save**

***

### Adding to Order Status Page

**All options require Order Status Page setup** (customers need full editing interface here).

1. While still in Checkout customization, navigate to the **Order Status Page** tab
2. Click **Add block** or **Add app block**
3. Select **"Self-Service Order Editing"** from Order Editing
4. Drag it into the main body section where you want it to appear
5. Click **Save**

***

### Which Option Should You Choose?

#### Choose Option 1 (Banner Only) if:

* You want a clean, minimal Thank You Page
* You prefer customers to use the Order Status page for editing
* You're concerned about page load time or complexity

#### Choose Option 2 (Module Only) if:

* You want customers to edit immediately on Thank You Page
* You want to showcase all editing features upfront
* Your Thank You Page isn't cluttered with other content

#### Choose Option 3 (Banner + Module) if:

* Post-purchase editing is a key feature of your store
* You want maximum visibility and conversion
* You don't mind a more content-heavy Thank You Page

***

<a href="/pages/zpFd9m0zOtkpIz3p4nlf" class="button primary">Upsell Strategies</a> <a href="/pages/UNPPBUBaT0XowgJ2Lqw8" class="button primary">Help Centre</a>


---

# 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://order-editing.gitbook.io/oe-help-book/self-service-edits/checkout-installation.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.
