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!

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

Highlighted
Shopify Partner
1172 34 220

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. Reach me at lixon@ecommercestudio.in
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!

Highlighted
Shopify Partner
1172 34 220

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. Reach me at lixon@ecommercestudio.in
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.

Highlighted
Shopify Partner
1172 34 220

snippets/mobile-nav.liquid

Available for hiring. Reach me at lixon@ecommercestudio.in
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
Highlighted
New Member
3 0 0

Hey, Lixon! I did this & it is working, but not correctly! Working in Supply Theme, if that changes things! Please help! I can't figure out why it is repeating & I would love for it to be placed on the right side of this menu bar. Thank you for anyone reaching out in advanced! 

Shopify Header Supply Theme.2.png

0 Likes