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.

In a theme

Refer to this theme documentation on how to add the component to your theme.

Outside a theme

Refer to this Hydrogen with account component documentation on how to add the component to your Hydrogen store.

Anchor to attributes and propertiesAttributes and properties

Anchor to menu 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.
Anchor to sign-in-url 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.

Anchor to css variablesCSS variables

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

CSS variables

Anchor to --shopify-account-color-accent --shopify-account-color-accent string: The accent color used for interactive elements.
Anchor to --shopify-account-color-background --shopify-account-color-background string: The background color of the account sheet.
Anchor to --shopify-account-color-text --shopify-account-color-text string: The color of the text used throughout the account sheet.
Anchor to --shopify-account-dialog-position-top --shopify-account-dialog-position-top string: The offset from the top of the dialog.
Anchor to --shopify-account-font-body --shopify-account-font-body string: The font family used for body text in the account sheet. For online store, follow best practices for fonts.
Anchor to --shopify-account-font-heading --shopify-account-font-heading string: The font family used for headings in the account sheet. For online store, follow best practices for fonts.
Anchor to --shopify-account-radius-base --shopify-account-radius-base string: The base corner radius applied to elements within the sheet.

Anchor to derived css variablesDerived CSS variables

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

Anchor to --shopify-account-avatar-size --shopify-account-avatar-size string: The width and height of the account button. Overrides the default size derived from the avatar.
Anchor to --shopify-account-color-accent-hover --shopify-account-color-accent-hover string: The accent color on hover state.
Anchor to --shopify-account-color-accent-text --shopify-account-color-accent-text string: The accent contrast color used for interactive elements.
Anchor to --shopify-account-color-background-subdued --shopify-account-color-background-subdued string: Subdued background color for secondary elements.
Anchor to --shopify-account-color-border --shopify-account-color-border string: The border color used in the sheet.
Anchor to --shopify-account-color-card-background --shopify-account-color-card-background string: Background color for card elements.
Anchor to --shopify-account-color-card-text --shopify-account-color-card-text string: Text color for card elements.
Anchor to --shopify-account-color-control-background --shopify-account-color-control-background string: Background color for form controls.
Anchor to --shopify-account-color-control-text --shopify-account-color-control-text string: Text color for form controls.
Anchor to --shopify-account-color-shadow --shopify-account-color-shadow string: Shadow color used for depth.
Anchor to --shopify-account-color-text-subdued --shopify-account-color-text-subdued string: Subdued text color for secondary text.
Anchor to --shopify-account-font-body-transform --shopify-account-font-body-transform string: The text transform for text elements.
Anchor to --shopify-account-font-body-weight --shopify-account-font-body-weight string: The font weight for text elements.
Anchor to --shopify-account-font-heading-transform --shopify-account-font-heading-transform string: The text transform for headings.
Anchor to --shopify-account-font-heading-weight --shopify-account-font-heading-weight string: The font weight for headings.
Anchor to --shopify-account-radius-button --shopify-account-radius-button string: Corner radius for buttons.
Anchor to --shopify-account-radius-button-small --shopify-account-radius-button-small string: Small corner radius for minor elements.
Anchor to --shopify-account-radius-dialog --shopify-account-radius-dialog string: Corner radius for the dialog container.
Anchor to --shopify-account-radius-input --shopify-account-radius-input string: Corner radius for input fields.
Anchor to --shopify-account-signed-in-avatar-color-background --shopify-account-signed-in-avatar-color-background string: The background color of the signed-in avatar.
Anchor to --shopify-account-signed-in-avatar-color-text --shopify-account-signed-in-avatar-color-text string: The text color of the initial in the signed-in avatar.
Anchor to --shopify-account-signed-in-avatar-size --shopify-account-signed-in-avatar-size string: The width and height of the signed-in avatar.

Anchor to css partsCSS parts

Slots allow you to override the default styling of the account component.

Anchor to signed-out-avatar signed-out-avatar: The button element for the signed-out avatar.

Anchor to slotsSlots

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

Anchor to signed-out-avatar signed-out-avatar: The avatar to display when the user is signed out.

Anchor to eventsEvents

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

Anchor to close close CustomEvent: Fired when the account sheet is closed.
Anchor to open open CustomEvent: Fired when the account sheet is opened.

Examples

HTML

<shopify-store

store-domain="https://your-store.myshopify.com"

public-access-token="-access-token"

customer-access-token="customer-access-token"

</shopify-store>

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

</shopify-account>

Examples

Basic usage

Description

Basic usage

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>

Add to a theme

Description

Add component to a theme.

Liquid

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

Custom styles for signed-in-avatar

Description

Use custom styles to customize the signed-in avatar.

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>

Custom HTML for signed-out-avatar

Description

Use custom HTML for the signed-out avatar.

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>

Custom styles for the account sheet

Description

Use custom styles for the account sheet

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>