My account icon doesn’t not appear on mobile

Store Design
, ,
1

Hello, the account icon does not appear in mobile form. It is there in desktop next to the search bar and cart icons, but when I switch to mobile it disappears. Any ideas on how to solve this?

2

Could you please share store url?

3

Hello, @Olcyovnoc
Your store is password-protected. If you share the store password. We can help you to solve the issues.

Thank you

4

Www.convoyclo.com

5

Password has been removed.

6

@Olcyovnoc Hope you are doing well.

Follow these Steps:

  • Go to Online Store
  • Edit Code
  • Find theme.liquid file
  • Add the following code in the bottom of the file above tag

Result:

webwondersco_0-1715512497770.png
webwondersco_0-1715512497770.png459×781 9.11 KB

7

Hello, @Olcyovnoc
Normally the account hide from bar and show in mobile manu bottom area. If you want to show the icon same like desktop in mobile also use this code.

Here are clearer steps:

Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

a.header__icon.header__icon--account.link.focus-inset {
    display: flex !important;
}

If you want to show in mobile side menu. you can follow the other solution which given bellow.
Thank you

8

Hello @Olcyovnoc

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store → Themes → Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

9

Hi,
If you want to show the icon same like desktop use this CSS code

Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

a.header__icon.header__icon--account.link.focus-inset {
    display: flex !important;
}

Normally the account icon show in mobile drawer. If you want to show that you can follow any one of the solution provided by other community member in this post.

Thank you

10

If you want to show the icon same like desktop use this css.

a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: flex !important;
}
11

If you want to show the icon same like desktop use this css.

a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: flex !important;
}

Hope this will solve your issues.
Insert this CSS in base.css in your theme file.

12

Hi, you want the top account to show like desktop or in mobile drawer area.

Because in mobile view icon show in mobile card drawer.

Thank you

13

It is available in desktop but disappears in mobile. I want it to appear in mobile

thank you

14

Hello it didn’t work, any ideas why?

15

Use this code in base.css

a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: flex !important;
}

The icon will show in mobile like this image

mobile-account-icon.png
mobile-account-icon.png770×202 1.66 KB

Hope it solve your issues.

Thank you

Regards
ShopiDevs

16

Hello @Olcyovnoc ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

@media screen and (max-width: 749px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide{
    display: block !important;
    padding: 9px !important;
}
}

thirtycoders_0-1715537008948.png
thirtycoders_0-1715537008948.png513×624 8.7 KB

Thanks!

17

Use this code

a.header__icon.header__icon--account.link.focus-inset {
    display: flex !important;
}

It will show in mobile also.
thank you

18

Use this code

a.header__icon.header__icon--account.link.focus-inset {
    display: flex !important;
}
19

Hi use this code.
a.header__icon.header__icon–account.link.focus-inset {
display: flex !important;
}