⚠️ Aviso importante El ejemplo de personalización de este documento solo funciona con la V1.0 de los módulos de carrito de Upcart. Si actualizaste recientemente tu carrito a la Versión 2, este código de personalizaciones no funcionará. Deberás usar los nuevos selectores proporcionados para la Versión 2 en la guía de migración. Consulta la demás documentación de personalización para conocer las soluciones de la V2.0.

Resumen

Upcart te da control total para modificar la apariencia y el comportamiento del carrito usando Custom HTML, Custom CSS y JavaScript. Estas herramientas te permiten agregar nuevas funciones, dar estilo a tu carrito para que coincida con tu marca o introducir lógica para mejorar el funcionamiento de tu carrito. Esta guía cubre los conceptos básicos de cada una y muestra cómo comenzar. Cada sección incluye un ejemplo visual rápido para ayudarte a entender cómo se ven los cambios en la práctica.

Antes de comenzar, asegúrate de revisar la política de personalización de Upcart para saber qué está y qué no está cubierto por nuestro equipo.

Agrega contenido con HTML

HTML se usa para agregar contenido estático como texto, banners o botones a tu carrito. Puedes elegir entre varias ubicaciones HTML en el editor de Custom HTML (p. ej., encima del botón de checkout, al final del carrito, entre artículos). Casos de uso comunes:

Agregar mensajes personalizados
Insertar avisos legales o enlaces a políticas
Destacar fechas límite de envío o información de entrega

Ejemplo:

<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div

Editor de Custom HTML de Upcart agregando un mensaje de agradecimiento encima del botón de checkout

Agrega lógica con JavaScript

JavaScript controla el comportamiento y la lógica del carrito. Puedes usarlo para mostrar u ocultar elementos, aplicar estilos condicionalmente o responder a los cambios del carrito en tiempo real. Debes envolver tu código en una etiqueta <script> y colocarlo en Custom HTML > Scripts (Before Load) o Above Announcements, según el momento en que deba ejecutarse. Ejemplo: Limitar el carrito a un upsell a la vez:

<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 versiones antiguas: Los callbacks de 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.

Editor de Scripts Before Load de Custom HTML de Upcart con JavaScript ocultando el módulo de upsells

🔧 Nota para desarrolladores:
Upcart ofrece una documentación completa de la API pública que enumera todas las funciones, variables y patrones de buenas prácticas disponibles para personalizaciones avanzadas. Recomendamos revisarla al crear scripts o integraciones más complejas.

Da estilo a tu carrito con CSS

CSS controla el aspecto de los elementos de tu carrito. Úsalo para ajustar espaciados, colores, tamaños de fuente u ocultar elementos no deseados. Custom CSS es una de las pestañas bajo Settings (detrás de More settings si la fila de pestañas se desborda). Casos de uso comunes:

Cambiar los colores del título del producto o de los botones
Ajustar el tamaño o la alineación de la fuente
Agregar espacio entre secciones

Ejemplo: Cambiar el color del título de los upsells en V1.0:

.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}

Editor de Custom CSS de Upcart dando estilo al color del título de los upsells con una confirmación de cambios guardados

Recursos adicionales

¿Quieres mejorar tus habilidades de HTML, CSS o JavaScript? Consulta estas herramientas gratuitas:

Soporte para personalizaciones

El equipo de soporte de Upcart no puede ayudar con la implementación de código personalizado. Para cambios más avanzados, te recomendamos contratar a un Shopify Expert.

Primeros pasos

Módulos del carrito

Configuración del carrito

Botón de carrito fijo

Multicart

Personalizaciones

Analíticas

Integraciones y compatibilidad

Facturación y cuenta

Solución de problemas

Primeros pasos con las personalizaciones de Upcart

Resumen

Agrega contenido con HTML

Agrega lógica con JavaScript

Da estilo a tu carrito con CSS

Recursos adicionales

Soporte para personalizaciones

​Resumen

​Agrega contenido con HTML

​Agrega lógica con JavaScript

​Da estilo a tu carrito con CSS

​Recursos adicionales

​Soporte para personalizaciones

Resumen

Agrega contenido con HTML

Agrega lógica con JavaScript

Da estilo a tu carrito con CSS

Recursos adicionales

Soporte para personalizaciones