⚠️ Aviso importante Esta personalização funciona apenas com a Versão 1 dos módulos de carrinho do Upcart. Se você atualizou recentemente seu carrinho para a Versão 2, essas personalizações podem não funcionar. Você precisará usar os novos seletores fornecidos para a Versão 2 no guia de migração. Se suas personalizações não estiverem funcionando como esperado, você mesmo pode reverter o carrinho para a Versão 1: no Cart Editor, use o menu suspenso Cart version no topo do menu à esquerda e escolha V1.0 (Legacy). O menu suspenso aparece quando todos os módulos do carrinho estão na V2. No momento, estamos trabalhando em novos modelos de personalização para a Versão 2 dos módulos, e eles estarão disponíveis em breve.

Visão geral

Esta personalização permite ocultar partes específicas do carrinho, como a barra de recompensas, se determinados produtos estiverem presentes. É útil quando você quer simplificar a experiência do carrinho para certos SKUs ou impedir que promoções específicas apareçam junto de determinados itens. Essa configuração usa IDs de produto para detectar quais produtos estão no carrinho e oculta um elemento escolhido se houver uma correspondência. Você aplicará a lógica usando HTML e CSS personalizados no editor do Upcart.

Quando usar isto

Ocultar a barra de recompensas quando itens promocionais estiverem no carrinho
Ocultar blocos de conteúdo personalizado, selos de confiança ou seções de upsell com base no tipo de produto
Manter um fluxo de checkout mais limpo ou mais adaptado para itens específicos

Essa abordagem requer conhecimentos básicos de HTML e JavaScript.

Passo 1: Encontre os IDs de produto

Vá para Shopify Admin > Products
Clique no produto que você quer selecionar
Copie o ID numérico do produto na URL após /products/

Exemplo:

/products/1234567890 → 1234567890

Você usará esses IDs no array de JavaScript que controla a visibilidade.

Passo 2: Adicione HTML personalizado

Vá para Upcart > Cart Editor > Settings > Custom HTML
Cole o código a seguir em ambos os locais de HTML: Above announcements/rewards e On empty cart screen
Substitua os valores em productIDsToExclude pelos seus IDs de produto
Atualize .YOUR-CLASS-HERE para selecionar o elemento do carrinho que você quer ocultar (por exemplo: .upcart-rewards, .custom-message, .trust-badge)

<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>

Nota sobre legado: os callbacks window.upcartOnCartLoaded ainda funcionam, mas estão obsoletos e registram avisos no console. Use upcartSubscribeCartLoaded em todos os novos scripts.

Passo 3: CSS de fallback opcional

Se você quiser garantir que o elemento fique oculto antes de o carrinho carregar totalmente, adicione isto na seção Custom CSS:

.YOUR-CLASS-HERE {   display: none; }

Nota: isso pode ocultar temporariamente o elemento para todos os usuários até o JavaScript ser executado, o que pode causar um efeito de piscada. Na maioria dos casos, é melhor confiar no método de JavaScript.

Resultado final

Depois de configurado:

O elemento do carrinho selecionado (como a barra de recompensas) ficará oculto se o carrinho contiver um dos produtos especificados
Caso contrário, o elemento permanece visível
Você pode reutilizar essa lógica para ocultar ou mostrar diferentes elementos com base em regras específicas por produto

Ainda precisa de ajuda?

Para personalizações mais complexas, recomendamos trabalhar com um Shopify Expert. Ele pode ajudar com HTML, CSS e JavaScript dentro do seu cart drawer. Ver Shopify Experts

Referência de recursos do carrinho

Referência de CSS

Receitas de estilo

Receitas de funcionalidade

Modelos personalizados

API pública do Upcart

Ocultar elementos específicos do carrinho usando IDs de produto

Visão geral

Quando usar isto

Passo 1: Encontre os IDs de produto

Passo 2: Adicione HTML personalizado

Passo 3: CSS de fallback opcional

Resultado final

Ainda precisa de ajuda?

​Visão geral

​Quando usar isto

​Passo 1: Encontre os IDs de produto

​Passo 2: Adicione HTML personalizado

​Passo 3: CSS de fallback opcional

​Resultado final

​Ainda precisa de ajuda?

Visão geral

Quando usar isto

Passo 1: Encontre os IDs de produto

Passo 2: Adicione HTML personalizado

Passo 3: CSS de fallback opcional

Resultado final

Ainda precisa de ajuda?