Shopify Account Component: The 2026 Theme Store Requirement

As of July 30, 2026, every new theme and every update to an existing theme submitted to the Shopify Theme Store must include the <shopify-account> component in its header. It must be available on both desktop and mobile.

This is more than an icon replacement. The component lets customers sign in without leaving the storefront and opens an account sheet with useful links. It supports passwordless sign-in, Sign in with Shop recognition, and configured social providers while Shopify maintains the underlying experience.

The minimum implementation

Add the component wherever your header renders customer actions:

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

The shop.customer_accounts_enabled guard prevents an unusable account control when customer accounts are disabled. Keep the component in the actual header interaction area—not in a hidden desktop-only container or a drawer that mobile buyers cannot open.

The behavior changes with the customer state:

• Signed out: the component displays an account icon and sign-in choices.
• Signed in: it displays the customer's initial or Shop profile image.
• New customer accounts: clicking opens the account sheet on the storefront.
• Legacy customer accounts: the component links to the sign-in page instead.

Shopify has also deprecated legacy customer accounts, and Theme Store submissions no longer need the old legacy account template files. That does not mean you should delete templates blindly from a live theme. First confirm the store's account configuration and any custom workflows that still reference them.

Give merchants control of the menu

Hard-coding the default menu works, but a native theme should let the merchant choose it. In sections/header.liquid, bind the component to a link_list setting:

{% if shop.customer_accounts_enabled %}
  <shopify-account menu="{{ section.settings.customer_account_menu }}">
  </shopify-account>
{% endif %}

Then add this setting to the header schema's existing settings array:

{
  "type": "link_list",
  "id": "customer_account_menu",
  "label": "Customer account menu",
  "default": "customer-account-main-menu"
}

The default menu includes Orders and Profile and keeps the storefront sheet consistent with customer account pages. Merchants can add, remove, or reorder menu links from Content > Menus in Shopify admin.

If you are building the surrounding header settings from scratch, the input setting reference explains how resource pickers such as link_list behave.

Style the component without rebuilding it

Shopify controls the signed-in avatar and account sheet, which lets the experience receive improvements independently of a theme release. Customization is intentionally bounded.

You can style the default signed-out icon through its CSS part:

shopify-account::part(signed-out-avatar) {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
}

Or replace only the signed-out avatar markup through the supported slot:

<shopify-account menu="{{ section.settings.customer_account_menu }}">
  <span slot="signed-out-avatar" class="header__account-icon">
    {{ 'icon-account.svg' | inline_asset_content }}
    <span class="visually-hidden">{{ 'customer.account.title' | t }}</span>
  </span>
</shopify-account>

Use the component's documented CSS custom properties for the signed-in state rather than attempting to reach into its internal DOM:

shopify-account {
  --shopify-account-signed-in-avatar-size: 2.25rem;
  --shopify-account-signed-in-avatar-color-background: #1f2937;
  --shopify-account-signed-in-avatar-color-text: #ffffff;
}

Avoid copying the account sheet into theme code. That would lose the consistent sign-in flow and create a maintenance burden when Shopify updates the component.

Responsive placement that passes review

Many headers render separate desktop and mobile action groups. If yours does, confirm the component exists in the correct visible branch at each breakpoint. Common failures include:

• the account component is hidden by a desktop utility class on narrow screens;
• a legacy account link is updated in one header variant but not the other;
• the icon is visually present but covered by another absolute-positioned control;
• the tap target becomes too small after custom CSS;
• the mobile drawer traps focus before the account sheet can open.

Keep a comfortable target size, a visible focus indication, and adequate contrast. Test at the exact breakpoints where header markup changes, not only by slowly resizing a wide browser window.

Test the full state matrix

A quick signed-out desktop check is not enough. Before submission, verify:

State	What to verify
Customer accounts disabled	The control isn't rendered
Signed out, desktop	Avatar is visible and opens valid sign-in options
Signed out, mobile	Avatar remains reachable and the sheet fits the viewport
Signed in, desktop	Profile image or initial renders and menu links work
Signed in, mobile	Sheet, close control, focus order, and links are usable
Long translated labels	Menu content doesn't clip or overflow
Keyboard only	Focus is visible and returns logically after closing

Also test Shop recognition and every social provider the development store has enabled. Those options are configuration-dependent, so do not assume the sheet looks identical across stores.

Practical migration checklist

1. Locate every desktop and mobile account-link implementation.
2. Add <shopify-account> under the customer-accounts guard.
3. Connect a merchant-selectable menu with a sensible default.
4. Move only supported visual customization to the part, slot, and CSS variables.
5. Remove duplicated icons only after both responsive paths work.
6. Test signed-in, signed-out, disabled, translated, keyboard, and touch states.
7. Run Theme Check and complete your Theme Store review checklist.

Shopify's requirement announcement and account component guide contain the current supported interface. Use those pages as the authority for properties and customization points.

For adjacent header work, review common Shopify development mistakes and the accessible hero guide for reusable keyboard, focus, contrast, and responsive-testing principles.