Remove 'cart' from header in mobile version

Jessica_Becker
New Member
3 0 0

Hello!

I am using the minimal theme, and have found the instructions for removing the cart from my store, and have done so with no problems. However, the cart button is still visible on my header when you are viewing from a mobile device. I have tried to comment out the cart via the snippet-header bar on the themes HTML but it did not work. Can anyone assist with this? Thank you! 

0 Likes

Hi Jessica 

Just try to remove or comment below code from header-bar.liquid 

    <a href="/cart" class="cart-page-link mobile-cart-page-link">
      <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
      {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
    </a>

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: ecommercewebguru@gmail.com
Skype: ecommercewebguru
0 Likes

Hi Jessica

You just need to remove the below code from your header-bar.liquid 

 

    <a href="/cart" class="cart-page-link mobile-cart-page-link">
      <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
      {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
    </a>

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: ecommercewebguru@gmail.com
Skype: ecommercewebguru
0 Likes
Jordan_H_
Shopify Partner
41 0 7

Hi Jessica!

If you're using the Minimal theme, you should be able to remove the cart icon.  The header-bar.liquid snippet is the right place to go.  You would be looking for the following lines:

<!--<a href="/cart" class="cart-page-link mobile-cart-page-link">
      <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
      {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
    </a>-->

It should be around line 84-87.  You should see "mobile-cart" somewhere within the text to know that you're in the right spot.

If you comment out these lines, the cart icon should disappear, leaving you with something like this:

with the cart disappearing from the right side of the mobile nav menu.

I hope that helps!

-Jordan

0 Likes
thePaifercom
Tourist
3 0 0

Hello Team!

Have the same problem on Brooklyn theme

I've removed succesfully the desktop's cart icon but still have it visible on mobile version. 

Tried to follow the pattern for Minimal theme, but didn't find the header-bar.liquid or anything similar. Could you suggest me, please, how I can do it on Brooklyn theme?

 

Thx 

Alina Paifer

0 Likes
Yossarian1971
New Member
2 0 0

These suggestions only work if you have header-bar.liquid and it looks like not all themes have this section. For those without this section. 

If you don't. then under header.liquid look for the following (and remove)

 

<a href="{{ routes.cart_url }}" class="cart-toggle mobileNavBar-link">
<span class="icon icon-cart"></span>
{{ 'layout.cart.cart' | t }} <span class="cart-count {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>

 

This takes both the Cart Icon and Cart count off the mobile header. 

0 Likes