Solved

adding cart item qty next to the cart icon

UnipAck
Tourist
11 0 2

Is it possible to add a number beside or on the cart icon ?

Current the has a dot displayed next the the cart icon, we would like to have it changed to the item qty instead of the dot.

 

Theme is impluse.

 

Shop URL as follows:https://unipack-pte-ltd.myshopify.com/

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@UnipAck 

please find code Sections/header.liquid

<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>

Replace this new code 

<span class="cart-link__bubble{% if cart.item_count > -1 %} cart-link__bubble--visible{% endif %}">{{ cart.item_count }}</span>

I hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 8 (8)

dmwwebartisan
Shopify Partner
12280 2546 3694

@UnipAck 

Please share your Sections/header.liquid file code . 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@UnipAck 

please find code Sections/header.liquid

<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>

Replace this new code 

<span class="cart-link__bubble{% if cart.item_count > -1 %} cart-link__bubble--visible{% endif %}">{{ cart.item_count }}</span>

I hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
UnipAck
Tourist
11 0 2

@dmwwebartisan  no such code available in the header

 

The code in our header

 

{%- liquid
assign main_menu = linklists[section.settings.main_menu_link_list]
assign toolbar_menu = linklists[section.settings.toolbar_menu]

assign logo_alignment = 'left'
if section.settings.main_menu_alignment == 'center-left' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-drawer'
assign logo_alignment = 'center'
endif

assign dropdown_alignment = 'left'
if section.settings.main_menu_alignment == 'left-center' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center'
assign dropdown_alignment = 'center'
endif

assign main_menu_alignment = 'left'
if section.settings.main_menu_alignment == 'left-drawer'
assign main_menu_alignment = 'left'
endif

assign template_name = template | replace: '.', ' ' | truncatewords: 2, '' | handle

assign sticky_header = false
if section.settings.header_style == 'sticky'
assign sticky_header = true
endif
assign overlay_header = false
assign has_logo = false
if template_name == 'index' and section.settings.sticky_index
assign overlay_header = true
endif
if template_name == 'collection' and collection.image and section.settings.sticky_collection
assign overlay_header = true
endif
-%}

{%- render 'drawer-menu',
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
-%}
{%- render 'cart-drawer' -%}

<style>
.site-nav__link,
.site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
font-size: {{ settings.type_navigation_size }}px;
}
{% if settings.type_navigation_capitalize %}
.site-nav__link, .mobile-nav__link--top-level {
text-transform: uppercase;
letter-spacing: 0.2em;
}
.mobile-nav__link--top-level {
font-size: 1.1em;
}
{% endif %}

{% if mainmenu.length > 6 %}
.site-nav__link {
padding-left: 10px;
padding-right: 10px;
}
{% endif %}

{% unless section.settings.mega_menu_images %}
.megamenu__colection-image {
display: none;
}
{% endunless %}

