> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML personalizado

> Agrega HTML o JavaScript personalizado a tu carrito usando el editor HTML integrado.

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](https://rokt.notion.site/upcart-public-api) de Upcart (p. ej., `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Dónde encontrarlo**
</div>

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

<div id="how-it-works">
  ## **Cómo funciona**
</div>

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

<div id="dynamic-tokens">
  ## **Tokens dinámicos**
</div>

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:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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.

<div id="available-html-locations">
  ## **Ubicaciones HTML disponibles**
</div>

|                                        |                                                                                                                                                           |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |

<div id="custom-css-optional">
  ## **CSS personalizado (opcional)**
</div>

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:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```