Skip to main content
Member storefront is in a limited pilot. Confirm that member storefront is enabled for your company before publishing this tag.
{% member_account %} gives one cached header two states. A guest sees a Sign in link. A signed-in member sees a round avatar of their initials that opens a small account menu. Use it when you want the account control without writing the markup yourself. If you would rather build your own links and styles, use member_routes instead — see Sign in and sign out.

​
Add the tag

Place it in your storefront header or member layout:
That is the whole theme change. The tag renders an empty element carrying only data, and the SDK builds the markup inside it in the browser:
With member storefront disabled, the tag renders nothing at all. The tag takes no arguments. Passing one is a template error.

​
What each visitor sees

Initials come from the member’s display name — “Alex Kim” reads AK, and “Alex” reads A. The name arrives with the session the SDK already fetches for prices and greetings, so the avatar costs no extra request. Account opens your company’s account host. Sign out ends the session on the current host. The cached HTML always starts in the guest state, exactly like a member-aware section. The menu appears only once the SDK confirms the session. An expired session or a failed request leaves Sign in visible.
The cached page never contains the member’s name or initials. Both are written in the browser after the session is confirmed.

​
Keyboard and dismissal

The menu uses a native disclosure element, so it works without extra theme JavaScript:
  • Escape closes the menu and returns focus to the avatar
  • A click outside closes it
  • Choosing a link closes it
The panel is sized by its own content and clamped to a maximum width, so a narrow or stretched navigation container will not stretch it.

​
Styling

The tag passes your theme’s own settings to the menu, using the same values member system screens read — primary color, surface color, border color, and body font among them. The menu matches your system screens with no second palette to maintain. See Theme settings and system screen styles. A storefront with no such settings falls back to neutral defaults that inherit the surrounding header’s text color, so the avatar stays legible on a light or a dark header. To go further, style these classes with your own CSS: Two custom properties are available for the panel:
The panel respects prefers-reduced-motion.

​
Labels and translation

Labels are rendered by the server, so they follow your storefront’s language rather than being fixed in the browser. You do not pass label text to the tag. Only https:, http:, and root-relative URLs are used. Any other value falls back to a safe default, so a mistyped or hostile value cannot turn a menu item into a script.

​
Test your header

  • Load a storefront page signed out and confirm Sign in is visible.
  • Sign in, return to that page, and confirm the avatar shows your initials.
  • Open the menu and confirm it contains only Account and Sign out.
  • Press Escape, then click outside, and confirm the menu closes both ways.
  • View the cached HTML as a guest and confirm it contains no member name or initials.