Primeros pasos con las personalizaciones de Upcart
Aprende a usar HTML, CSS y JavaScript para crear funciones y estilos personalizados en tu cajón del carrito.
⚠️ Aviso importanteEl 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.
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.
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
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.
🔧 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.
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:
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.
¿Esta página le ayudó?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
