FROM CACHE - en_header

Missing Cart in header on my website

Solved
PandC
New Member
6 0 0

We have just recently added an online shop function to our shopify website and I can't find the cart button in the header. It comes up as a drawer on the right side when I add something to it, but there is no cart button at the top on any standard page to help you track your shopping. Please help!

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
12522 1933 2480

This is an accepted solution.

Hello ,

Add below code in

Online Store->Theme->Edit code->Sections>header.liquid file

 <div class="site-header__section site-header__section--button">
        <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
          {%- assign icon = 'icon-header-' | append: section.settings.icon %}
          {% include icon %}
          <span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
          <span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
        </a>
      </div>

See screenshots:

18.jpg

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 15 (15)
oscprofessional
Shopify Partner
12522 1933 2480

Hello @PandC,

Can you please share your site url

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
PandC
New Member
6 0 0
oscprofessional
Shopify Partner
12522 1933 2480

This is an accepted solution.

Hello ,

Add below code in

Online Store->Theme->Edit code->Sections>header.liquid file

 <div class="site-header__section site-header__section--button">
        <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
          {%- assign icon = 'icon-header-' | append: section.settings.icon %}
          {% include icon %}
          <span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
          <span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
        </a>
      </div>

See screenshots:

18.jpg

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
PandC
New Member
6 0 0

Thank you so much yes this worked!! Last question, it is showing up in the centre of the header, is there a way to make it to the right hand side of the page?

oscprofessional
Shopify Partner
12522 1933 2480

@PandC,

You add the code in this div 

<div class="site-header__section site-header__section--title"></div>

Please add this code after this div closed.

So it will be  in right side

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
PandC
New Member
6 0 0

Thank you again for your help, and very sorry to be a pain. That worked and the cart is now on the right hand side of the page, but we have the name of the website normally located in the centre header however this has now moved to the left hand side under our menu

 

Code as follows:

code.JPG

oscprofessional
Shopify Partner
12522 1933 2480

@PandC,

Please share your header.liquid file...

i will correct the code

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
PandC
New Member
6 0 0

sure thing. how do I share this with you?

oscprofessional
Shopify Partner
12522 1933 2480

@PandC,

Please PM me...

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
PandC
New Member
6 0 0

Hi 

it wont let me reply, says I have reached my limit of messages

oscprofessional
Shopify Partner
12522 1933 2480

@PandC,

Please mail me the code at pallavi@oscprofessionals.com

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
12522 1933 2480

@PandC,

I have checked you code.

Cart code is already presene in your code,

Actually because of  "/header" it will not show.

Please remove below code which is mention in red box in screenshot

2020-04-01_02-52_Code for Cafe Collective.jpg

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
vankampens
New Member
2 0 0

Hi there!

 

We are also missing our Cart from our header, and it doesn't even show up as a drawer (even though it's chosen as a drawer) when you add something to it. I have tried a few different codes throughout the shopify community but can't locate a solution 😞 

 

we are www.vankampens.ca 

 

Our header code is:

<li class="site-nav__item site-nav__item--compressed">
{% comment %} <a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
<span class="icon-fallback-text">
<span class="icon icon-cart" aria-hidden="true"></span>
<span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
</span>
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
</a> {% endcomment %}
</li>

 

But in the header snippet, there is nothing about cart..

 

HayDesign
New Member
1 0 0

We're having this same issue. Our Shopify website used to be 'shopable' but then we disabled that feature. We have now re-enabled the shop online feature but cannot get the shopping cart icon to show on the header when on a desktop computer, it only shows it on a mobile device. 

Here is our website - https://www.haydesignfurnishingsanddecor.ca/

 

I do not see the "header.liquid" file to edit as you've described here. Can you please advise if there is another way to fix this or find that section to edit?  

 

 

SAMJENKS
New Member
2 0 0

HI I have the same problem can you help?

 

 

https://icymelts.co.uk/