> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://molsoft.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Personalización del Popup - Popup Customization

**Mejora la experiencia del usuario personalizando el mensaje emergente que aparece cuando no se cumple un límite. La personalización del mensaje emergente ofrece una manera simple pero poderosa de hacer que el mensaje coincida con la marca de tu tienda.**

Mira nuestro tutorial rápido sobre Personalización de Mensajes Emergentes y Traducciones Generales [AQUÍ](https://www.loom.com/share/a5e4b80f1241434d81f3bbe2446ebb2f?sid=bc851b26-ee24-4c5c-be8f-82a4c52eafb6). 

---

## Tabla de Contenidos

1. [Visión General](#2-overview)
2. [Personalización de Colores](#2-color-customization)
3. [CSS Personalizado](#2-custom-css)
4. [Vista Previa en Tiempo Real](#2-real-time-preview)

---

## Visión General

Con la Personalización del Mensaje Emergente, puedes configurar:

* **Color de Fondo**
* **Color de Fuente**
* **Color del Botón**
* **Color del Texto del Botón**
* **CSS Personalizado**

---

## Personalización de Colores

### Color de Fondo

Elige un color para establecerlo como el fondo del mensaje emergente.

### Color de Fuente

Elige el color del texto que se muestra en el mensaje emergente.

### Color del Botón

Selecciona el color para el botón en el mensaje emergente.

### Color del Texto del Botón

Personaliza el color del texto mostrado en el botón.

---

## CSS Personalizado

Para aquellos que desean un control más detallado, hay una caja de texto de "CSS Personalizado" disponible. Usa los siguientes IDs para un estilo específico:

* `#mincart-popup-container`
* `#mincart-title`
* `#mincart-limit-list`
* `#mincart-button`

**Ejemplo de CSS:**

```
#mincart-popup-container {
  border-radius: 5px;
}

#mincart-title {
  font-size: 50px;
}

#mincart-limit-list {
  font-size: 20px;
}

#mincart-button {
  font-size: 16px;
}
```

Para ajustar el tamaño del mensaje emergente, puedes agregar:
```
#mincart-popup-container {
  max-width: 500px;
}
```

---

## Vista Previa en Tiempo Real

Observa los cambios que realices en tiempo real con la sección de vista previa. Esto asegura que lo que ves es lo que obtendrás antes de guardar e implementar los cambios.