{%- if settings.color_header == settings.color_body_bg or settings.color_body_bg contains settings.color_header -%}
.site-header {
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.toolbar + .header-sticky-wrapper .site-header {
border-top: 0;
}
{%- endif -%}

{%- if settings.color_announcement == settings.color_body_bg -%}
.announcement-bar {
border-bottom: 1px solid;
}
{%- endif -%}
</style>

<div data-section-id="{{ section.id }}" data-section-type="header-section">
{%- if overlay_header or section.settings.announcement_above_header -%}
{%- render 'announcement-bar', section: section -%}
{%- endif -%}

{%- unless overlay_header -%}
{%- if section.settings.show_locale_selector or section.settings.show_currency_selector or section.settings.toolbar_social or section.settings.toolbar_menu != blank -%}
{%- render 'toolbar',
section: section,
toolbar_menu: toolbar_menu,
overlay_header: overlay_header
-%}
{%- endif -%}
{%- endunless -%}

<div class="header-sticky-wrapper">
<div class="header-wrapper{% if overlay_header %} header-wrapper--sticky is-light{% endif %}">

{%- if overlay_header -%}
{%- if section.settings.show_locale_selector or section.settings.show_currency_selector or section.settings.toolbar_social or section.settings.toolbar_menu != blank -%}
{%- render 'toolbar',
section: section,
toolbar_menu: toolbar_menu,
overlay_header: overlay_header
-%}
{%- endif -%}
{%- endif -%}
<header
class="site-header{% if settings.type_navigation_style == 'heading' %} site-header--heading-style{% endif %}"
data-sticky="{{ sticky_header }}">
<div class="page-width">
<div
class="header-layout header-layout--{{ section.settings.main_menu_alignment }}"
data-logo-align="{{ logo_alignment }}">

{%- if logo_alignment == 'left' -%}
<div class="header-item header-item--logo">
{%- render 'header-logo-block', section: section -%}
</div>
{%- endif -%}

{%- if logo_alignment == 'left' and section.settings.main_menu_alignment != 'left-drawer' -%}
<div class="header-item header-item--navigation{% if section.settings.main_menu_alignment == 'left-center' %} text-center{% endif %}">
{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
</div>
{%- endif -%}

{%- if logo_alignment == 'center' -%}
<div class="header-item header-item--left header-item--navigation">
{%- if section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-split' -%}
{%- if settings.search_enable -%}
<div class="site-nav small--hide">
<a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-search-header">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.title' | t }}</span>
</a>
</div>
{%- endif -%}
{%- endif -%}

{%- if section.settings.main_menu_alignment == 'center-left' -%}
{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
{%- endif -%}

<div class="site-nav{% unless section.settings.main_menu_alignment == 'center-drawer' %} medium-up--hide{% endunless %}">
<button
type="button"
class="site-nav__link site-nav__link--icon js-drawer-open-nav"
aria-controls="NavDrawer">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64"><path d="M7 15h51M7 32h43M7 49h51"/></svg>
<span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
</button>
</div>
</div>

{%- if section.settings.main_menu_alignment == 'center-split' -%}
{%- render 'header-split-nav', main_menu: main_menu, section: section, dropdown_alignment: dropdown_alignment -%}
{%- endif -%}

{%- if section.settings.main_menu_alignment != 'center-split' -%}
<div class="header-item header-item--logo">
{%- render 'header-logo-block', section: section -%}
</div>
{%- endif -%}
{%- endif -%}

<div class="header-item header-item--icons">
{%- render 'header-icons', section: section -%}
</div>
</div>

{%- if section.settings.main_menu_alignment == 'center' -%}
<div class="text-center">
{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
</div>
{%- endif -%}
</div>
<div class="site-header__search-container">
<div class="site-header__search">
<div class="page-width">
<form action="{{ routes.search_url }}" method="get" role="search"
id="HeaderSearchForm"
class="site-header__search-form">
<input type="hidden" name="type" value="{{ settings.search_type }}">
<button type="submit" class="text-link site-header__search-btn site-header__search-btn--submit">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
<input type="search" name="q" value="{{ search.terms | escape | replace: '*', '' }}" placeholder="{{ 'general.search.placeholder' | t }}" class="site-header__search-input" aria-label="{{ 'general.search.placeholder' | t }}">
</form>
<button type="button" class="js-search-header-close text-link site-header__search-btn">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t | json }}</span>
</button>
</div>
</div>
{%- if settings.predictive_search_enabled -%}
<div class="predictive-results hide">
<div class="page-width">
<div id="PredictiveResults"></div>
<div class="text-center predictive-results__footer">
<button type="button" class="btn btn--small" data-predictive-search-button>
<small>
{{ 'general.search.view_more' | t }}
</small>
</button>
</div>
</div>
</div>
{%- endif -%}
</div>
</header>
</div>
</div>

{%- unless overlay_header or section.settings.announcement_above_header -%}
{%- render 'announcement-bar', section: section -%}
{%- endunless -%}
</div>

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "link_list",
"id": "main_menu_link_list",
"label": "Navigation",
"default": "main-menu"
},
{
"type": "checkbox",
"id": "mega_menu_images",
"label": "Show mega menu images",
"default": true,
"info": "[How to create a mega menu](https://archetypethemes.co/blogs/impulse/how-do-i-create-a-mega-menu)"
},
{
"type": "select",
"id": "main_menu_alignment",
"label": "Header layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Logo left, menu left"
},
{
"value": "left-center",
"label": "Logo left, menu center"
},
{
"value": "left-drawer",
"label": "Logo left, menu drawer"
},
{
"value": "center-left",
"label": "Logo center, menu left"
},
{
"value": "center-split",
"label": "Logo center, menu split"
},
{
"value": "center",
"label": "Logo center, menu below"
},
{
"value": "center-drawer",
"label": "Logo center, menu drawer"
}
]
},
{
"type": "select",
"id": "header_style",
"label": "Header style",
"default": "normal",
"options": [
{
"value": "normal",
"label": "Normal"
},
{
"value": "sticky",
"label": "Sticky"
}
]
},
{
"type": "checkbox",
"id": "sticky_index",
"label": "Overlay header over home page",
"default": false
},
{
"type": "checkbox",
"id": "sticky_collection",
"label": "Overlay header over collection",
"info": "(if collection image is enabled)",
"default": false
},
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "checkbox",
"id": "announcement_compact",
"label": "Use compact style"
},
{
"type": "checkbox",
"id": "announcement_above_header",
"label": "Always show above header"
},
{
"type": "header",
"content": "Toolbar"
},
{
"type": "link_list",
"id": "toolbar_menu",
"label": "Navigation",
"info": "This menu won't show dropdown items"
},
{
"type": "checkbox",
"id": "toolbar_social",
"label": "Show social icons"
},
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "checkbox",
"id": "show_currency_flags",
"label": "Show currency flags",
"default": true
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo-inverted",
"label": "White logo",
"info": "Used when on top of an image"
},
{
"type": "range",
"id": "desktop_logo_width",
"label": "Desktop logo width",
"default": 200,
"min": 100,
"max": 400,
"step": 10,
"unit": "px"
},
{
"type": "range",
"id": "mobile_logo_width",
"label": "Mobile logo width",
"default": 140,
"min": 60,
"max": 200,
"step": 10,
"unit": "px",
"info": "Set as a max-width, may appear smaller"
}
]
},
{
"type": "announcement",
"name": "Announcement",
"limit": 3,
"settings": [
{
"type": "text",
"id": "text",
"label": "Heading",
"default": "Hassle-free returns"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "30-day postage paid returns"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
],
"default": {
"settings": {}
}
}
{% endschema %}

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@UnipAck 

Please share snippets/header-icons.liquid file code .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
UnipAck
Tourist
11 0 2

@dmwwebartisan  Found the line of code to replace and have replaced it, but the displayed no. is outside of the circle.

 

Is there any way to align it within the circle?

dmwwebartisan
Shopify Partner
12280 2546 3694

@UnipAck 

Please add the following code at the bottom of your assets/theme.css file.

 

.cart-link__bubble--visible {
    text-align: center;
    font-size: 12px;
    width: 20px !important;
    height: 20px !important;
    top: -10px !important;
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
UnipAck
Tourist
11 0 2

@dmwwebartisan Yup it's working. Thanks so much for the assistance.

UnipAck
Tourist
11 0 2

@dmwwebartisan would you be able advice under which line of code in ajax file to i need to write my own code to update the number after adding an item to the cart while staying on the same page?