Una paleta de colores coherente permite que tu tienda virtual luzca profesional, transmita seguridad y resalte los botones de compra más importantes. En PaezAI puedes controlar toda la identidad cromática del sitio con solo tres tonos fundamentales. En esta guía aprenderás a personalizar los colores de tu tienda online con los controles confirmados en el panel.
Gracias a la integración con el generador visual, modificar tus colores actualiza automáticamente encabezados, fondos y botones sin editar hojas de estilo manuales. A continuación te explicamos cómo definir tu combinación ideal.
Antes de empezar
Ten a mano los códigos de color hexadecimales de tu marca corporativa si ya cuentas con ellos [EJEMPLO: #0B1020 o #C6FF3D].
Ingresa a tu panel de administración con permisos de Administrador o Gestor de tienda.
Paso 1: Colores de tu tienda online — Ingresa a la pantalla Mi marca
Entra a la administración de tu sitio web.
En el menú lateral principal, selecciona la opción Mi marca para acceder al configurador de diseño.
Qué deberías ver: La pantalla con las opciones de configuración y la sección destacada «Colores de tu marca».
Paso 2: Conoce los tres colores principales
La identidad de tu tienda se fundamenta en tres elementos clave:
- «Menú»: define el color de la barra superior de navegación y de los encabezados principales.
- «Marca»: el color principal de identidad usado en botones de compra prioritarios, insignias y detalles de marca.
- «Acento»: un tono complementario que aporta contraste en fondos secundarios, tarjetas y llamadas a la acción.
Qué deberías ver: Tres selectores circulares con sus casillas de código de color hexadecimal editable al lado.
Paso 3: Elige tu paleta o usa las sugerencias predefinidas
Haz clic sobre cualquiera de los selectores para abrir la rueda de colores y elegir tu tono exacto.
Si buscas una combinación balanceada de inmediato, prueba una de las paletas sugeridas haciendo clic en:
- «Tinta y lima»: moderno y contrastado (#0B1020, #C6FF3D, #F6F4EE).
- «Café cálido»: elegante y orgánico (#2A2220, #C48B7F, #DFADA2).
- «Oro y hueso»: refinado y exclusivo (#171310, #DCB753, #F3E8D7).
Qué deberías ver: Los tres códigos de color actualizándose simultáneamente al pulsar cualquiera de las opciones sugeridas.
Paso 4: Ajusta el color del banner y guarda
En el bloque «Más opciones de apariencia», revisa el selector «Color del banner».
Puedes dejarlo en «Automático (tu Menú, más oscuro)» para que el texto tenga contraste o elegir «Elegir un color» si deseas un tono particular. Al terminar, presiona «Guardar cambios».
Qué deberías ver: Un aviso superior confirmando el guardado y tu catálogo exhibiendo la nueva paleta de inmediato.
Problemas comunes
- El texto no se lee bien sobre el fondo nuevo: El sistema calcula automáticamente el contraste en encabezados y botones para que las letras blancas o negras se lean siempre con claridad.
- Los cambios no se ven en el celular: Limpia la memoria caché del navegador de tu teléfono o abre una pestaña privada para verificar los nuevos tonos.
- No me convence la combinación elegida: Pulsa el botón «Restaurar ajustes anteriores» para regresar al estado previo en un solo segundo.
¿Cuántas versiones previas guarda el sistema?
El sistema respalda automáticamente hasta 3 versiones anteriores, lo que te permite experimentar con diferentes tonos con total tranquilidad.
¿Los colores afectan a todas las páginas de la tienda?
El menú y los botones se actualizan según la compatibilidad de la plantilla; revisa la caja “Qué cambia al guardar” antes de guardar.
¿Puedo usar colores con degradados?
La configuración principal utiliza códigos sólidos para asegurar máxima legibilidad y tiempos de carga óptimos en conexiones móviles.