> ## 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.
# Bloque Empty cart
> El bloque Empty cart: el contenido que se muestra cuando un comprador no tiene artículos.
> El bloque **Empty cart** es el contenido que se muestra cuando el carrito no tiene artículos, típicamente un mensaje y un botón de seguir comprando, para que un drawer vacío siga siendo útil y acorde a la marca. Solo aparece en el **estado vacío** del carrito; otros bloques (como el Header) pueden acompañarlo en ese mismo estado.
## Comportamiento
* El bloque aparece solo cuando el carrito está vacío. En cuanto un comprador agrega un artículo, el carrito cambia a su estado con artículos y este bloque es reemplazado por tu layout de carrito lleno.
* En el editor, el enlace del CTA está inactivo, así que hacer clic en él no te lleva a otra página mientras diseñas.
## Configuraciones
| Configuración | Qué controla | Predeterminado |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text** | El mensaje del estado vacío. Texto enriquecido. | `Your cart is empty.` |
| **Button text** | La etiqueta del botón. Admite formato HTML en línea. | `Continue shopping` |
| **Button link** | Adónde enlaza el botón. | `/collections/all` |
| **Background color** | Color de fondo del bloque. En blanco lo deja transparente, para que se vea el propio fondo del carrito. | `transparent` |
| **Alignment** | Cómo se alinean el texto y el botón del bloque: **Left** o **Center**. | Center |
| **Fit to height** | Si el bloque llena la altura restante del cuerpo del carrito y se centra verticalmente, o se ajusta a la altura de su contenido: **Fill remaining height** o **Fit content**. | Fill remaining height |
## Ubicación y límites
* **Región:** cuerpo.
* **Máximo:** 1 por estado del carrito.
* **Estado:** solo carrito vacío. Este bloque no aparece en el estado con artículos. Los carritos nuevos también incluyen un Header en el estado vacío de forma predeterminada; consulta [¿Cómo funcionan los carritos?](/es/aftersell/cart/how-carts-work).
* Se agrega a los carritos nuevos de forma predeterminada. No está bloqueado — puedes eliminarlo u ocultarlo.
## Plantilla personalizada
Admite una [plantilla personalizada](/es/aftersell/cart/custom-templates) desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.
| Prop | Tipo | Para qué sirve |
| --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
| `text` | `string` | El mensaje de carrito vacío como HTML sanitizado. |
| `cta` | `string` | Etiqueta del botón de llamada a la acción, como texto plano. |
| `ctaHtml` | `string` | Etiqueta del botón de llamada a la acción como HTML sanitizado — lo que renderiza el marcado predeterminado. |
| `href` | `string` | Adónde apunta la llamada a la acción. |
Este bloque solo se renderiza cuando el carrito está vacío, así que no hay un objeto cart en las props. Renderiza `href` como un `` real en lugar de una navegación con script, y `text` con `dangerouslySetInnerHTML`, ya que es HTML ya sanitizado.
## Diseño
Dale estilo a este bloque con su sección **Design** en el panel de configuración. Son anulaciones por bloque que se aplican encima de tu diseño global y recurren a él cuando están en blanco.
### Text
La sección **Text** de Design te permite controlar la tipografía de dos elementos. Usa el selector **Text element** para alternar entre ellos.
**Message** — el texto del mensaje de estado vacío. La negrita y el color del texto se establecen en el Rich Text Editor de arriba (en la pestaña Settings), no aquí.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------- | --------------- |
| **Font** | Familia tipográfica del mensaje. | Hereda del tema |
| **Size** | Tamaño de fuente. | `18px` |
| **Line height** | Multiplicador de altura de línea. | `1.3` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
**Button label** — el texto del botón de seguir comprando. El color del texto se establece en la sección Button de Design.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------------------------------- | -------------- |
| **Size** | Tamaño de fuente. | `15px` |
| **Weight** | Peso de fuente — Light, Regular, Medium, Semibold o Bold. | Semibold (600) |
| **Line height** | Multiplicador de altura de línea. | `1.47` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
### Botón
La sección **Button** te permite dar estilo al botón de llamada a la acción de forma independiente del diseño global de botones. Usa el interruptor **Default / Hover** para alternar entre los dos estados.
| Configuración | Estado | Qué controla |
| -------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| **Background color** | Default | El relleno del botón en su estado de reposo. Recurre al color de fondo global del botón. |
| **Text color** | Default | El color de la etiqueta del botón en su estado de reposo. Recurre al color de texto global del botón. |
| **Background color** | Hover | El relleno del botón cuando un cliente pasa el cursor sobre él. Recurre al color de fondo predeterminado. |
| **Text color** | Hover | El color de la etiqueta del botón al pasar el cursor. Recurre al color de texto predeterminado. |
| **Border color** | — | El color del borde del botón (ambos estados). Recurre al color de borde global del botón. |
| **Border radius** | — | El redondeo de las esquinas del botón. Recurre al radio de borde global del botón. |
¿Qué son las configuraciones de diseño? Aprende más aquí: [Configuraciones de diseño](/es/aftersell/cart/design-settings).