Get started building customer account UI extensions by setting up your development environment. You'll use [Shopify CLI](/docs/apps/build/cli-for-apps) to generate starter code for building your extension and automating common development tasks. ## General requirements - You've created a [Partner account](https://www.shopify.com/partners). - You've created a [development store](/docs/api/development-stores). The development store should be pre-populated with test data, including an order that's associated with the email address you'll use to log in to the customer account experience. - You're using the latest version of [Shopify CLI](/docs/api/shopify-cli). - You're using the latest version of [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/). ### Steps 1. Run the following command to scaffold an app: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> shopify app init </script> </div> </p> 1. Select `Build an extension-only app`. 1. Navigate to your app directory: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> cd <directory> </script> </div> </p> 1. Run the following command to create a new extension: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> shopify app generate extension --name my-extension </script> </div> </p> 1. Choose `Customer account UI`. 1. Start your development server to build your app and preview your extension: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> shopify app dev </script> </div> </p> ## Next steps Learn common use cases for customer account UI extensions with the following tutorials: <div class="resource-card-grid"> <div> <a class="resource-card" href="/docs/apps/build/customer-accounts/inline-extensions/build-order-status" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/star" data-alt-src="/assets/resource-cards/star-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Inline extensions </h3> <p class="resource-card__description">Build an extension that displays the loyalty points earned from an order and enables customers to leave a review.</p> </a> </div></p> <p><div> <a class="resource-card" href="/docs/apps/build/customer-accounts/order-action-extensions/build-for-order-action-menus" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/growth" data-alt-src="/assets/resource-cards/growth-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Order action menu extensions </h3> <p class="resource-card__description">Build an extension on the order action menu that enables customers to report problems with their orders.</p> </a> </div></p> <p><div> <a class="resource-card" href="/docs/apps/build/customer-accounts/full-page-extensions/build-new-pages" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/heart" data-alt-src="/assets/resource-cards/heart-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Full-page extensions </h3> <p class="resource-card__description">Build full-page extensions for customers to add and edit products on a wishlist.</p> </a> </div> </div>