import CustomerAccountUiCreate from 'app/views/partials/apps/customer-accounts/ui-extensions/create.mdx' import CustomerAccountUiPreview from 'app/views/partials/apps/customer-accounts/ui-extensions/preview.mdx' import UiExtensionRequirements from 'app/views/partials/apps/customer-accounts/ui-extensions/requirements.mdx' <Repo extension="react" href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react" /> <Repo extension="javascript" href="https://github.com/Shopify/customer-account-tutorials/tree/main/javascript/example-customer-account--loyalty-app--js" /> <Picker name="extension"> <PickerOption name="react" /> <PickerOption name="javascript" /> </Picker> <Overview> <If featureFlagDisabled="customer_account_extensibility_ga"> <Notice type="beta" title="Developer preview"> <p>Customer account UI extensions are included in the <a target="_blank" href="https://shopify.dev/docs/api/release-notes/developer-previews">Checkout and Customer Accounts Extensibility developer preview</a>.</p> </Notice> </If> Inline extensions render after, before, or within a piece of UI, at either [static](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) or [block](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) extension targets. In this tutorial, you'll build two extensions for the **Order status** page: one that displays the loyalty points earned for a specific order, and one that encourages customers to write a review.  ## What you'll learn In this tutorial, you'll learn how to do the following tasks: - Create extensions that are rendered on the **Order status** page - Use multiple extension targets to display different interfaces to the customer - Run the extensions locally and test them on a development store </Overview> <Requirements> <UiExtensionRequirements /> </Requirements> <StepSection> <Step> ### Create a customer account UI extension for the order status block target <Substep> <CustomerAccountUiCreate /> </Substep> </Step> <Step> ### Set up the target for your order status block extension Set up the target for your Customer account UI extension. [Targets](/docs/api/customer-account-ui-extensions/latest/targets) control where your extension renders in the customer account flow. The example code uses the following target: `customer-account.order-status.block.render` <Substep> <CodeRef extension="react" tag="config.setup-targets" href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-block/shopify.extension.toml" /> <CodeRef extension="javascript" tag="config.setup-targets" href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-points-block-extension/shopify.extension.toml" /> In your extension's configuration file, for the `customer-account-order-status-block-render` target create an `[[extensions.targeting]]` section with the following information: **`target`**: An identifier that specifies where you're injecting code into Shopify. **`module`**: The path to the file that contains the extension code. </Substep> <Substep> Create a file in your extension's `src` directory for the target. In this example, you'll create a file for the order status block extension. Make sure that the name of the files match the `module` paths that you specified. <CodeRef extension="react" tag="order-status-block.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-block/src/PointsBlockExtension.tsx" /> <CodeRef extension="javascript" tag="order-status-block.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-points-block-extension/src/OrderStatusPageTitlePointsBlockExtension.js" /> --- [shopify.extension.toml](/docs/apps/build/app-extensions/configure-app-extensions) is the configuration file for your extension. <Notice type="info"> Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect. </Notice> </Substep> </Step> <Step> ### Create a customer account UI extension for the order status fulfillment static target <Substep> <CustomerAccountUiCreate /> </Substep> </Step> <Step> ### Set up the target for your order status static extension Set up the target for your Customer account UI extension. [Targets](/docs/api/customer-account-ui-extensions/latest/targets) control where your extension renders in the customer account flow. The example code uses the following target: `customer-account.order-status.fulfillment-details.render-after` <Substep> In your extension's configuration file, for the `customer-account-order-status-fulfillment-details-render-after` target create an `[[extensions.targeting]]` section with the following information: **`target`**: An identifier that specifies where you're injecting code into Shopify. **`module`**: The path to the file that contains the extension code. <CodeRef extension="react" tag="config.setup-targets" href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-fulfillment/shopify.extension.toml" /> <CodeRef extension="javascript" tag="config.setup-targets" href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-fulfillment-details-extension/shopify.extension.toml" /> </Substep> <Substep> Create a file in your extension's `src` directory for the target. In this example, you'll create a file for the order status block extension. Make sure that the name of the files match the `module` paths [that you specified](#reference-the-targets-in-your-configuration-file). <CodeRef extension="react" tag="order-status-static.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-fulfillment/src/FulfillmentDelivery.tsx" /> <CodeRef extension="javascript" tag="order-status-static.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-fulfillment-details-extension/src/CustomerFulfillmentDetailsDelivery.js" /> --- [shopify.extension.toml](/docs/apps/build/app-extensions/configure-app-extensions) is the configuration file for your extension. <Notice type="info"> Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect. </Notice> </Substep> </Step> <Step> ### Build the order status block extension <Substep> #### Build the UI <CodeRef extension="react" tag="order-status-block.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-block/src/PointsBlockExtension.tsx" /> <CodeRef extension="javascript" tag="order-status-block.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-points-block-extension/src/OrderStatusPageTitlePointsBlockExtension.js" /> Using checkout UI extension components, add a banner to the **Order status** page to let the customer know how many points they've earned for the order. In this example, the number of points is hardcoded. In a production-ready application, you'd retrieve this information by making an API call to your server, or to the [Customer Account API](/docs/api/customer) if you're storing loyalty points in metafields. Similar to the profile block, the example adds a **View rewards** link, which you could link to a full-page extension that displays the customer's rewards information in more detail. --- Customer account UI extensions are limited to specific UI components exposed by the platform [for security reasons](/docs/api/checkout-ui-extensions#security). You can use checkout UI components and customer account UI components to create a UI that feels seamless within the customer accounts experience, and that inherits a merchant's brand settings. <Resources> [Banner](/docs/api/checkout-ui-extensions/latest/components/feedback/Banner) [BlockStack](/docs/api/checkout-ui-extensions/latest/components/structure/BlockStack) [TextBlock](/docs/api/checkout-ui-extensions/latest/components/titles-and-text/TextBlock) [Link](/docs/api/checkout-ui-extensions/latest/components/actions/link) [Button](/docs/api/checkout-ui-extensions/latest/components/actions/button) </Resources> </Substep> </Step> <Step> ### Build the order status static extension <Substep> #### Build the UI <CodeRef extension="react" tag="order-status-static.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-fulfillment/src/FulfillmentDelivery.tsx" /> <CodeRef extension="javascript" tag="order-status-static.build-ui" href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-fulfillment-details-extension/src/CustomerFulfillmentDetailsDelivery.js" /> Add some content inside the fulfillment details card to encourage customers to provide a review in exchange for loyalty points. While this is outside of the scope of this tutorial, the example includes a **Write a review** button, which you could link to modal that contains a form for the customer to submit their review. --- <Resources> [BlockStack](/docs/api/checkout-ui-extensions/latest/components/structure/BlockStack) [Divider](/docs/api/checkout-ui-extensions/latest/components/structure/BlockStack) [TextBlock](/docs/api/checkout-ui-extensions/latest/components/titles-and-text/TextBlock) [Button](/docs/api/checkout-ui-extensions/latest/components/actions/button) </Resources> </Substep> </Step> <Step> ### Preview the extension Preview your extension to make sure that it works as expected. <Substep> <CustomerAccountUiPreview /> Navigate to the **Order status** page of a customer account to see your extension in action. ---  --- <Notice type="info"> By default, block extensions are placed in the first available placement reference. In a production-ready situation, merchants move this extension to the right location using the checkout editor. To test this, you can add the `?placement-reference=ORDER_SUMMARY1` query parameter to the URL of the **Order status** page. This moves the extension the next placement reference on the page. Learn more about [testing UI extensions](/docs/apps/build/customer-accounts/test) in different placement references. </Notice> </Substep> </Step> </StepSection> <NextSteps> ## Tutorial complete! Nice work - what you just built could be used by Shopify merchants around the world! Keep the momentum going with these related tutorials and resources. ### Next Steps <CardGrid> <LinkCard href="/docs/apps/customer-accounts/best-practices/deciding-extension-placement"> #### Extension placement Explore extension placement options and make informed decisions on where to position them. </LinkCard> <LinkCard href="/docs/apps/customer-accounts/best-practices/localizing-ui-extensions"> #### Localize your extension Learn about localizing your customer account UI extensions for international merchants and customers. </LinkCard> <LinkCard href="/docs/api/customer-account-ui-extensions/targets"> #### Extension targets Learn about the extension targets offered for customer accounts. </LinkCard> <LinkCard href="/docs/apps/customer-accounts/best-practices/ux-guidelines"> #### UX guidelines Follow our UX guidelines for customer accounts to ensure a consistent and satisfying user experience. </LinkCard> <LinkCard href="/docs/api/customer-account-ui-extensions/components"> #### Customer account components Learn about the components you can use to build customer account UI extensions. </LinkCard> <LinkCard href="/docs/api/checkout-ui-extensions/unstable/components"> #### Checkout components Learn about the checkout components you can use to build customer account UI extensions. </LinkCard> </CardGrid> </NextSteps>