Changing Account Login Appearance

Store Design
, , ,
1

Hello!

Can someone please help me with changing the look of the account logo on the new Tinker theme? I like the way it looks without being logged in. But when logged in, the appearance is terrible and boring (see attached). It turns into this grey circle with an initial in the middle of it. Is there any way to keep the “logged in” icon the same as when no one is logged in? If not, is there anyway to make it smaller, maybe make the grey background transparent where it is just a letter? I am open to suggestions, but I do not love this current look lol.

Thank you in advance!

1 Like
2

There are various solutions you can use which are following:

1. Revert to the Logged-Out Style

To make the logged-in icon match the logged-out appearance, you can add this CSS code to your theme customization:

.header-account-link–logged-in {
background: none !important;
color: inherit !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
font-size: inherit !important;
}

2. Minimalist Initial (Transparent Background)

If you prefer keeping the initial but making it more subtle:

.header-account-link–logged-in {
background: transparent !important;
border: 1px solid currentColor !important;
width: 24px !important;
height: 24px !important;
line-height: 22px !important;
font-size: 12px !important;
}

3. Custom SVG Icon Replacement

You could replace it with an SVG icon that matches your logged-out style:

.header-account-link–logged-in::before {
content: url(‘data:image/svg+xml;utf8,’);
display: block;
width: 24px;
height: 24px;
}

.header-account-link–logged-in span {
display: none;
}

Implementation Instructions:1. Go to your Shopify admin

  1. Navigate to Online Store > Themes

  2. Click “Customize” on your Tinker theme

  3. Go to Theme Settings > Custom CSS

  4. Paste one of the above code snippets

  5. Save your changes

If you get stuck at any point, feel free to message me. I’ll respond as soon as I’m available to help you out.

3

Hey! @tuckerkaide ,

The grey circle with the initial is Shopify’s default avatar for logged-in users, and unfortunately, the Tinker theme doesn’t offer built-in settings to change it. However, you can customize it with CSS. To keep the icon consistent with the logged-out version, you can either hide the avatar and show the same icon using a pseudo-element or replace it with a custom SVG. If you’d rather just style it, you can use CSS to reduce the size, remove the background, and show only the letter.

4

Hi CodingFifty,

Thanks so much for getting back to me. I know this will require custom CSS. Can you give me the steps in order to keep the icon consistent with the logged-out version? How do I hide the avatar while keeping the original account icon? That would be the choice I would like the most, thank you again!

5

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

6

I direct messaged you with that info. Thank you!