From 1267a591a6ff0d18f1ab080148d76542bce8625c Mon Sep 17 00:00:00 2001
From: Jesse Breneman <jesse.breneman@shopify.com>
Date: Thu, 19 Feb 2026 11:34:04 -0500
Subject: [PATCH] Add customer account menu web component

---
 assets/icon-account.svg        |  4 ++--
 locales/en.default.schema.json |  1 +
 sections/header.liquid         | 13 ++++++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/icon-account.svg b/assets/icon-account.svg
index ed2687e40..5c523a3f8 100644
--- a/assets/icon-account.svg
+++ b/assets/icon-account.svg
@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" slot="signed-out-avatar">
   <circle cx="10" cy="6.5" r="2.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)" />
   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
     stroke-width="var(--icon-stroke-width)"
     d="m5.172 14.591-.437.786a.588.588 0 0 0 .514.873h9.502a.588.588 0 0 0 .514-.873l-.437-.786a5.523 5.523 0 0 0-9.656 0" />
-</svg>
\ No newline at end of file
+</svg>
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index a2fa86807..2dfbc2f7d 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -42,6 +42,7 @@
     "input_corner_radius": "Input corner radius",
     "layout_direction": "Layout direction",
     "menu": "Menu",
+    "customer_account_menu": "Customer account menu",
     "padding": "Padding",
     "page_margin": "Page margin",
     "page_width": "Page width",
diff --git a/sections/header.liquid b/sections/header.liquid
index f5d3f3c35..d873bdda7 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -11,7 +11,9 @@
 
   <div class="header__icons">
     {% if shop.customer_accounts_enabled %}
-      {{ 'icon-account.svg' | inline_asset_content | link_to: routes.account_url }}
+      <shopify-account menu="{{ section.settings.customer_account_menu }}">
+        {{ 'icon-account.svg' | inline_asset_content }}
+      </shopify-account>
     {% endif %}
 
     <a href="{{ routes.cart_url }}">
@@ -35,6 +37,9 @@
     position: relative;
     text-decoration: none;
     color: var(--color-foreground);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   header a sup {
     position: absolute;
@@ -60,6 +65,12 @@
       "type": "link_list",
       "id": "menu",
       "label": "t:labels.menu"
+    },
+    {
+      "type": "link_list",
+      "id": "customer_account_menu",
+      "label": "t:labels.customer_account_menu",
+      "default": "customer-account-main-menu"
     }
   ]
 }