Testing customer account UI extensions
Follow these guidelines to test your customer account UI extensions in different user scenarios. Recreating merchant and customer experiences helps ensure that extensions behave as desired in different locations.
Test locally
Anchor link to section titled "Test locally"The inline and order action menu extensions tutorials show you how to start generating and previewing extensions. Previewing UI extensions locally is different when you use static versus block targets.
Static targets
Anchor link to section titled "Static targets"When you're using a static target, the UI extension automatically renders in a chosen location.
Block targets
Anchor link to section titled "Block targets"When you're using a block target, merchants can choose where to place the UI extension.
To preview a block extension in each supported location, append ?placement-reference={name}
to the customer URL that's outputted by Shopify CLI. For example, ?placement-reference=ORDER_SUMMARY3
.
The following are the placement reference names for each page:
Placement references
Anchor link to section titled "Placement references"Order index
Anchor link to section titled "Order index"PAGE_TITLE
ORDER_INDEX
Order status
Anchor link to section titled "Order status"PAGE_TITLE
ORDER_STATUS1
,ORDER_STATUS2
, andORDER_STATUS3
ORDER_SUMMARY1
,ORDER_SUMMARY2
, andORDER_SUMMARY3
PAGE_TITLE
PROFILE1
, andPROFILE2