Testing checkout UI extensions

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

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

When you're using a dynamic extension point, 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 extension points. For example, ?placement-reference=ORDER_SUMMARY4.

The following are supported locations dynamic extension points:

• WALLETS1

• INFORMATION1, INFORMATION2, INFORMATION3

• DELIVERY1, DELIVERY2

• PAYMENT1, PAYMENT2, PAYMENT3, PAYMENT4

• ORDER_SUMMARY1, ORDER_SUMMARY2, ORDER_SUMMARY3, and ORDER_SUMMARY4

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 and accounts. Then click Customize.

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 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 extension point targets.

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

• Learn how to release and publish a version of your checkout UI extension.