Move account icon to header on mobile

Store Design
, , ,
1

Hi, I have my account icon in the header for desktop, but for mobile it is in the drawer menu. Can anyone help leave it next to the cart for mobile like it is for desktop ?

https://www.elegancebyselin.com

Password: daumas

2

Hi @Daniel19901

It can easily be done by doing minor modification in header,liquid file

I can do that for you if you can share your collaboration code and grant me Collaboration access

3

In the Shopify admin panel, go to Online Store > Themes > Customize.

Open the Header section and check if there are settings for mobile-specific icon placement (some themes have this option). If available, move the account icon from the drawer menu to the header, placing it next to the cart. If the theme editor doesn’t have this option, you’ll need to tweak the Liquid and CSS code:

Go to Online Store > Themes > Actions > Edit Code.

Open the header.liquid or header-main.liquid file.

Look for the if condition that controls the drawer menu icons for mobile.

Move the account icon code ({{ ‘account’ | link_to }}) next to the cart icon. Example:

<div class="header-icons">
  {{ 'cart' | link_to }}
  {{ 'account' | link_to }}
</div>

Open the theme.css or styles.css file in the Assets folder.

Add CSS rules to position the account icon correctly for mobile:

@media (max-width: 768px) {
  .header-icons {
    display: flex;
    justify-content: space-between; /* Adjust alignment */
  }
  .header-icons .account-icon {
    order: 2; /* Ensure it appears next to the cart */
  }
}

Thanks!

1 Like
4

Hi @Daniel19901 ,

Thank you for your question. After taking a look at your store, you can try to follow the following steps to show the Account icon next to the cart on mobile and hide it in the drawer (if you would like to):

  • Locate to the Custom CSS of your live theme inside the Theme Editor, it will look like this:

LizHoang_0-1732547753487.png
LizHoang_0-1732547753487.png1795×809 252 KB

  • The account icon is already there but it is actually hidden by the z-index logo so when you click on it, it redirects you to the homepage. You should add this code to the CSS to make the z-index higher:
    .header__mobile__right {
    z-index: 99;
    }

LizHoang_1-1732548392337.png
LizHoang_1-1732548392337.png388×192 87.9 KB

  • After that, if you want to hide the account icon in the drawer, please add the following code:
    .drawer__top__left .drawer__account {
    display: none;
    }
    .drawer__top__left .drawer__account {
    display: none !important;
    }

I hope my answer is helpful!

Best,
Liz.

1 Like