HTML personalizado

La sección Custom HTML de Upcart te permite insertar código personalizado en varias partes del cajón del carrito.
También puedes escribir JavaScript usando etiquetas <script> e interactuar con el carrito usando la API pública de Upcart (p. ej., upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)).

Dónde encontrarlo

Ve a: Cart Editor > Settings > Custom HTML

Cómo funciona

El menú desplegable HTML Location te permite elegir dónde aparecerá el código dentro del diseño del carrito. Según tu selección, el código se inyectará en el área correspondiente del carrito. Puedes usar esto para agregar:

Mensajes personalizados
Texto de confianza
Integraciones de apps
Fragmentos de analítica
Ganchos de estilo
Contenido promocional, como banners con ofertas o descuentos personalizados
Garantías de producto que generen confianza en el cliente

Tokens dinámicos

Puedes usar el siguiente token dentro de cualquier campo de Custom HTML para inyectar datos del carrito en vivo:

Token	Qué muestra
`{{UPCART_SUBTOTAL}}`	El subtotal actual del carrito, formateado en la moneda de tu tienda

Ejemplo:

<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>

Este token funciona en todos los campos de ubicación HTML excepto en Scripts (Before Load), donde debes usar la API de JavaScript en su lugar. Este es el único token dinámico disponible en los campos de Custom HTML.

Ubicaciones HTML disponibles


Ubicación	Descripción
Above announcements/rewards	Parte superior del carrito, debajo del encabezado del carrito.
Below header/announcements/rewards	Inmediatamente debajo de cualquier anuncio o barra de recompensas.
Between each line item	Se inyecta debajo de cada producto en el carrito.
Below cart items	Directamente debajo de los artículos del carrito, encima de los módulos inferiores.
Above footer/add-ons	Debajo de los artículos del carrito y los upsells, encima de los add-ons.
Above checkout button	Dentro del pie de página, directamente encima del botón de pago y el subtotal.
Below checkout button	Dentro del pie de página, directamente debajo del botón de pago.
Bottom of cart	En la parte más baja del cajón (fuera del pie de página).
On empty cart screen	Se muestra junto al texto “Your cart is empty”.
Scripts (Before Load)	Área invisible para ejecutar JavaScript antes de que se cargue el carrito. Ideal para seguimiento, lógica condicional o comportamiento personalizado.

CSS personalizado (opcional)

Puedes dar estilo a tu HTML usando el editor de Custom CSS que se encuentra en:
Upcart > Cart Editor > Settings > Custom CSS Por ejemplo, para ajustar la alineación del carrito vacío:

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Dónde encontrarlo

Cómo funciona

Tokens dinámicos

Ubicaciones HTML disponibles

CSS personalizado (opcional)

​Dónde encontrarlo

​Cómo funciona

​Tokens dinámicos

​Ubicaciones HTML disponibles

​CSS personalizado (opcional)

Dónde encontrarlo

Cómo funciona

Tokens dinámicos

Ubicaciones HTML disponibles

CSS personalizado (opcional)