[Support request] icon “my account” menu bar

[José Ojeda]

Hi, is there a way to create a “my account” icon on the main menu bar. that is the same as the shopping cart icon? thank you.

[David]

Hi there,

you can do this by creating 2 x Hook Elements:

1. For desktop
Add the following code:

<a class="account-link" href="add_url_to_your_account_page">
	<svg aria-hidden="true" class="svg-accont-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
		<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
	</svg>
</a>

Make sure you update this part of the code with your account page URL:
href="add_url_to_your_account_page"

The select the Hook: inside_navigation_hook

Set the Display Rules to Entire Site.

2. Now create a new hook exactly the same as above. But use the Hook: inside_mobile_menu_bar

Once that is done we will need to add some CSS.
Can you provide access to the site so i can provide that CSS?

[José Ojeda]

Thank you very much for your quick response. I have the site open so you can help me with the CSS. If you could use the Google Chrome browser console to generate the CSS code it would be great. I thank you again.

[David]

This CSS for desktop:

.inside-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-link {
    padding: 0 10px;
    order: 20;
}
.account-link svg {
    width: 15px;
}

Can you enable the Mobile Header in Customizer > Layout > Header then i can look at that CSS

[José Ojeda]

Thanks David for your great help. Have a great day. Everything turned out very well.

[David]

Glad to hear that !

[Adrien]

Hello Team,

I have followed the exact guide to replace my account with an icon. I did this using the niche store demo side.

However, I face two little issues and would need your help if possible:

1/ It does not show on mobile.
2/ I’d like if its not too complicated to have my account in between the search icon and the cart.
3/ If you see my icon, it not really aligned with the other.

Thanks a lot for your help.

I have disabled my cache this time 😉

[Leo]

Any chance you can open a new topic and link us to the page in question?

Thanks 🙂

[Georgios]

Hello adriendemonta,

Have you opened a new topic about your question?

Maybe I have a solution for your No.1 and No.3 points of your question and as Leo said, if there is a new topic I will submit my proposal there.

Best regards,

georgios

[Author]

Posts