The `customers/account` template renders the customer account page, which provides an overview of the [customer’s account](https://help.shopify.com/manual/customers/customer-accounts). > Tip: > Refer to the [customers/account template](https://github.com/Shopify/dawn/blob/main/templates/customers/account.json) and its [main section](https://github.com/Shopify/dawn/blob/main/sections/main-account.liquid) in Dawn for an example implementation. <figure class="figure"> <img src="/assets/themes/templates/customer-account.png" style="width: 100%; max-width: 550px;" alt="An example of the customers/account template in Dawn"> </figure> ## Location The `customers/account` template is located in the `templates` > `customers` directory of the theme: ```text └── theme ├── layout ├── templates | └── customers | ├── account.json | ... ... ``` ## Content You should include the [customer object](#the-customer-object) in your `customers/account` template or a section inside of the template. ### The customer object You can access the Liquid [`customer` object](/docs/api/liquid/objects/customer) to display the customer account details. ## Usage When working with the `customers/account` template, you should familiarize yourself with the following: - [Showing the customer's orders](#show-the-customer-s-orders) - [Showing the customer's default address](#show-the-customer-s-default-address) > Tip: > If you're using a JSON template, then any HTML or Liquid code needs to be included in a [section](/docs/storefronts/themes/architecture/sections) that's referenced by the template. ### Show the customer’s orders You should show customers a list of their orders. These can be accessed through the `order` attribute of the [customer object](/docs/api/liquid/objects/customer#customer-orders), and have a limit of 20 per page. For this reason, you should paginate orders to ensure that they’re all accessible: <p> <div class="react-code-block" data-preset="file"> <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 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 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 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 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 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 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 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 data-option="filename" data-value="Example"></script> <script type="text/plain" data-language="liquid"> RAW_MD_CONTENT {% paginate customer.orders by 10 %} {% for order in customer.orders %} <!-- order info --> {% endfor %} {{ paginate | default_pagination }} {% endpaginate %} END_RAW_MD_CONTENT</script> </div> </p> ### Show the customer’s default address You should show customers their default address. This can be accessed through the `default_address` attribute of the [customer object](/docs/api/liquid/objects/customer#customer-default_address): <p> <div class="react-code-block" data-preset="file"> <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 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 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 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 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 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 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 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 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 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 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 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 data-option="filename" data-value="Example"></script> <script type="text/plain" data-language="liquid"> RAW_MD_CONTENT {% if customer.default_address %} <p>{{ customer.default_address.address1 }}</p> {% if customer.default_address.address2 != blank %} <p>{{ customer.default_address.address2 }}</p> {% endif %} <p>{{ customer.default_address.city }}, {% if customer.default_address.province_code %}{{ customer.default_address.province_code }}{% endif %}, {{ customer.default_address.country_code }} <p>{{ customer.default_address.zip_code }}</p> <p>{{ customer.default_address.phone }}</p> {% endif %} END_RAW_MD_CONTENT</script> </div> </p>