Move cart button to nav menu in Minimal

Highlighted
Shopify Partner
6 0 4

When searching the forum I saw that the question already has been asked several times but I haven't been able to find the right solution. Could anyone please help me figuring out how I can move the cart button to the navigation menu so I completely can get rid of the header menu. I also need to figure out how that will work on mobile then.

Hope someone can help me out with this!

1 Like
Shopify Partner
6 0 4

Add the below to the theme.liquid file was advised in a previous post but this solution doesn't seem to work.

<li class="fr"><a href="/cart" class="cart" title="{{ 'layout.cart.title' | t }}"><i class="fa fa-shopping-cart"></i>{{ 'layout.cart.title' | t }}: {{ 'layout.cart.items_with_count' | t: count: cart.item_count }} </a></li>

Anyone has an idea? You would really make my day!

1 Like
Highlighted

Try

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

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
Highlighted
Shopify Partner
6 0 4

Hi Lixon, thanks very much for your reply and the proposed solution. It seems that the code is right I'm just struggling where to exactly add it in the code so it's part of the nav-bar and it's the most right of the menu items (next to "about"). The site is https://cristina-sabaiduc.myshopify.com btw

Thanks again!

1 Like
Highlighted

It's in snippets/site-nav.liquid . Add this code in between  {% endif %}  {% endfor %}  ..code here... </ul>

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

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
1 Like
Highlighted
Shopify Partner
6 0 4

Thank you so much Lixon! This did the trick. Now I just have to figure out how I can make the site-nav active on mobile so that I completely can get rid of the site header.

1 Like
Highlighted

snippets/mobile-nav.liquid

Available for hiring. Inbox me lixonic[at]gmail[dot]com
1 Like
Highlighted
New Member
2 0 0

Hi Lixon, that did the trick, but I still have the header site bar on the top of my store. I wanted to remove it. you can see the green bar in my store: www.jockunder.com

0 Likes
Highlighted
New Member
3 0 0
Hello can you help move my cart , menu when search navigation on my mobile site down a little ? I have a reference picture as well thank you
0 Likes