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
Solved! Go to the solution
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
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>
Let me know if need any help
Add this css in asset->theme.scss file at bottom:
.site-wrapper .top-bar .site-header__cart { display: block !important;}
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 %}
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..
User | Count |
---|---|
736 | |
142 | |
104 | |
64 | |
37 |