Adding cart item qty next to the cart icon

Store Design
1

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/

1 Like
2

@UnipAck

Please share your Sections/header.liquid file code .

Thanks!

3

** @UnipAck **

please find code Sections/header.liquid

Replace this new code

{{ cart.item_count }}

I hope this will work for you.

Thanks!

4

@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’ -%}

.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 -%}
{%- 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 -%}

{%- 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 -%}

{%- if logo_alignment == ‘left’ -%}

{%- render 'header-logo-block', section: section -%}
{%- endif -%}

{%- if logo_alignment == ‘left’ and section.settings.main_menu_alignment != ‘left-drawer’ -%}

{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
{%- endif -%}

{%- if logo_alignment == ‘center’ -%}

{%- if section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-split' -%} {%- if settings.search_enable -%} {%- endif -%} {%- endif -%}

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

{{ 'general.drawers.navigation' | t }}

{%- 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’ -%}

{%- render 'header-logo-block', section: section -%}
{%- endif -%} {%- endif -%}
{%- render 'header-icons', section: section -%}

{%- if section.settings.main_menu_alignment == ‘center’ -%}

{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
{%- endif -%}
{{ 'general.search.submit' | t }} {{ 'general.accessibility.close_modal' | t | json }}
{%- if settings.predictive_search_enabled -%}
{{ 'general.search.view_more' | t }}
{%- endif -%}

{%- unless overlay_header or section.settings.announcement_above_header -%}
{%- render ‘announcement-bar’, section: section -%}
{%- endunless -%}

{% 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”
},
{
“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.”
},
{
“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.”
},
{
“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 %}

5

@UnipAck

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

Thanks!

6

@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?

1 Like
7

@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;
}
8

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

9

@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?