> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.personizely.net/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create a Checkout AB Test.

Testing elements directly on the checkout page is a powerful way to optimize conversions. Although Shopify’s default checkout cannot be modified by third-party tools, Shopify Plus merchants can use the Checkout Blocks app to add custom components. These blocks can then be controlled through a Personizely A/B Test, where you define conditions and decide whether the block is displayed in each variation. For example, you might test a block that lets customers edit items in their cart directly during checkout.


### Step 1: Create a checkout block

Inside the Checkout Blocks app, open the **Blocks** section and click **Create block**.  
For illustration, let’s choose the *Line item edit* block.

![Create checkout block](https://storage.crisp.chat/users/helpdesk/website/-/3/0/a/0/30a06a2316be0a00/01-create-block_f4dado.gif)

### Step 2: Add a display condition

Next, set a display rule so that the block only appears when a specific cart attribute is present.  
Under **Display Rules**, click **Add display rule**, pick **Cart attributes**, and then enter a key/value pair:

* **Key:** `_pzShowBlock`  
* **Value:** `true`

| The values can be named differently if you prefer, but they need to match what will later be set in your Personizely test.


![Set custom attribute](https://storage.crisp.chat/users/helpdesk/website/-/3/0/a/0/30a06a2316be0a00/02-set-attribute_1s21w0l.gif)

### Step 3: Activate and place your block

Follow the Checkout Blocks app prompts to turn on the new block and add it to your checkout layout.  
In the Checkout editor, click the **+** icon to insert the block (e.g., under *Order summary > Items in cart*).  
Save your changes once the block is added.

| When you select the block in the editor, you’ll also find customization options for things like button label and styling.  

After finishing, close the editor and confirm that your block is active.
Your checkout block is now ready. At this point, you can move on to the next steps in **Personizely** to control how the block is tested across variations.


![Add to checkout](https://storage.crisp.chat/users/helpdesk/website/-/3/0/a/0/30a06a2316be0a00/03-add-to-checkout_ku4vh5.gif)


### Step 4: Create an A/B test in Personizely

With your checkout block active, the next step is to set up an A/B Test in Personizely.  
Follow this guide to create your experiment: [How to create an A/B Experiment](https://help.personizely.net/en/article/how-to-create-an-ab-experiment-11075yq/).

In this setup:  
* **Original** will display the checkout block.  
* **Variation 1** will hide the checkout block.  

Next, open **Variation 1** in the Personizely builder.

| For clarity, rename Variation 1 to something like **Block Off** or **Block Hidden**.  


### Step 5: Add JavaScript to hide the block

With **Variation 1** open in the Personizely builder, go to the top-right corner and select **Edit code**. Then choose the **JavaScript** tab.  

![Edit Javascript](https://storage.crisp.chat/users/helpdesk/website/-/3/0/a/0/30a06a2316be0a00/screenshot-at-sep-22-09-42-05_13ixi85.png)

### Step 6: Insert the Code

Paste the following code into the editor, and save changes:

```javascript
const res = fetch("/cart/update.js", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    attributes: {
      '_pzShowBlock': "false"
    },
  }),
})
```

![Insert code](https://storage.crisp.chat/users/helpdesk/website/-/3/0/a/0/30a06a2316be0a00/screenshot-at-sep-22-09-49-57_3vwwiv.png)

### Step 7: Start your A/B test

You’re now done with the setup.  
The final step is to **start the A/B Test**  so it starts running on your checkout.  


![Start the AB test](https://storage.crisp.chat/users/helpdesk/website/-/3/0/a/0/30a06a2316be0a00/screenshot-at-sep-22-09-54-03_g9ldog.png)


Congratulations! You’ve successfully set up and launched an A/B Test on your checkout page with Personizely.  
You now have the ability to measure the real impact of checkout blocks and make data-driven decisions to improve conversions.