Descripción general

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

Cómo funciona

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

Dónde agregar el código

Ve a Upcart > Cart Editor > Settings > Custom HTML

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.

Pega el siguiente código en la ubicación 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 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.

Resultado

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.

¿Aún necesitas ayuda?

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

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Limita el carrito a un upsell a la vez

Descripción general

Cómo funciona

Dónde agregar el código

Script HTML para copiar

Resultado

¿Aún necesitas ayuda?

​Descripción general

​Cómo funciona

​Dónde agregar el código

​Script HTML para copiar

​Resultado

​¿Aún necesitas ayuda?

Descripción general

Cómo funciona

Dónde agregar el código

Script HTML para copiar

Resultado

¿Aún necesitas ayuda?