---
title: shopify-account
description: The <shopify-account> component displays an avatar on your website.
source_url:
  html: >-
    https://shopify.dev/docs/api/storefront-web-components/components/shopify-account
  md: >-
    https://shopify.dev/docs/api/storefront-web-components/components/shopify-account.md
api_name: storefront-web-components
---

# shopify-account

The `<shopify-account>` component displays an avatar on your website. 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 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.

**In a theme**

Refer to this [theme documentation](https://shopify.dev/docs/storefronts/themes/customer-engagement/account-component) on how to add the component to your theme.

**Outside a theme**

Refer to this [Hydrogen with account component documentation](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/hydrogen-with-account-component) on how to add the component to your Hydrogen store.

#### Attributes and properties

* **menu**

  **string**

  A menu in a store. The component should use "customer-account-main-menu" to refer to the same menu used in customer accounts. Default links include the Orders and Profile pages. To learn more about menus, refer to [Menus and links](https://help.shopify.com/en/manual/online-store/menus-and-links).

* **sign-in-url**

  **string**

  **Default: "/customer\_authentication/login"**

  When attempting to sign in, the user will be redirected to this URL with query parameters that must be passed in the authorization request to Shopify's customer authentication.

#### CSS variables

CSS variables allow you to target and override the default styling within the account component.

![CSS variables](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/storefront-elements/css-variables-DzrHgtW3.png)

* **--shopify-account-color-accent**

  **string**

  The accent color used for interactive elements.

* **--shopify-account-color-background**

  **string**

  The background color of the account sheet.

* **--shopify-account-color-text**

  **string**

  The color of the text used throughout the account sheet.

* **--shopify-account-dialog-position-top**

  **string**

  The offset from the top of the dialog.

* **--shopify-account-font-body**

  **string**

  The font family used for body text in the account sheet. For online store, follow best practices for [fonts](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts).

* **--shopify-account-font-heading**

  **string**

  The font family used for headings in the account sheet. For online store, follow best practices for [fonts](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts).

* **--shopify-account-radius-base**

  **string**

  The base corner radius applied to elements within the sheet.

#### Derived CSS variables

These variables are automatically derived from the CSS variables above. Override them individually if you need finer control.

* **--shopify-account-avatar-size**

  **string**

  The width and height of the account button. Overrides the default size derived from the avatar.

* **--shopify-account-color-accent-hover**

  **string**

  The accent color on hover state.

* **--shopify-account-color-accent-text**

  **string**

  The accent contrast color used for interactive elements.

* **--shopify-account-color-background-subdued**

  **string**

  Subdued background color for secondary elements.

* **--shopify-account-color-border**

  **string**

  The border color used in the sheet.

* **--shopify-account-color-card-background**

  **string**

  Background color for card elements.

* **--shopify-account-color-card-text**

  **string**

  Text color for card elements.

* **--shopify-account-color-control-background**

  **string**

  Background color for form controls.

* **--shopify-account-color-control-text**

  **string**

  Text color for form controls.

* **--shopify-account-color-shadow**

  **string**

  Shadow color used for depth.

* **--shopify-account-color-text-subdued**

  **string**

  Subdued text color for secondary text.

* **--shopify-account-font-body-transform**

  **string**

  The text transform for text elements.

* **--shopify-account-font-body-weight**

  **string**

  The font weight for text elements.

* **--shopify-account-font-heading-transform**

  **string**

  The text transform for headings.

* **--shopify-account-font-heading-weight**

  **string**

  The font weight for headings.

* **--shopify-account-radius-button**

  **string**

  Corner radius for buttons.

* **--shopify-account-radius-button-small**

  **string**

  Small corner radius for minor elements.

* **--shopify-account-radius-dialog**

  **string**

  Corner radius for the dialog container.

* **--shopify-account-radius-input**

  **string**

  Corner radius for input fields.

* **--shopify-account-signed-in-avatar-color-background**

  **string**

  The background color of the signed-in avatar.

* **--shopify-account-signed-in-avatar-color-text**

  **string**

  The text color of the initial in the signed-in avatar.

* **--shopify-account-signed-in-avatar-size**

  **string**

  The width and height of the signed-in avatar.

#### CSS parts

CSS parts allow you to override the default styling of the account component.

* **signed-out-avatar**

  **CSSPart**

  The button element for the signed-out avatar.

### CSSPart

A \[\`::part\` CSS pseudo-element]\(https://developer.mozilla.org/en-US/docs/Web/CSS/::part) allowing you to target and override the default styling within the component.

```ts
string
```

#### Slots

Slots enable you to override the default content of the account component.

* **signed-out-avatar**

  **SlotElement**

  The avatar to display when the user is signed out.

### SlotElement

A slot element allows you to override the default content of the component. Read more on the \[MDN Documentation]\(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).

```ts
string
```

#### Events

Events let you listen and respond to changes in the account component's state.

* **close**

  **CustomEvent**

  Fired when the account sheet is closed.

* **open**

  **CustomEvent**

  Fired when the account sheet is opened.

Examples

### Examples

* ####

  ##### Description

  Basic usage

  ##### HTML

  ```html
  <shopify-store
    store-domain="https://your-store.myshopify.com"
    public-access-token="-access-token"
    <!-- when user is signed in -->
     customer-access-token="customer-access-token"
  >
  </shopify-store>

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

* ####

  ##### Description

  Add component to a theme.

  ##### Liquid

  ```liquid
  {% if shop.customer_accounts_enabled %}
    <shopify-account menu="customer-account-main-menu">
    </shopify-account>
  {% endif %}
  ```

* ####

  ##### Description

  Use custom styles to customize the signed-in avatar.

  ##### HTML

  ```html
  <shopify-store
    store-domain="https://your-store.myshopify.com"
    public-access-token="public-access-token"
    customer-access-token="access-token"
  >
  </shopify-store>

  <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>
  ```

* ####

  ##### Description

  Use custom HTML for the signed-out avatar.

  ##### HTML

  ```html
  <shopify-store
    store-domain="https://your-store.myshopify.com"
    public-access-token="public-access-token"
    customer-access-token="access-token"
  >
  </shopify-store>

  <shopify-account menu="customer-account-main-menu">
    <div slot="signed-out-avatar">
      <img src="https://cdn.your-store.com/user-icon.svg" alt="Account" />
    </div>
  </shopify-account>
  ```

* ####

  ##### Description

  Use custom styles for the account sheet

  ##### HTML

  ```html
  <shopify-store
    store-domain="https://your-store.myshopify.com"
    public-access-token="public-access-token"
    customer-access-token="access-token"
  >
  </shopify-store>

  <style>
    shopify-account {
      --shopify-account-radius-base: 0;
      --shopify-account-color-accent: fuchsia;
    }
  </style>

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

***

## Related

[shopify-store](https://shopify.dev/docs/api/storefront-web-components/components/shopify-store)

[Add to your theme](https://shopify.dev/docs/storefronts/themes/customer-engagement/account-component)

[Add to your Hydrogen storefront](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/hydrogen-with-account-component)

***