Code to have my cart icon like the one on this site

Store Design

Topic summary

Main goal: replicate a cart icon that displays the item count (like brokenplanet.com) on a Shopify store.

Key actions:

  • Helper requested theme code and advised editing header.liquid to show “Cart {{ cart.item_count }}” and also updating cart-icon-bubble.liquid (the badge template).
  • Initial changes didn’t appear; it only showed after a cart-add, navigate to cart, then remove item. Helper identified the correct place in header.liquid via screenshots; after editing there, the display worked.

Current issue:

  • The cart count does not update live when adding items; it only refreshes after clicking the cart.
  • Cause: the “add to cart” click event is managed by a third-party app, so the theme’s count isn’t being updated by the app’s JavaScript.

Outcome and next steps:

  • Cart label now displays with item count after correct edits in header.liquid and cart-icon-bubble.liquid.
  • For real-time updates, contact the app’s support or integrate the app’s add-to-cart events to trigger the badge update.

Notes:

  • Screenshots were central to pinpoint the exact code location.
  • Discussion partially resolved; live update behavior remains open pending app-side changes.
Summarized with AI on February 1. AI used: gpt-5.
1

Hello, can somone give me the code to have my cart icon like the one on this site → https://www.brokenplanet.com

any help is appreciated

my site is www.exoticsouls.world

password is ( esfam1 )

thanks

2

Hi @ExoticSouls ,

Please send me the code of header.liquid file, I will help you to edit it

3
{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} {%- endif -%} {%- if settings.cart_type == "drawer" -%} {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} {{ 'component-cart.css' | asset_url | stylesheet_tag }} {{ 'component-totals.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-discounts.css' | asset_url | stylesheet_tag }} {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} {%- endif -%}

{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-search.css’ | asset_url | stylesheet_tag }}
{{ ‘component-menu-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-notification.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-items.css’ | asset_url | stylesheet_tag }}

header-drawer { justify-self: start; margin-left: -1.2rem; } .header__heading-logo { max-width: {{ section.settings.logo_width }}px; } @media screen and (min-width: 990px) { header-drawer { display: none; } } .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

{%- style -%}
.header {
padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}

.section-header {
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}

@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if settings.cart_type == “drawer” -%}

{%- endif -%}

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> {%- if section.settings.menu != blank -%}
{% comment %} {% render 'icon-hamburger' %} {% endcomment %} MENU ＋ {% render 'icon-close' %}
    {%- for link in section.settings.menu.links -%}
  • {%- if link.links != blank -%}
    {{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}
    {% render 'icon-arrow' %} {{ link.title | escape }}
      {%- for childlink in link.links -%}
    • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
      {{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}
      {% render 'icon-arrow' %} {{ childlink.title | escape }}
      {%- endif -%}
      • {%- endfor -%}
    {%- else -%} {{ link.title | escape }} {%- endif -%}
    • {%- endfor -%}
{%- if shop.customer_accounts_enabled -%} {% render 'icon-account' %} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%}
{%- endif -%}

{%- if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}
{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}


{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}
{%- endif -%}

{%- if section.settings.logo_position != ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} {{ section.settings.logo | image_url: width: section.settings.width | image_tag: class: 'header__heading-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', height: logo_height, width: section.settings.logo_width, alt: logo_alt }} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%} {%- endif -%}

{%- if section.settings.menu != blank -%}
{%- if section.settings.menu_type_desktop == ‘dropdown’ -%}

    {%- for link in section.settings.menu.links -%}
  • {%- if link.links != blank -%}
    {{ link.title | escape }} {% render 'icon-caret' %}
    {%- else -%} {{ link.title | escape }} {%- endif -%}
    • {%- endfor -%}
{%- else -%} {%- endif -%} {%- endif -%}

{%- if section.settings.logo_position == ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} {{ section.settings.logo | image_url: width: section.settings.width | image_tag: class: 'header__heading-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', height: logo_height, width: section.settings.logo_width, alt: logo_alt }} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%} {%- endif -%}
{%- if settings.predictive_search_enabled -%} {%- endif -%}
{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}


{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- if shop.customer_accounts_enabled -%}

{% render ‘icon-account’ %}

{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}


{%- endif -%}

{%- liquid if cart == empty render 'icon-cart-empty' else render 'icon-cart' endif -%} {{ 'templates.cart.cart' | t }} ({{ cart.item_count }}) {%- if cart != empty -%}
{%- if cart.item_count < 100 -%} {{ cart.item_count }} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}
{%- endif -%}

{%- if settings.cart_type == “notification” -%}
{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}
{%- endif -%}

{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.header = document.getElementById(‘shopify-section-header’);
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector(‘predictive-search’);

this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;

this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);

this.createObserver();
}

disconnectedCallback() {
this.removeEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.removeEventListener(‘scroll’, this.onScrollHandler);
}

createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});

observer.observe(this.header);
}

onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);

this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);

requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}

this.currentScrollTop = scrollTop;
}

hide() {
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}

reveal() {
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}

reset() {
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}

closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘header-menu’);
this.disclosures.forEach(disclosure => disclosure.close());
}

closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector(‘details-modal’);
this.searchModal.close(false);
}
}

customElements.define(‘sticky-header’, StickyHeader);
{% endjavascript %}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.header.settings.logo_position.options__2.label”
},
{
“value”: “top-center”,
“label”: “t:sections.header.settings.logo_position.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.header.settings.logo_position.options__4.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “select”,
“id”: “menu_type_desktop”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.options__1.label”
},
{
“value”: “mega”,
“label”: “t:sections.header.settings.menu_type_desktop.options__2.label”
}
],
“default”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.label”,
“info”: “t:sections.header.settings.menu_type_desktop.info”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“default”: true,
“label”: “t:sections.header.settings.enable_sticky_header.label”,
“info”: “t:sections.header.settings.enable_sticky_header.info”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.mobile_layout.content”
},
{
“type”: “select”,
“id”: “mobile_logo_position”,
“options”: [
{
“value”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.options__1.label”
},
{
“value”: “left”,
“label”: “t:sections.header.settings.mobile_logo_position.options__2.label”
}
],
“default”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.label”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.header.settings.margin_bottom.label”,
“default”: 0
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 20
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 20
}
]
}

{% endschema %}

4

Hi @ExoticSouls ,

Please change code here:

Screenshot.png
Screenshot.png1314×704 52 KB

Code:

Cart {{cart.item_count}}

it will display like this

Screenshot.png
Screenshot.png510×205 5.14 KB

5

I did and it didnt work, any idea why?

6

Hi @ExoticSouls ,

You also need to change the code at cart-icon-bubble.liquid file.

7

for some reason it only works when i add something to cart, then go to cart, then remove the item. thats the only time it shows up

8

Hi @ExoticSouls ,

Have you changed both header.liquid file and cart-icon-bubble.liquid file.

I checked and it seems the header.liquid file has not been changed

9

I have… heres what i did

Screenshot 2023-02-01 at 4.52.08 AM.png
Screenshot 2023-02-01 at 4.52.08 AM.png3456×2234 713 KB

Screenshot 2023-02-01 at 4.54.07 AM.png
Screenshot 2023-02-01 at 4.54.07 AM.png3456×2234 404 KB

10

Hi @ExoticSouls ,

Please change code here:

Screenshot.png
Screenshot.png904×617 42.3 KB

11

okay great that worked! one more thing, do you know why it doesnt update the number of items in cart unless you click on the cart?

12

Hi @ExoticSouls ,

I have checked and the ‘add to cart’ click event is managed by the app, so if you want to edit it to update the quantity, please contact the app, they will help you check it.

Hope it is clear to you.