Testing Checkout Blocks

Test components on Checkout created through the Checkout Blocks app

Testing elements on the Checkout page is a functionality that many stores have been longing for. While Shopify still doesn't allow changes to their native components by 3rd party apps, stores on the Shopify Plus plan have access to the Checkout Blocks app, through which you can add custom blocks to checkout that can be controlled through an A/B Test in Intelligems.

The idea here is to create blocks conditioned by a cart attribute, and then use Intelligems' Javascript injection capability to set up a Content Test that sets the attribute that will control the display of the checkout block for each test group.

See the example below for how you can test a block that allows your customers to edit their items on Checkout.

Step 1: Create a Checkout Block

On the Checkout Blocks app, click on 'Blocks', then 'Create block'. In this example, we'll be selecting the 'Line item edit' block:

Step 2: Set up a Display Rule

The block will be conditioned to a cart attribute set through the test on Intelligems. Under 'Display Rules' click on 'Add display rule' and select 'Cart attributes'. Next, set 'Key' as '_igShowBlock' and 'Value' as 'true':

The key/value pair configured at this step is arbitrary. You can set a different attribute key and value if you like, as long as that matches the key and value you'll be setting up through your test.

Step 3: Activate your block and add it to Checkout

Follow the instructions on the Checkout Blocks apps to activate your newly created block and add it to Checkout. Once the block is active, you'll open the Checkout editor, click the '+' icon next to 'Line item edit', and add it to the 'Information' section. Make sure to 'Save' your changes:

When viewing your Checkout sections, you'll locate the block under 'Order summary > Items in cart'.

In the editor, if you click on your newly added block, you'll see a few customization options, such as the button's styles and label.

You may now close the editor and go back to the Checkout Blocks app, where you'll close the popup where the editor steps are listed, and mark that step as done. Your block is now active, and you can proceed with the next steps on Intelligems:

Step 4: Create an Onsite Edits Test with a Javascript injection

On Intelligems, create a Content Test of the type 'Onsite Edits Test' (you may refer to the steps here), with two test groups - in this example, we will call the groups 'Block OFF' and 'Block ON':

Move on to the 'Modifications' tab, and expand the section 'Styles & Javascript'. Within it, switch to the 'Javascript' tab, and paste the following code for the group 'Block OFF':

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

Additionally, switch the setting 'Javascript Injection Timing' to 'Delay', with a value of '2500 ms'. This will ensure that the Javascript runs correctly across different devices and browsers, as we noticed some devices and browsers require this extra delay.

Here's a quick video on the steps you'll be taking:

Next, switch over to the group 'Block ON', and add the same code, but this time change the attribute's value from 'false' to 'true'. Also remember to set the 'Delay' to '2500 ms'. You may now 'Save' the test:

The code above will run for each test group, and add the '_igShowBlock' attribute to the cart. In the group 'Block OFF', having the attribute's value set to 'false' will ensure that it is not displayed for visitors in that group. For the group 'Block ON', the attribute's value will be set to 'true', ensuring its display rule is met, so visitors in that group see the 'edit' option on Checkout.

Step 5: Previewing your test

You can now preview your test the same way you preview any other Content Tests. Simply open the test's preview, add a product to the cart, and proceed to the Checkout page. As you switch test groups in the preview widget, the Javascript injected for the group will run, updating the value of the '_igShowBlock' attribute in the cart and determining whether or not the block on Checkout will be displayed:

---

Other Block types

The Checkout Blocks app offers a variety of blocks you can add to Checkout, so you may test other types of blocks, such as a product Upsell, or some Dynamic content, for example. As long as you set a Display Rule on your block, as done in Step 2 in this guide, you should be able to test that block with a test on Intelligems the same way as in the example above!