Testing checkout UI extensions

The custom field and product offer tutorials show you how to start generating and previewing extensions. Previewing UI extensions locally is different when using static and dynamic targets.

When you're using a static target, the UI extension automatically renders in a chosen location.

When you're using a dynamic target, you can place the UI extension between core features on each checkout step.

Append ?placement-reference={name} to the checkout URL that's outputted by Shopify CLI. {name} represents an available placement for dynamic targets. For example, ?placement-reference=ORDER_SUMMARY4.

The following are supported locations dynamic targets:

• WALLETS1

• INFORMATION1, INFORMATION2 and INFORMATION3

• DELIVERY1 and DELIVERY2

• PAYMENT1, PAYMENT2, PAYMENT3 and PAYMENT4

• ORDER_SUMMARY1, ORDER_SUMMARY2, ORDER_SUMMARY3, and ORDER_SUMMARY4

• ORDER_STATUS1, ORDER_STATUS2 and ORDER_STATUS3

To use extensions in Shop Pay, you need to activate Shopify Payments on your development store and enable test mode. You can develop extensions locally in Shop Pay and preview published extensions.

For development stores, where you aren't accepting real payments, enable Shopify Payments.

1. From your Shopify admin, go to Settings > Payments.

2. Initiate the signup process by clicking Activate Shopify Payments.

3. Once on the signup page, click back to go to the payment settings page.

4. Follow the steps to enable test mode.

Learn more about setting up Shopify payments.

To complete test orders in Shop Pay, you'll need to create a Shop Pay account with a vaulted test card.

1. Create a guest checkout using a test card for the payment method. Use an email that doesn't have a Shop Pay Account attributed to it.

2. Click Save my information for a faster checkout and enter a valid phone number.

You should now have a new Shop Pay account with a vaulted test credit card that you can use to complete checkouts from Shop Pay.

After you've published your extension, you'll test the experience of Plus merchants who have installed your app.

In this step, you'll preview different placements for extensions using the checkout editor. Checkout UI extensions don't display in checkout until the merchant uses the checkout editor to add the app and place it in checkout.

1. From the Shopify admin click Settings > Checkout. Then click Customize checkout.

2. Use the dropdown list at the top of the page to navigate to the checkout step where you want to add your extension.

3. To activate your extension, click Add app block on the bottom left of the page, and select your extension from the list.

   If your extension doesn't appear in the list, then you need to enable a preview of your extension:

   1. In your Partner Dashboard, go to Apps.
   2. Click the name of your app.
   3. Click Extensions, and click the name of your extension.
   4. Click Enable.

4. Preview different placements for the extension by dragging and dropping the extension between the different targets. Test extension experiences in other checkout contexts like One-page checkout, Three-page checkout, and Shop Pay.

5. When you've chosen a placement, click Save.

Three-page checkout is the default checkout context. To test your extension on three-page checkout, complete the following steps:

1. Open the Settings tab.
2. Under Checkout layout, click One-page checkout.
3. Click Three-page checkout.

To test your extension on one-page checkout, complete the following steps:

1. Open the Settings tab.
2. Under Checkout layout, click Three-page checkout.
3. Click One-page checkout.

To test your extension on Shop Pay, complete the following steps:

1. From checkout, click Add app block, and select your extension from the list.
2. Enable Include app in Shop Pay using the checkout behavior controls.
3. Click the cart icon in the editor header.
4. Click Preview Shop Pay from the list of options.

• Learn how to deploy extensions to release changes to users.