Visão geral

Alguns temas não atualizam o ícone automaticamente, e este guia vai mostrar como corrigir isso usando um pouco de código personalizado. Siga os passos abaixo para deixar tudo sincronizado corretamente. Aqui está um exemplo de como essa divergência se parece:

Passos importantes antes de começar!

Para corrigir o problema do ícone do carrinho, você precisa identificar o nome da classe do seu ícone do carrinho. Cada tema é diferente, e este passo garante que o código funcione especificamente para a sua loja.

1. Use o Chrome Developer Tools

Cada tema é diferente, então você vai precisar usar o Chrome Developer Tools (Inspecionar) para identificar o nome da classe do seu ícone do carrinho.

Clique com o botão direito no ícone do carrinho da sua vitrine e selecione Inspecionar no Google Chrome.
Encontre o elemento HTML do seu ícone do carrinho (por exemplo, <span class="cart-count-bubble">).
Precisa de ajuda para usar o Chrome Developer Tools? Confira este guia com instruções passo a passo.

2. Peça ajuda (opcional)

Se você não conseguir localizar a classe do seu ícone do carrinho ou se sentir travado, não se preocupe! Você tem opções:

Entre em contato com o desenvolvedor do seu tema: ele conhece seu tema melhor do que ninguém e pode ajudar você a encontrar a classe correta.
Contrate um Shopify Expert: se precisar de suporte adicional, a Shopify tem um diretório de especialistas confiáveis que podem ajudar. Encontre um Shopify Expert aqui.

🚧 Aviso sobre código personalizado

O código de exemplo fornecido abaixo é apenas um modelo — ele não vai funcionar se você copiá-lo e colá-lo diretamente. Você precisa substituir o nome de classe de exemplo (por exemplo, .cart-count-bubble > span) pelo nome de classe específico do seu ícone do carrinho.

Correção passo a passo

Dividimos este processo em três níveis de correção, começando pela solução mais simples (Nível 1). Cada nível se baseia no anterior — tente primeiro o Nível 1 e passe para o Nível 2 ou 3 apenas se necessário.

Passo 1: adicionar código personalizado no Upcart

Primeiro, como vamos precisar adicionar um código HTML personalizado no editor do Upcart, vamos preparar essa seção:

Vá em Upcart Editor > Settings e abra a aba Custom HTML (atrás de More settings se ela não couber na fileira de abas).
Defina a localização como Scripts (Before Load).
Cole seu código editado aqui (forneceremos exemplos para cada nível abaixo).

Veja como isso fica:

Configurações de Custom HTML do Upcart com a localização do HTML definida como Scripts Before Load

Passo 2: aplicar a correção por nível

Nível 1 (básico)

Quando o carrinho carrega, este script soma as quantidades dos itens de linha do carrinho e escreve o total no elemento de contagem dentro da bolha do carrinho do seu tema. Ele serve para temas em que a contagem fica em um elemento aninhado simples (por exemplo, .cart-count-bubble > span). Não esqueça

Substitua .cart-count-bubble > span pela classe do seu ícone do carrinho.
Teste na sua vitrine depois de adicionar o código.

Colando o script de contagem do Nível 1 no Custom HTML do Upcart usando o seletor cart-count-bubble

Código de exemplo para o Nível 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 versões antigas: os callbacks window.upcartOnCartLoaded ainda funcionam, mas estão obsoletos e registram avisos no console. Use upcartSubscribeCartLoaded para todos os scripts novos. Observe que event.cart não tem uma propriedade item_count — use event.cart.items.reduce((total, item) => total + item.quantity, 0) para calcular a contagem total de itens.

Nível 2 (moderado)

Se o Nível 1 não funcionou, seu tema pode substituir todo o HTML do ícone do carrinho quando a contagem muda. Esta versão reconstrói a marcação do ícone para os estados de carrinho vazio e não vazio, para que a contagem e o ícone permaneçam sincronizados. Não esqueça

