How to enable checkout extensibility on Visually

A Step-by step guide

To add additional features to the checkout page in Shopify, you need to specify where those features should appear. This is done by defining specific areas in the theme checkout editor.

Here's how to do so:

1. On the store's Shopify account, navigate to the Checkout section.

2. Click on the Customize button of the live checkout.

3. On the bottom left side of the screen, click on the +Add app block.

4. Click on the Visually app block from the list located on the left side of the screen.

5. On the selector section, provide a unique name for the new block you're adding. This name will be used as a reference since you can add multiple blocks. Once you're ready, click on the back icon.

6. Now you can see the new block that has been added in the checkout editor, along with its current location.
Each block that has been added is seen on the Shopify checkout editor as a new grey block named Dynamic Visual Component.

7. You can either keep it positioned at the location you've chosen or drag and drop it from the list on the left side of the screen to a different location.

To add more blocks to the checkout, repeat steps 3-6.

8. Once you've added the blocks to all the sections you'd like to customize, click on the Save button in the top right corner.

9. To create a new experience for the checkout section on Visually, click on "Create a New Experience" and then navigate to the Checkout section.

10. To see the recent update of the blocks and their chosen position, please click on the button
Click to refresh, located on the right side of the editor. 



11. On the quick preview, all the blocks that have been added via the Shopify checkout editor will be seen as a pink section on the quick preview.

To customize those sections, click on the + icon to unlock the customizations possibilities.
Here you can learn about all those options.

12. Once you've finished customizing the sections, navigate to the Pages targeting section and select Checkout. This will ensure that the data will only be collected for the checkout section.

13. Make sure the Pages section and the changes that have been created are targeting the checkout page.
Then, click on Save and preview the experience to ensure all the changes are shown as expected.

14.  All set! Click on Next and choose whether you'd like to run the experience as an A/B test or run it on 100% of the traffic.
Here you can learn more about how to create an A/B test