Testing checkout UI extensions
Testing checkout UI extensions in different scenarios is a UX guideline. The purpose is to recreate merchant and customer experiences and ensure that extensions behave as desired.
Test locally
Anchor link to section titled "Test locally"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.
Static extension points
Anchor link to section titled "Static extension points"When you're using a static extension point, the UI extension automatically renders in a chosen location.
Dynamic extension points
Anchor link to section titled "Dynamic extension points"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
, andORDER_SUMMARY4
Test with Shop Pay
Anchor link to section titled "Test with Shop Pay"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.
Step 1: Enable Shopify Payments in test mode
Anchor link to section titled "Step 1: Enable Shopify Payments in test mode"For development stores, where you aren't accepting real payments, enable Shopify Payments.
From your Shopify admin, go to Settings > Payments.
Initiate the signup process by clicking
Activate Shopify Payments
.Once on the signup page, click back to go to the payment settings page.
Follow the steps to enable test mode.
Learn more about setting up Shopify payments.
Step 2: Complete test orders in Shop Pay
Anchor link to section titled "Step 2: Complete test orders in Shop Pay"To complete test orders in Shop Pay, you'll need to create a Shop Pay account with a vaulted test card.
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.
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.
Test the extension in the checkout editor
Anchor link to section titled "Test the extension in the checkout editor"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.
From the Shopify admin click Settings > Checkout and accounts. Then click Customize.
Use the dropdown list at the top of the page to navigate to the checkout step where you want to add your extension.
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:
- In your Partner Dashboard, go to Apps.
- Click the name of your app.
- Click Extensions, and click the name of your extension.
- Click Enable.
Preview different placements for the extension by dragging and dropping the extension between the different extension point targets.
When you've chosen a placement, click Save.
- Learn how to release and publish a version of your checkout UI extension.