icon cart don't show number of product after changing the icon

[UTOPIA-PARIS]

hey ! i have just changed the cart icon svg but after this the number of products added on the baskets didn't appear on the new cart icon: 

i have changed the svg directly on the icon-cart.svg file.

how can i fix this ?

theme: studio

website: utopia-paris.fr

thanks !!

[Mateen_Asghar]

Hi @UTOPIA-PARIS, Here's a simple way to fix the issue so your cart icon shows the product count again:

1. Find Where the Cart Icon is Used:

• Go to Online Store > Themes > Actions > Edit Code.
• In the search bar, type header.liquid and open the file.

2. Locate the Cart Code:

• Look for the part of the code that includes the cart icon. It might look like this:

{% render 'icon-cart' %}

3. Add a Placeholder for the Count:

• Right after the cart icon code, add this line:

<span class="cart-count" data-cart-count="{{ cart.item_count }}"></span>

The updated code might look like this:

<div class="cart-icon-wrapper">
{% render 'icon-cart' %}
<span class="cart-count" data-cart-count="{{ cart.item_count }}"></span>
</div>

4. Check the CSS:

• Go to the Assets folder and find the theme.css or theme.scss.liquid file.
• Add this code at the bottom to style the cart count:

.cart-count {
    background: red;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
    position: absolute;
    top: -5px;
    right: -5px;
}

5. Save and Test

• Save all the changes and go to your website, add a product to your cart, and refresh the page to see if the count appears.

This approach adds the missing product count placeholder and ensures it works even with your new cart icon. Let me know if you need further help!

[UTOPIA-PARIS]

hey ! it's not working because my code about the cart icon look like this : 

     <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
          <span class="small-hide">{{ 'templates.cart.cart' | t }}</span>
          {% if cart == empty %}
            <span class="svg-wrapper">{{'icon-cart-empty.svg' | inline_asset_content }}</span>
          {% else %}
            <span class="svg-wrapper">{{'icon-cart.svg' | inline_asset_content }}</span>
          {% endif %}
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
        {%- if cart != empty -%}
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
          
        {%- endif -%}
      </a>

so i how can i match this code with you're ?