Visão geral

Esta personalização usa HTML, CSS e JavaScript para bloquear o checkout quando o carrinho contém apenas itens de upsell. Ela ajuda a garantir que os upsells sejam tratados como ofertas secundárias, não como compras isoladas, apoiando uma estratégia de upsell mais controlada e intencional. Isso garante que os produtos de upsell funcionem dentro de limites específicos, enfatizando seu papel como itens complementares aos produtos principais. Quando implementado, o botão de checkout ficará desativado até que pelo menos um produto que não seja upsell seja adicionado ao carrinho.

Como funciona

Se o carrinho contém apenas itens de upsell, o botão de checkout fica acinzentado
Uma mensagem de aviso aparece abaixo do botão
Quando um produto regular é adicionado, o botão fica ativo e o aviso desaparece- Fornece validação clara para cenários que garantem que produtos de upsell sejam comprados apenas com os produtos acionadores associados, como exibir mensagens de aviso direcionadas.

Esta configuração é ideal para lojistas ou desenvolvedores com conhecimentos básicos de JavaScript e CSS.

Passo 1: Adicione HTML personalizado

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

Na seção Above announcements/rewards, cole:

<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</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.

Na seção Below checkout button, cole:

<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>

Fique à vontade para ajustar o texto da mensagem de aviso para se adequar ao tom da sua marca.

Passo 2: Adicione CSS personalizado

Vá para:
Upcart > Cart Editor > Settings > Custom CSS Cole o seguinte código:

.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}

Isso estiliza a mensagem de aviso e desativa o botão de checkout visual e funcionalmente.

Resultado final

Depois de configurado:

O checkout fica bloqueado a menos que haja pelo menos um produto que não seja upsell no carrinho
Uma mensagem informa aos clientes por que o checkout está desativado
A experiência é fluida e alinhada com a marca

Isso é especialmente útil para: combinar estratégias de upsell eficazes com essas técnicas também melhora a experiência geral de compra do cliente ao eliminar conflitos desnecessários no processo de compra.

Evitar compras acidentais de itens únicos de upsell
Manter os upsells como produtos exclusivamente complementares
Garantir melhor controle sobre o AOV e a montagem de kits de produtos

Ainda precisa de ajuda?

Se você precisar de ajuda com personalizações, recomendamos consultar um Shopify Expert sobre como adicionar HTML, CSS e até JavaScript ao seu cart drawer. Ver Shopify Experts

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

Impedir compras apenas de upsell no carrinho

Visão geral

Como funciona

Passo 1: Adicione HTML personalizado

Na seção Above announcements/rewards, cole:

Na seção Below checkout button, cole:

Passo 2: Adicione CSS personalizado

Resultado final

Ainda precisa de ajuda?

​Visão geral

​Como funciona

​Passo 1: Adicione HTML personalizado

​Na seção Above announcements/rewards, cole:

​Na seção Below checkout button, cole:

​Passo 2: Adicione CSS personalizado

​Resultado final

​Ainda precisa de ajuda?

Visão geral

Como funciona

Passo 1: Adicione HTML personalizado

Na seção Above announcements/rewards, cole:

Na seção Below checkout button, cole:

Passo 2: Adicione CSS personalizado

Resultado final

Ainda precisa de ajuda?