Substitua #cart-icon-bubble-custom pelo seletor do wrapper do ícone do carrinho do seu tema.
Teste depois de salvar.

Código de exemplo para o Nível 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 versões antigas: os callbacks window.upcartOnCartLoaded ainda funcionam, mas estão obsoletos e registram avisos no console. Use upcartSubscribeCartLoaded para todos os scripts novos.Observe que event.cart não tem uma propriedade item_count — os scripts acima derivam o total com event.cart.items.reduce((total, item) => total + item.quantity, 0) e o passam como itemCount. Cópias antigas desses snippets que interpolam cart.item_count lançam um ReferenceError e silenciosamente nunca atualizam o ícone.

Nível 3 (avançado)

Se o seu tema usa marcações separadas do ícone do carrinho para desktop e mobile, execute a mesma lógica de atualização em dois seletores, para que cada viewport receba o HTML e a contagem corretos. Não esqueça

Substitua #cart-icon-bubble-custom-desktop e #cart-icon-bubble-custom-mobile pelas classes do seu tema.
Teste minuciosamente nas visualizações de desktop e mobile.

Colando o script do Nível 3 no Custom HTML do Upcart com seletores separados de ícone do carrinho para desktop e mobile

Código de exemplo para o Nível 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 versões antigas: os callbacks window.upcartOnCartLoaded ainda funcionam, mas estão obsoletos e registram avisos no console. Use upcartSubscribeCartLoaded para todos os scripts novos.Observe que event.cart não tem uma propriedade item_count — os scripts acima derivam o total com event.cart.items.reduce((total, item) => total + item.quantity, 0) e o passam como itemCount. Cópias antigas desses snippets que interpolam cart.item_count lançam um ReferenceError e silenciosamente nunca atualizam o ícone.

Ainda não funciona?

Se nenhum desses níveis resolver o problema, não se preocupe — você ainda tem opções! Isso provavelmente significa que seu tema requer uma personalização mais avançada. Veja o que você pode fazer a seguir:

Entre em contato com o desenvolvedor do seu tema para pedir ajuda.
Contrate um Shopify Expert que possa criar uma solução personalizada para a sua loja.

Primeiros passos

Módulos do carrinho

Configurações do carrinho

Botão de carrinho fixo

Multicart

Personalizações

Análises

Integrações e compatibilidade

Faturamento e conta

Solução de problemas

Quantidade/contador do ícone do carrinho não atualiza

Visão geral

Passos importantes antes de começar!

1. Use o Chrome Developer Tools

2. Peça ajuda (opcional)

🚧 Aviso sobre código personalizado

Correção passo a passo

Passo 1: adicionar código personalizado no Upcart

Passo 2: aplicar a correção por nível

Nível 1 (básico)

Código de exemplo para o Nível 1

Nível 2 (moderado)

Código de exemplo para o Nível 2

Nível 3 (avançado)

Código de exemplo para o Nível 3

Ainda não funciona?

​Visão geral

​Passos importantes antes de começar!

​1. Use o Chrome Developer Tools

​2. Peça ajuda (opcional)

​🚧 Aviso sobre código personalizado

​Correção passo a passo

​Passo 1: adicionar código personalizado no Upcart

​Passo 2: aplicar a correção por nível

​Nível 1 (básico)

​Código de exemplo para o Nível 1

​Nível 2 (moderado)

​Código de exemplo para o Nível 2

​Nível 3 (avançado)

​Código de exemplo para o Nível 3

​Ainda não funciona?

Visão geral

Passos importantes antes de começar!

1. Use o Chrome Developer Tools

2. Peça ajuda (opcional)

🚧 Aviso sobre código personalizado

Correção passo a passo

Passo 1: adicionar código personalizado no Upcart

Passo 2: aplicar a correção por nível

Nível 1 (básico)

Código de exemplo para o Nível 1

Nível 2 (moderado)

Código de exemplo para o Nível 2

Nível 3 (avançado)

Código de exemplo para o Nível 3

Ainda não funciona?