Skip to main content

Descripción general

Esta personalización usa HTML, CSS y JavaScript para bloquear el pago cuando el carrito solo contiene artículos de upsell. Ayuda a garantizar que los upsells se traten como ofertas secundarias, no como compras independientes, lo que respalda una estrategia de upsell más controlada e intencional. Esto asegura que los productos de upsell funcionen dentro de límites específicos, enfatizando su papel como artículos complementarios de los productos principales. Cuando se implementa, el botón de pago quedará deshabilitado hasta que se agregue al carrito al menos un producto que no sea upsell.

Cómo funciona

  • Si el carrito contiene solo artículos de upsell, el botón de pago se muestra atenuado
  • Aparece un mensaje de advertencia debajo del botón
  • Una vez que se agrega un producto regular, el botón se activa y la advertencia desaparece. Proporciona una validación clara para escenarios que garantizan que los productos de upsell solo se compren con sus productos activadores asociados, como mostrar mensajes de advertencia específicos.
Esta configuración es ideal para dueños de tiendas o desarrolladores con conocimientos básicos de JavaScript y CSS.

Paso 1: Agrega HTML personalizado

Ve a:
Upcart > Cart Editor > Settings > Custom HTML

En la sección Above announcements/rewards, pega:

Nota sobre la API antigua: Los callbacks window.upcartOnCartLoaded siguen funcionando, pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartLoaded para todos los scripts nuevos.

En la sección Below checkout button, pega:

Siéntete libre de ajustar el texto del mensaje de advertencia para que se adapte al tono de tu marca.

Paso 2: Agrega CSS personalizado

Ve a:
Upcart > Cart Editor > Settings > Custom CSS
Pega el siguiente código:
Esto da estilo al mensaje de advertencia y deshabilita el botón de pago visual y funcionalmente.

Resultado final

Una vez configurado:
  • El pago queda bloqueado a menos que haya al menos un producto que no sea upsell en el carrito
  • Un mensaje informa a los clientes por qué el pago está deshabilitado
  • La experiencia se siente fluida y alineada con la marca
Esto es especialmente útil para: combinar estrategias de upsell efectivas con estas técnicas también mejora la experiencia de compra general del cliente al eliminar conflictos innecesarios en el proceso de compra.
  • Evitar compras accidentales de un solo artículo de upsell
  • Mantener los upsells como productos exclusivamente complementarios
  • Garantizar un mejor control sobre el AOV y los paquetes de productos

¿Aún necesitas ayuda?

Si necesitas ayuda con las personalizaciones, te recomendamos consultar con un Shopify Expert sobre cómo agregar HTML, CSS e incluso JavaScript a tu carrito deslizante. Ver Shopify Experts