How to customize the new checkout extensibility

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.

צילום מסך 2024-06-01 ב-14.24.27



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

‏צילום מסך 2024-06-01 ב-14.27.01 1


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

צילום מסך 2024-06-01 ב-14.33.09-1


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

צילום מסך 2024-06-01 ב-14.38.21


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.

צילום מסך 2024-06-01 ב-23.41.52



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.

צילום מסך 2024-06-01 ב-15.05.06


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.

צילום מסך 2024-06-01 ב-15.15.29


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.

צילום מסך 2024-06-01 ב-23.57.44

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.

צילום מסך 2024-06-02 ב-0.02.26

צילום מסך 2024-06-01 ב-15.28.38

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. 

צילום מסך 2024-06-03 ב-14.38.02

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.

צילום מסך 2024-06-02 ב-0.05.14


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.

צילום מסך 2024-06-02 ב-0.15.43-1


צילום מסך 2024-06-02 ב-0.19.00


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.

צילום מסך 2024-06-02 ב-11.22.01


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

IMPORTANT INFO

  • Only Shopify Plus accounts have the ability to edit the checkout section due to limitations with Shopify.
  •  For multi-step checkout - currently we support adding blocks and customizing only the information page. The option of editing additional checkout pages will be added to our robust features in the near future.
  • Each change is targeting a specific device.  The device can be changed by switching the Quick Preview device on the top left side of the screen using the device icon and creating the desired change on the relevant device.