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">
    RAW_MD_CONTENTshopify app init 
    END_RAW_MD_CONTENT</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">
    RAW_MD_CONTENTcd <directory>
    END_RAW_MD_CONTENT</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">
        RAW_MD_CONTENTshopify app generate extension --name my-extension
        END_RAW_MD_CONTENT</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">
    RAW_MD_CONTENTshopify app dev 
    END_RAW_MD_CONTENT</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>