> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Limitar o carrinho a um upsell por vez

> Use HTML personalizado para ocultar o módulo de upsell depois que um único upsell é adicionado ao carrinho.

<div id="overview">
  # Visão geral
</div>

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

***

<div id="how-it-works">
  ## Como funciona
</div>

* 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

***

<div id="where-to-add-the-code">
  ## Onde adicionar o código
</div>

1. Vá para **Upcart > Cart Editor > Settings > Custom HTML**

<Warning>
  **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](/pt/upcart/upcart_css_selector_library_v2).
</Warning>

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

***

<div id="html-script-to-copy">
  ## Script HTML para copiar
</div>

```
<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>
```

<Note>
  **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.
</Note>

***

<div id="result">
  ## Resultado
</div>

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.

***

<div id="still-need-help">
  ## Ainda precisa de ajuda?
</div>

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](https://www.shopify.com/partners/directory)