Change "Account" Icon to a menu link on Mobile

Highlighted
Tourist
13 0 0

Hi, On mobile I'd like to remove the Account Icon from the header and instead have it a link within the menu dropdown.

Is there a way I can create this?

 

I'm using the Debut theme.

0 Likes
Navigator
338 37 37

@Dunne08 wrote:

Hi, On mobile I'd like to remove the Account Icon from the header and instead have it a link within the menu dropdown.

Is there a way I can create this?

 

I'm using the Debut theme.


can be done, you need to link account page to menu item and then using css/ or code edit you can remove account icon

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Shopify Expert
2181 367 456

Hi @Dunne08 

Find bellow code in Section->header.liquid

{% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="/account" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
              </a>
            {% else %}
              <a href="/account/login" class="site-header__icon site-header__account mobile_hide">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
              </a>
            {% endif %}
          {% endif %}

Now add mobile_hide class in {% else %} part like above.

Add bellow css in Asset->theme.scss file at bottom;

 @media only screen and (max-width: 767px) {
   .mobile_hide{display:none;}
    }

For mobile link you have to make some custom code like add "Account" link in Online store->"Navigation" -> then hide it from desktop menu by custom condition in Section->header.liquid file.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
13 0 0
Hi @Jasoliya. Thank you for that code! I am going to try that. For that last part, having the Account link on the menu on mobile but not on desktop, do you have any direction on how to do that exactly ? I’m not sure how to hide a particular link depending on which viewing device.

Thanks
0 Likes
Tourist
13 0 0
Thanks for the reply. That would work but I’d like to have the link as a menu link on mobile but hidden on desktop
0 Likes
Shopify Expert
2181 367 456

Hi @Dunne08 

Yes but for that we need to make some custom code. add me as staff(jasoliyabrijesh123@gmail.com) i will check it and do

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Shopify Staff
Shopify Staff
108 23 9

Hello, @Dunne08.

 

Elias here with Shopify Support. Thank you for this inquiry.

 

This is something our Theme Support team will be able to assist with if your store is on a subscribed plan. We can remove the account icon from the header on the mobile side of Debut, then you can add the account login as part of your navigation menu. However, since you will be keeping the icon for desktop, you can create a separate menu to use for the mobile side so the account login does not appear in the menu of the desktop. 

 

I have already located your store and I can send you a support ticket for this request. Let me know your preference and I can proceed with the next steps.

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes