Visão geral

Esta personalização impede que vários upsells sejam adicionados de uma vez, ocultando a seção de upsell assim que um upsell é aceito. Quando o upsell é removido, o módulo reaparece. Isso é útil se você quer:

Simplificar a experiência do carrinho
Reduzir a fadiga de decisão
Manter a exclusividade em torno de certas ofertas

Como funciona

Quando um cliente aceita um upsell, a seção de upsell é ocultada
Se o item de upsell for removido, a seção de upsell volta a ficar visível
Funciona tanto com upsells recomendados por IA quanto com upsells manuais

Onde adicionar o código

Vá para Upcart > Cart Editor > Settings > Custom HTML

O seletor abaixo é apenas para a Versão 1. .upcart-upsells-module está no carrossel de upsells da V1. Se o seu módulo Upsells estiver na Versão 2, troque-o por .upcart-public-upsell nos três handlers — o restante do script não muda. Veja a biblioteca de seletores CSS da V2.

Cole o código a seguir no local Above announcements/rewards

Script HTML para copiar

<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>

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

Resultado

Depois que esta personalização é adicionada:

Os clientes só veem upsells se ainda não tiverem aceitado um
O módulo de upsell é ocultado assim que um upsell é adicionado
O módulo reaparece automaticamente se o item de upsell for removido
Não é necessário configurar IDs de produto ou tags

Isso mantém sua experiência de upsell focada, organizada e fácil de interagir para os clientes.

Ainda precisa de ajuda?

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

⌘I

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

Limitar o carrinho a um upsell por vez

Visão geral

Como funciona

Onde adicionar o código

Script HTML para copiar

Resultado

Ainda precisa de ajuda?

​Visão geral

​Como funciona

​Onde adicionar o código

​Script HTML para copiar

​Resultado

​Ainda precisa de ajuda?

Visão geral

Como funciona

Onde adicionar o código

Script HTML para copiar

Resultado

Ainda precisa de ajuda?