> ## 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.

# Limita el carrito a un upsell a la vez

> Usa HTML personalizado para ocultar el módulo de upsell después de que se agregue un solo upsell al carrito.

<div id="overview">
  # Descripción general
</div>

Esta personalización evita que se agreguen varios upsells a la vez al ocultar la sección de upsells tan pronto como se acepta uno. Una vez que se elimina el upsell, el módulo vuelve a aparecer.

Esto es útil si quieres:

* Simplificar la experiencia del carrito
* Reducir la fatiga de decisión
* Mantener la exclusividad de ciertas ofertas

***

<div id="how-it-works">
  ## Cómo funciona
</div>

* Cuando un cliente acepta un upsell, la sección de upsells se oculta
* Si se elimina el artículo del upsell, la sección de upsells vuelve a ser visible
* Funciona tanto con upsells recomendados por IA como con upsells manuales

***

<div id="where-to-add-the-code">
  ## Dónde agregar el código
</div>

1. Ve a **Upcart > Cart Editor > Settings > Custom HTML**

<Warning>
  **El selector de abajo es solo para la Versión 1.** `.upcart-upsells-module` está en el carrusel de upsells V1. Si tu módulo de Upsells está en la **Versión 2**, cámbialo por `.upcart-public-upsell` en los tres manejadores — el resto del script no cambia. Consulta la [biblioteca de selectores CSS V2](/es/upcart/upcart_css_selector_library_v2).
</Warning>

2. Pega el siguiente código en la ubicación **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 la API antigua:** Los callbacks `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` y `window.upcartOnCartLoaded` siguen funcionando, pero están obsoletos y registran advertencias en la consola. Usa `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` y `upcartSubscribeCartLoaded` para todos los scripts nuevos.
</Note>

***

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

Una vez agregada esta personalización:

* Los clientes solo ven upsells si aún no han aceptado uno
* El módulo de upsell se oculta tan pronto como se agrega un upsell
* El módulo vuelve a aparecer automáticamente si se elimina el artículo del upsell
* No es necesario configurar IDs de producto ni etiquetas

Esto mantiene tu experiencia de upsell enfocada, ordenada y fácil de usar para los clientes.

***

<div id="still-need-help">
  ## ¿Aún necesitas ayuda?
</div>

Para personalizaciones más avanzadas, te recomendamos trabajar con un **Shopify Expert**. Pueden ayudarte con HTML, CSS y JavaScript dentro de tu carrito deslizante.

[Ver Shopify Experts](https://www.shopify.com/partners/directory)