---
title: Account component
description: >-
  Add an account menu to the online store so customers can sign in and stay on
  the storefront or navigate to account pages.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/customer-engagement/account-component
  md: >-
    https://shopify.dev/docs/storefronts/themes/customer-engagement/account-component.md
api_name: storefront-web-components
---

# Account component

The [`<shopify-account>`](https://shopify.dev/docs/api/storefront-web-components/components/shopify-account) component displays a customer avatar in your theme. When customers click the avatar, an account sheet opens with menu links. For signed-out customers, sign-in options appear above the menu.

![The account sheet showing sign-in options including Shop, Google, Facebook, and email, with links to Orders and Profile below.](https://shopify.dev/assets/assets/images/themes/customer-engagement/account-component-dev-docs-1P2ncvZF.gif)

The account component is designed to drive customer sign-ins to accelerate checkout and unlock storefront personalization. It supports the following sign-in methods: passwordless sign-in, automatic sign-in with Shop recognition, and social sign-in providers. Customers can also opt in to email marketing when signing in through the component.

Customers can sign in and stay on the storefront, without being diverted to their account. The account sheet displays menu links such as **Orders** and **Profile** upfront, helping customers understand what they can access before signing in.

The avatar displays differently based on customer state:

* **Signed out**: Displays a default account icon, customizable through the [`signed-out-avatar`](https://shopify.dev/docs/api/storefront-web-components/components/shopify-account#slots-propertydetail-signedoutavatar) slot.
* **Signed in**: Displays the customer's initial or Shop profile picture.

When sign-in links are enabled, the avatar displays in the header. For shops using the latest version of customer accounts, clicking the avatar opens the account sheet. For shops using legacy customer accounts, the avatar links directly to the sign-in page instead.

**Note:**

Shopify controls this component and can update it independently of your theme. While you can apply basic styling to match your theme, the component maintains a consistent appearance across shops.

***

## Implementing the account component in your theme header

Add the [`<shopify-account>`](https://shopify.dev/docs/api/storefront-web-components/components/shopify-account) component to your site header and ensure it's visible on both mobile and desktop so customers can access their account from any page.

```html
{% if shop.customer_accounts_enabled %}


<shopify-account menu="customer-account-main-menu">
</shopify-account>


{% endif %}
```

***

## Customize the account component

You can style the component to match your theme. The customization options depend on whether the user is signed in or signed out:

### Signed-out avatar

The component includes a default signed-out avatar. You can style it using the CSS `part`, or replace the markup entirely using the `slot`.

```html
<style>
  shopify-account::part(signed-out-avatar) {
    padding: 12px;
    width: 64px;
    height: 64px;
  }
</style>


<shopify-account menu="customer-account-main-menu">
  <div slot="signed-out-avatar">
    <img src="{{ 'account-icon.svg' | asset_url }}" alt="Account"/>
  </div>
</shopify-account>
```

### Signed-in avatar and account sheet

The signed-in avatar and the account sheet are controlled by the component. You can customize the look and feel by setting CSS variables in your theme.

For the list of available CSS variables, refer to the [`shopify-account` documentation](https://shopify.dev/docs/api/storefront-web-components/components/shopify-account#css%20variables).

```html
<style>
  shopify-account {
    --shopify-account-signed-in-avatar-size: 36px;
    --shopify-account-signed-in-avatar-color-background: fuchsia;
    --shopify-account-signed-in-avatar-color-text: black;
  }
</style>


<shopify-account menu="customer-account-main-menu">
</shopify-account>
```

***

## Menu links

We recommend adding a theme setting so that merchants can change which menu is used. Add this into your theme settings:

```html
<shopify-account menu="{{ section.settings.customer_account_menu }}">
</shopify-account>
```

```json
// Add to schema section in header.liquid
{
  "type": "link_list",
  "id": "customer_account_menu",
  "label": "Customer account menu",
  "default": "customer-account-main-menu"
}
```

Using `customer-account-main-menu` keeps links consistent between the component and customer account pages. This menu includes links to **Orders** and **Profile**.

Merchants can add, remove, or reorder links in the Shopify admin under **Content** > **Menus**. For more information, see the [Help Center](https://help.shopify.com/en/manual/online-store/menus-and-links).

***