Remove 'cart' from header in mobile version

Highlighted
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
Highlighted

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
Highlighted

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
Highlighted
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
Highlighted
New Member
2 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