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

Store Design
, ,

Topic summary

A user changed their cart icon SVG file directly in icon-cart.svg but the product count badge disappeared from the new icon on their Shopify Studio theme store.

Initial Solution Proposed:
A helper suggested adding a <span> element with cart count data and CSS styling to position the badge (red circle with white text) absolutely over the icon.

Current Issue:
The original code structure already includes cart count logic using {{ cart.item_count }} and conditional rendering for empty/full cart states via inline_asset_content. The existing implementation uses <span class="visually-hidden"> for accessibility and displays count when items are present.

Status: Unresolved - The user needs guidance on how to adapt the suggested CSS solution to work with their existing Liquid template structure, which differs from the helper’s assumed code format. The count logic exists but may need CSS adjustments to display properly with the new SVG icon.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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:

Capture d’écran 2025-01-03 à 18.37.36.png
Capture d’écran 2025-01-03 à 18.37.36.png2528×1310 446 KB

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

how can i fix this ?

theme: studio

website: utopia-paris.fr

thanks !!

1 Like
2

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:

The updated code might look like this:

{% render 'icon-cart' %}

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!

3

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


          {{ 'templates.cart.cart' | t }}
          {% if cart == empty %}
            {{'icon-cart-empty.svg' | inline_asset_content }}
          {% else %}
            {{'icon-cart.svg' | inline_asset_content }}
          {% endif %}
        {{ 'templates.cart.cart' | t }}
        {%- if cart != empty -%}
          

            {%- if cart.item_count < 100 -%}
              {{ cart.item_count }}
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}
          

          
        {%- endif -%}

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