Shopify Themes

If your store uses Shopify’s new customer accounts, you have probably noticed that after a customer logs in, the account icon in your header changes from your theme’s icon (a person outline) to a small coloured circle with the customer’s initial — for example a blue circle with a white “T”.

This article explains what that circle is, why it behaves the way it does, and exactly how to restyle it to match your brand.

---

Why the icon changes after login

The post-login circle is not rendered by your Fuel Themes theme. It is injected by Shopify’s customer accounts system through a web component called <shopify-account>. Shopify chooses the circle’s background colour and the letter’s colour on their side — not the theme — which is why it can appear blue even when your header is a completely different colour.

Because the element lives inside a shadow DOM, ordinary CSS selectors like .account-icon { background: white; } cannot reach it. To restyle it you have to set specific CSS custom properties (variables) that Shopify exposes on the <shopify-account> host element.

This applies to any theme — Ascension, Distinctive, Habitat, North, Pinnacle, Reformation, and Vision — because the circle comes from Shopify, not from the theme.

---

The CSS variables you can control

Shopify exposes the following custom properties on the <shopify-account> element:

Variable	What it controls
--shopify-account-signed-in-avatar-color-accent	Background colour of the circle (signed-in state)
--shopify-account-color-accent	Background colour used elsewhere in the account UI
--shopify-account-signed-in-avatar-color-accent-text	Colour of the initial letter inside the circle (signed-in state)
--shopify-account-color-accent-text	Text/foreground colour used elsewhere in the account UI
--shopify-account-signed-in-avatar-color-border	Border colour of the circle (signed-in state)
--shopify-account-color-border	Border colour used elsewhere in the account UI

You do not need to set all of them — only the ones you want to change.

---

Where to paste the CSS

In your theme editor:

1. Go to Online Store → Themes → Customize.
2. Open Theme settings (bottom-left panel).
3. Find the Custom CSS field and paste the snippet there.
4. Save.

The change is live immediately — no theme republish needed. Log into your store as a customer (or refresh a logged-in session) to see it.

---

Ready-to-copy recipes

Recipe 1 — White circle with a themed initial

This is the most common request. The circle becomes white, and the customer’s initial takes on your header colour so it reads like the rest of your header icons.

shopify-account {
  --shopify-account-signed-in-avatar-color-accent: #ffffff !important;
  --shopify-account-color-accent: #ffffff !important;
  --shopify-account-signed-in-avatar-color-accent-text: var(--color-header-background) !important;
  --shopify-account-color-accent-text: var(--color-header-background) !important;
}

var(--color-header-background) picks up whatever colour sits behind your header — so this snippet will adapt automatically if you change your header colours later. Prefer a fixed colour? Swap the variable for a hex code, e.g. #1a1a1a.

Recipe 2 — Transparent circle that inherits your header colours

This is the recipe we recommend for the cleanest look: the circle’s background disappears, and the border and initial both take on your header text colour. On most stores this makes the logged-in icon almost indistinguishable from the icons next to it (search, cart).

shopify-account {
  --shopify-account-signed-in-avatar-color-accent: transparent !important;
  --shopify-account-color-accent: transparent !important;

  --shopify-account-signed-in-avatar-color-accent-text: var(--color-header-text, var(--color-header-links, #ffffff)) !important;
  --shopify-account-color-accent-text: var(--color-header-text, var(--color-header-links, #ffffff)) !important;

  --shopify-account-signed-in-avatar-color-border: var(--color-header-text, var(--color-header-links, #ffffff)) !important;
  --shopify-account-color-border: var(--color-header-text, var(--color-header-links, #ffffff)) !important;
}

The nested var(..., var(..., #ffffff)) pattern means: try the header text colour first, fall back to the header links colour, and finally fall back to white if neither is set.

Recipe 3 — Brand-coloured circle with a white initial

If you prefer the post-login state to pop, you can make the circle your brand colour with a white letter inside it.

shopify-account {
  --shopify-account-signed-in-avatar-color-accent: #d94f2b !important; /* your brand colour */
  --shopify-account-color-accent: #d94f2b !important;
  --shopify-account-signed-in-avatar-color-accent-text: #ffffff !important;
  --shopify-account-color-accent-text: #ffffff !important;
}

Replace #d94f2b with your brand’s hex code.

---

Why !important is needed

Shopify sets default values for these variables inside their own stylesheet. Without !important, your overrides may lose the specificity battle and appear to have no effect. Adding !important on each line guarantees the theme’s override wins.

---

Troubleshooting

The change is not showing up.

• Make sure you pasted the CSS into Custom CSS under Theme settings, not into a single section’s custom CSS field.
• Clear your browser cache, or open an incognito window.
• Confirm you are logged in as a customer — the circle with the initial only appears after login.

The circle still shows a tiny border I did not ask for.

• Add the --shopify-account-signed-in-avatar-color-border and --shopify-account-color-border lines from Recipe 2 and set them to transparent or to your background colour.

I want different styles on mobile vs desktop.

• Wrap the shopify-account { ... } block in a media query, e.g. @media (max-width: 749px) { shopify-account { ... } }.

---

Getting help

If you tried these recipes and the icon still does not look right, open a support ticket at fuelthemes.net/contact and include:

1. A collaborator request code so we can access your theme.
2. A screenshot of what you currently see.
3. A short description of the look you want.

We will confirm the right combination of variables for your theme’s colour setup.