Resumen

Algunos temas no actualizan el icono automáticamente y esta guía te mostrará cómo corregirlo usando un poco de código personalizado. Sigue los pasos a continuación para que todo se sincronice correctamente. Aquí tienes un ejemplo de cómo se ve esta discrepancia:

¡Pasos importantes antes de comenzar!

Para corregir el problema del icono del carrito, necesitarás identificar el nombre de clase de tu icono de carrito. Cada tema es diferente, y este paso garantiza que el código funcione específicamente para tu tienda.

1. Usa las Chrome Developer Tools

Cada tema es diferente, así que necesitarás usar las Chrome Developer Tools (Inspect) para identificar el nombre de clase de tu icono de carrito.

Haz clic derecho en el icono de carrito en tu tienda y selecciona Inspect en Google Chrome.
Encuentra el elemento HTML de tu icono de carrito (por ejemplo, <span class="cart-count-bubble">).
¿Necesitas ayuda con las Chrome Developer Tools? Consulta esta guía para instrucciones paso a paso.

2. Pide ayuda (opcional)

Si no puedes localizar la clase de tu icono de carrito o te sientes atascado, ¡no te preocupes! Tienes opciones:

Contacta al desarrollador de tu tema: ellos conocen tu tema mejor que nadie y pueden ayudarte a encontrar la clase correcta.
Contrata a un Shopify Expert: si necesitas soporte adicional, Shopify tiene un directorio de expertos de confianza que pueden ayudarte. Encuentra un Shopify Expert aquí.

🚧 Aviso sobre código personalizado

El código de ejemplo que se proporciona a continuación es solo una plantilla, no funcionará si lo copias y pegas directamente. Debes reemplazar el nombre de clase de ejemplo (p. ej., .cart-count-bubble > span) con el nombre de clase específico de tu icono de carrito.

Corrección paso a paso

Hemos dividido este proceso en tres niveles de correcciones, comenzando por la solución más simple (Nivel 1). Cada nivel se basa en el anterior: prueba primero el Nivel 1 y pasa al Nivel 2 o 3 solo si es necesario.

Paso 1: Añade código personalizado en Upcart

Primero, como necesitaremos añadir algo de código HTML personalizado en el editor de Upcart, preparemos esa sección:

Ve a Upcart Editor > Settings y abre la pestaña Custom HTML (detrás de More settings si no cabe en la fila de pestañas).
Establece la ubicación como Scripts (Before Load).
Pega aquí tu código editado (a continuación te daremos ejemplos para cada nivel).

Así es como se ve:

Paso 2: Aplica la corrección según el nivel

Nivel 1 (Básico)

Cuando el carrito se carga, este script suma las cantidades de las líneas de artículos del carrito y las escribe en el elemento de conteo dentro de la burbuja del carrito de tu tema. Se ajusta a temas donde el conteo se encuentra en un elemento anidado simple (por ejemplo, .cart-count-bubble > span). No olvides

Reemplazar .cart-count-bubble > span con la clase de tu icono de carrito.
Probarlo en tu tienda después de añadir el código.

Código de ejemplo para el Nivel 1

<script>  
window.upcartSubscribeCartLoaded((event) => {  
    const countEl = document.querySelector('.cart-count-bubble > span');  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    countEl.innerText = itemCount;  
});  
</script>

Nota sobre versiones antiguas: los callbacks de window.upcartOnCartLoaded siguen funcionando pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartLoaded para todos los scripts nuevos. Ten en cuenta que event.cart no tiene una propiedad item_count; usa event.cart.items.reduce((total, item) => total + item.quantity, 0) para calcular el conteo total de artículos.

Nivel 2 (Intermedio)

Si el Nivel 1 no funcionó, es posible que tu tema reemplace todo el HTML del icono del carrito cuando cambia el conteo. Esta versión reconstruye el marcado del icono para los estados de carrito vacío y no vacío, de modo que el conteo y el icono se mantengan sincronizados. No olvides

Reemplazar #cart-icon-bubble-custom con el selector del contenedor del icono de carrito de tu tema.
Probarlo después de guardar.

