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

# Biblioteca de ubicaciones HTML de Upcart

> Aprende dónde aparecerán el HTML y JavaScript personalizados en el cajón del carrito.

<div id="overview">
  # Descripción general
</div>

Upcart te permite insertar HTML o JavaScript en ubicaciones específicas a lo largo del carrito usando el editor de **Custom HTML**. Esto te da control total sobre el diseño, la visibilidad y el contenido condicional dentro de la experiencia del carrito.

Usa esta guía para entender cómo se comporta cada ubicación y dónde aparecerá tu contenido.

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

<div id="above-announcementsrewards">
  #### **Above announcements/rewards**
</div>

Se muestra directamente debajo del encabezado del carrito, antes de cualquier módulo.\
Úsala para agregar mensajes para todo el sitio, avisos o banners dinámicos.

<div id="below-headerannouncementsrewards">
  #### **Below header/announcements/rewards**
</div>

Se muestra justo después de los módulos de anuncios y recompensas, y justo antes de la lista de productos.

<div id="between-each-line-item">
  #### **Between each line item**
</div>

Repite tu HTML después de cada producto en el carrito.\
Ideal para mostrar avisos legales o información adicional específica del producto.

<div id="below-cart-items">
  #### **Below cart items**
</div>

Se muestra debajo de la lista de productos, después de todos los artículos de línea del carrito. Úsala para mensajes, banners o contenido personalizado que deba aparecer debajo de los productos pero encima de los upsells y complementos.

<div id="above-footeradd-ons">
  #### **Above footer/add-ons**
</div>

Aparece debajo de la lista de productos y los upsells, pero encima de la sección de complementos.\
Ideal para mensajes que preceden a ofertas de garantía o de protección de envío.

<div id="above-checkout-button">
  #### **Above checkout button**
</div>

Se muestra dentro del área del pie de página, justo encima del botón de pago y el subtotal.\
Se usa a menudo para mostrar desgloses de precios, avisos de envío o condiciones.

<div id="below-checkout-button">
  #### **Below checkout button**
</div>

También en el pie de página, ubicada después del botón de pago y antes de los botones de pago exprés. Los complementos se muestran en la parte superior del pie de página, muy por encima de esta ubicación.\
Útil para llamadas a la acción secundarias o avisos legales.

<div id="bottom-of-cart">
  #### **Bottom of cart**
</div>

Se muestra fuera del área del pie de página, en la parte más baja del cajón del carrito.\
No hereda el color de fondo del pie de página.

<div id="on-empty-cart-screen">
  #### **On empty cart screen**
</div>

Solo se muestra cuando el carrito está vacío.\
Aparece directamente **debajo** del mensaje "Your cart is empty" y encima del módulo de recomendaciones; útil para una línea de apoyo o un enlace a una colección.

<div id="scripts-before-load">
  #### **Scripts (Before Load)**
</div>

Ubicación invisible que se usa para ejecutar JavaScript **antes** de que se cargue el carrito.\
Úsala para definir variables, establecer condiciones o modificar el comportamiento de Upcart.

* Todas las ubicaciones de HTML personalizado se gestionan en:\
  **Upcart > Cart Editor > Settings > Custom HTML**

<div id="visual-reference">
  ## Referencia visual
</div>

Para entender claramente dónde se muestra cada ubicación dentro del carrito, consulta el diseño etiquetado a continuación

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/html-locations-labeled-cart-drawer.gif?s=fd801e149233b51066ee15010556c375" alt="Cajón del carrito de Upcart etiquetado que muestra dónde se muestra cada ubicación de HTML personalizado" width="700" height="1080" data-path="images/upcart/html-locations-labeled-cart-drawer.gif" />
</Frame>