Articles on: Academy

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

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

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

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.

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

Step 6: Insert the Code

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

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

Insert code

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

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.

Updated on: 22/09/2025

Was this article helpful?

Thank you!