[Support request] icon “my account” menu bar

Home Forums Support [Support request] icon “my account” menu bar

Home Forums Support icon “my account” menu bar

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1431094
    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.

    icono barmenu

    ICONO ON PHONE

    #1431715
    David
    Staff
    Customer Support

    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?

    #1435714
    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.

    #1436219
    David
    Staff
    Customer Support

    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

    #1437027
    José Ojeda

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

    #1437748
    David
    Staff
    Customer Support
    #1451115
    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 😉

    #1451191
    Leo
    Staff
    Customer Support

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

    Thanks 🙂

    #1611794
    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.