Código de ejemplo para el Nivel 2

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    const iconWrapperEl = document.querySelector('#cart-icon-bubble-custom');  
    if (itemCount === 0) {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

Nota sobre versiones antiguas: los callbacks de window.upcartOnCartLoaded siguen funcionando pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartLoaded para todos los scripts nuevos.Ten en cuenta que event.cart no tiene una propiedad item_count: los scripts anteriores calculan el total con event.cart.items.reduce((total, item) => total + item.quantity, 0) y lo pasan como itemCount. Las copias antiguas de estos fragmentos que interpolan cart.item_count lanzan un ReferenceError y nunca actualizan el icono de forma silenciosa.

Nivel 3 (Avanzado)

Si tu tema usa un marcado de icono de carrito separado para escritorio y móvil, ejecuta la misma lógica de actualización con dos selectores para que cada viewport reciba el HTML y el conteo correctos. No olvides

Reemplazar #cart-icon-bubble-custom-desktop y #cart-icon-bubble-custom-mobile con las clases de tu tema.
Probar exhaustivamente en las vistas de escritorio y móvil.

Código de ejemplo para el Nivel 3

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    // Desktop  
    const desktopIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-desktop');  
    if (itemCount === 0) {  
        desktopIconWrapperEl.innerHTML = `<span>Cart</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span>`;  
    } else {  
        desktopIconWrapperEl.innerHTML = `<span>Cart (${itemCount})</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span>`;  
    }  
  
    // Mobile  
    const mobileIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-mobile');  
    if (itemCount === 0) {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

Nota sobre versiones antiguas: los callbacks de window.upcartOnCartLoaded siguen funcionando pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartLoaded para todos los scripts nuevos.Ten en cuenta que event.cart no tiene una propiedad item_count: los scripts anteriores calculan el total con event.cart.items.reduce((total, item) => total + item.quantity, 0) y lo pasan como itemCount. Las copias antiguas de estos fragmentos que interpolan cart.item_count lanzan un ReferenceError y nunca actualizan el icono de forma silenciosa.

¿Todavía no funciona?

Si ninguno de estos niveles resuelve el problema, no te preocupes, ¡todavía tienes opciones! Esto probablemente significa que tu tema requiere una personalización más avanzada. Esto es lo que puedes hacer a continuación:

Contacta al desarrollador de tu tema para pedir ayuda.
Contrata a un Shopify Expert que pueda crear una solución personalizada para tu tienda.

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

La cantidad/contador del icono del carrito no se actualiza

Resumen

¡Pasos importantes antes de comenzar!

1. Usa las Chrome Developer Tools

2. Pide ayuda (opcional)

🚧 Aviso sobre código personalizado

Corrección paso a paso

Paso 1: Añade código personalizado en Upcart

Paso 2: Aplica la corrección según el nivel

Nivel 1 (Básico)

Código de ejemplo para el Nivel 1

Nivel 2 (Intermedio)

Código de ejemplo para el Nivel 2

Nivel 3 (Avanzado)

Código de ejemplo para el Nivel 3

¿Todavía no funciona?

​Resumen

​¡Pasos importantes antes de comenzar!

​1. Usa las Chrome Developer Tools

​2. Pide ayuda (opcional)

​🚧 Aviso sobre código personalizado

​Corrección paso a paso

​Paso 1: Añade código personalizado en Upcart

​Paso 2: Aplica la corrección según el nivel

​Nivel 1 (Básico)

​Código de ejemplo para el Nivel 1

​Nivel 2 (Intermedio)

​Código de ejemplo para el Nivel 2

​Nivel 3 (Avanzado)

​Código de ejemplo para el Nivel 3

​¿Todavía no funciona?

Resumen

¡Pasos importantes antes de comenzar!

1. Usa las Chrome Developer Tools

2. Pide ayuda (opcional)

🚧 Aviso sobre código personalizado

Corrección paso a paso

Paso 1: Añade código personalizado en Upcart

Paso 2: Aplica la corrección según el nivel

Nivel 1 (Básico)

Código de ejemplo para el Nivel 1

Nivel 2 (Intermedio)

Código de ejemplo para el Nivel 2

Nivel 3 (Avanzado)

Código de ejemplo para el Nivel 3

¿Todavía no funciona?