User icon is not showing in the Impact Theme Mobile view

Shopify Discussion

Topic summary

Issue: The customer/account icon was missing on mobile for an Impact theme store, with no visible toggle in Theme settings.

Context: The store URL was provided (naraya.com) to verify the behavior.

Primary fix: Edit Sections > header.liquid and remove the class=“hidden” applied to the header elements controlling the account icon. This class was hiding the icon on mobile. Steps to access the Theme Code Editor and locate header.liquid were outlined.

Alternative workaround: Add CSS in theme.liquid (before ) scoped to @media (max-width: 767px) to hide the search-drawer link and force elements with .hidden in ul.header__icon-list to display: block, revealing the icon.

Additional note: Another reply suggested adding code before with screenshots of the working result, though the exact code snippet was not included in the post.

Outcome: The original poster confirmed the solution worked and expressed thanks multiple times. No further issues were raised; the thread is resolved.

Media: Screenshots were provided to show where to edit and the expected visual result.

Summarized with AI on December 18. AI used: gpt-5.
1

Hi. I need your help. I notice that the user icon in the mobile view is not showing and there is no option in the theme settings. please help me to solve this problem. thank you.

2

@Macoy102890 Can you share your store URL?

3

https://www.naraya.com/

1 Like
4

@Macoy102890

I have checked and you need to remove “hidden” class from the header.liquid file.
please follow below steps.

  • Go to the Theme Code Editor:

    • In your Shopify admin, navigate to Online Store > Themes.
    • Click Actions > Edit Code next to your active theme.

  • Find the header.liquid File:

    • In the code editor, locate the Sections folder.
    • Click on header.liquid to open the header file.

  • Locate the “hidden” Class:

    • Search for the class=“hidden” or similar code in the header.liquid file.
    • This class is likely applied to elements that are currently hidden from view.

  • Remove the “hidden” Class:

exertweb_1-1727319699882.png
exertweb_1-1727319699882.png800Ă—451 104 KB

exertweb_0-1727319521720.png
exertweb_0-1727319521720.png467Ă—317 110 KB

5

Hello @Macoy102890

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (max-width: 767px) { a.hidden.tap-area.sm\:block[aria-controls="search-drawer"] { display: none !important; } ul.header__icon-list a.hidden { display: block !important; } }

Tech_Coding_0-1727319850356.png
Tech_Coding_0-1727319850356.png316Ă—241 19.8 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

6

Hi @Macoy102890 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Add this code before tag:

BSSCommerceHDL_1-1727319921983.png
BSSCommerceHDL_1-1727319921983.png1916Ă—874 139 KB

Here is result:

BSSCommerceHDL_0-1727319883121.png
BSSCommerceHDL_0-1727319883121.png819Ă—876 197 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

7

Thank you.. It works

8

Thank you

1 Like
9

Thank you.. :folded_hands:

10

@Macoy102890 , No problem. Have a good day :heart_eyes: