Missing shoping cart icon in header.

Solved
Highlighted
New Member
3 0 0

I am trying to bring back the missing shopping cart icon in the header section. Can anyone please help.

Here is the site: https://www.atlanticbatteries.com/

 

Thanks

Ronnie

0 Likes
Highlighted
Shopify Expert
3463 543 816

Hi,

I think you have Supply theme?

follow this

1. Go to online store->theme->edit code

2. Section->header.liquid->find id "mobileNavBar".

3.  if you can't find bellow code then add it in this div

 <div class="display-table-cell">
    <a href="/cart" 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>
  </div>

Let me know if you can't 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
New Member
3 0 0

Great! now I can see the cart. One more thing can you please let me know how do I align it on the right side of the header.

0 Likes
Highlighted
New Member
3 0 0

If I put the code inside the id "mobileNavBar" then the shopping cart goes missing again. Thanks

0 Likes
Highlighted
Shopify Expert
3463 543 816

This is an accepted solution.

Hi,

Add this code in <header> after {% include 'search-bar' %}

<a href="/cart" class="header-cart-btn cart-toggle">
          <span class="icon icon-cart"></span>
          {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
        </a>

carticon.png

Let me know if need any help

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
1 0 0

Hi all,

I've got the same issue in my page soybilder.myshopify.com, can you guys please help me

Thanksss!


 

0 Likes
Highlighted
Shopify Expert
3463 543 816

Add this css in asset->theme.scss file at bottom:

.site-wrapper .top-bar .site-header__cart { display: block !important;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
7 0 0

I am having this issue as well. Another developer started this project and they used navbar to input the social icons in the header but seems they removed the shopping cart icon. I have the debut theme. Any help? 

This is my current header liquid:

<header data-section-id="{{ section.id }}" data-section-type="header-section">
    <div class="container">
      <div class="">
      <div class="logo">
        {% if section.settings.logo %}
          <a href="{{ routes.root_url }}">
            {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
             <img src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
          </a>
        {% else %}
          <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
        {% endif %}
      </div>
      <nav class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
          {% for link in linklists[section.settings.main_linklist].links %}
          {%- assign outerLoopIndex = forloop.index -%}

          <li class="{% unless forloop.last %} border-bottom{% endunless %}">
            {% if link.links != blank %}
              {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
              <button type="button" class="btn--link js-toggle-submenu {% if link.child_active %} --active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
                <span>{{ link.title | escape }}</span>
                <div>
                  {% include 'icon-chevron-right' %} 
                </div>
              </button>
              <ul  data-parent="{{ child_list_handle }}" data-level="2">
                <li class="visually-hidden" tabindex="-1" data-menu-title="2">
                  {{- link.title }} {{ 'layout.navigation.menu' | t -}}
                </li>
                <li class=" border-bottom">
                  <div>
                    <div class="-cell ">
                      <button class="btn--link js-toggle-submenu -btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
                        {% include 'icon-chevron-left' %}
                      </button>
                    </div>
                    <span class="-link -header -header--main-nav-parent">
                      <span>{{ link.title | escape }}</span>
                    </span>
                  </div>
                </li>

                {% for childlink in link.links %}
                  <li>
                    {% if childlink.links != blank %}
                      {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
                      <button type="button" class="btn--link js-toggle-submenu  -link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
                        <span>{{ childlink.title | escape }}</span>
                        <div>
                          {% include 'icon-chevron-right' %}
                        </div>
                      </button>
                      <ul  data-parent="{{ grandchild_list_handle }}" data-level="3">
                        <li class="visually-hidden" tabindex="-1" data-menu-title="3">
                          {{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
                        </li>
                        <li class=" border-bottom">
                          <div>
                            <div class="-cell ">
                              <button type="button" class="btn--link js-toggle-submenu -btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
                                {% include 'icon-chevron-left' %}
                              </button>
                            </div>
                            <a href="{{ childlink.url }}"
                              class="-link -header"
                              {% if childlink.current %} aria-current="page"{% endif %}
                           >
                              <span>{{ childlink.title | escape }}</span>
                            </a>
                          </div>
                        </li>
                        {% for grandchildlink in childlink.links %}
                          <li class="{% unless forloop.last %} border-bottom{% endunless %}">
                            <a href="{{ grandchildlink.url }}"
                              class="-link"
                              {% if grandchildlink.current %} aria-current="page"{% endif %}
                           >
                              <span>{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                        {% endfor %}
                      </ul>
                    {% else %}
                      <a href="{{ childlink.url }}"
                        class="-link"
                        {% if childlink.current %} aria-current="page"{% endif %}
                     >
                        <span>{{ childlink.title | escape }}</span>
                      </a>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <a href="{{ link.url }}"
                class="{% if link.active %} --active{% endif %}"
                {% if link.current %} aria-current="page"{% endif %}
             >
                <span>{{ link.title | escape }}</span>
              </a>
            {% endif %}
          </li>
        {% endfor %}
          </ul>
          <ul class="social-links">
          {%- if settings.social_facebook_link != blank -%}
            <li>
              <a href="{{ settings.social_facebook_link | escape }}" aria-describedby="a11y-external-message" target="_blank">
                 <img src="{{ 'facebook.png' | asset_url }}" alt="">
                <span class="icon__fallback-text">Facebook</span>
              </a>
            </li>
          {%- endif -%}
          {%- if settings.social_instagram_link != blank -%}
            <li>
              <a href="{{ settings.social_instagram_link | escape }}" aria-describedby="a11y-external-message" target="_blank">
                 <img src="{{ 'instragram.png' | asset_url }}" alt="">
                <span class="icon__fallback-text">Instagram</span>
              </a>
            </li>
          {%- endif -%}
        </ul>
        </div><!-- /.navbar-collapse -->
        <ul class="social-links">
          {%- if settings.social_facebook_link != blank -%}
            <li> 
              <a href="{{ settings.social_facebook_link | escape }}" aria-describedby="a11y-external-message" target="_blank">
                 <img src="{{ 'facebook.png' | asset_url }}" alt="">
                <span class="icon__fallback-text">Facebook</span>
              </a>
            </li>
          {%- endif -%}
          {%- if settings.social_instagram_link != blank -%}
            <li>
              <a href="{{ settings.social_instagram_link | escape }}" aria-describedby="a11y-external-message" target="_blank">
                 <img src="{{ 'instragram.png' | asset_url }}" alt="">
                <span class="icon__fallback-text">Instagram</span>
              </a>
            </li>
          {%- endif -%}
        </ul>
      </nav>
      </div>
    </div>
  </header>

  <script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": {{ shop.name | json }},
  {% if section.settings.logo %}
    {% assign image_size = section.settings.logo.width | append:'x' %}
    "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
  {% endif %}
  "sameAs": [
    {{ settings.social_facebook_link | json }},
    {{ settings.social_instagram_link | json }}
  ],
  "url": {{ shop.url | append: page.url | json }}
}
</script>

{% schema %}
  {
    "name": {
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "hi": "हैडर",
    "it": "Header",
    "ja": "ヘッダー",
    "ko": "머리글",
    "ms": "Pengepala",
    "nb": "Header",
    "nl": "Koptekst",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
    "settings": [
		{
          "type": "image_picker",
          "id": "logo",
          "label": {
            "da": "Logobillede",
            "de": "Logo-Foto",
            "en": "Logo image",
            "es": "Logotipo",
            "fi": "Logokuva",
            "fr": "Image du logo",
            "hi": "लोगो इमेज",
            "it": "Immagine del logo",
            "ja": "ロゴ画像",
            "ko": "로고 이미지",
            "ms": "Imej logo",
            "nb": "Logobilde",
            "nl": "Afbeelding van logo",
            "pt-BR": "Imagem do logotipo",
            "pt-PT": "Imagem do logótipo",
            "sv": "Logobild",
            "th": "รูปภาพโลโก้",
            "zh-CN": "logo 图片",
            "zh-TW": "標誌圖片"
          }
        },
        {
      "type": "link_list",
      "id": "main_linklist",
      "label": {
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "hi": "मेनू",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "ms": "Menu",
        "nb": "Meny",
        "nl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    }
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

0 Likes
Highlighted
Shopify Expert
3463 543 816

Send your store url 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted

Hi guys!

 

We are also missing our Cart from our header, and it doesn't even show 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, I can't find anything code relating to the cart..

0 Likes