Un esquema de colores es un conjunto de colores guardado. Cada sección de tu tienda usa un esquema, así que cambias los colores en un solo lugar y todas las secciones que usan ese esquema lo siguen.
Dónde encontrar tus esquemas
Abre el constructor, haz clic en el icono del engranaje y abre la pestaña Colors. En Schemes ves una tarjeta por esquema, llamadas Scheme 1, Scheme 2, etc. Cada tarjeta muestra una pequeña vista previa de sus colores.
- Edit: haz clic en una tarjeta. Se abre un panel con una vista previa en directo arriba y todos los colores debajo.
- Add: haz clic en la tarjeta con el signo más del final. El nuevo esquema empieza como copia de tu último esquema.
- Duplicate o Delete: haz clic derecho en una tarjeta, o usa el botón de menú en la parte superior del panel del esquema.
- Reordenar: arrastra una tarjeta por su asa.
Puedes tener hasta 9 esquemas. Cuando llegas a 9, la tarjeta con el signo más muestra (9/9) y Duplicate muestra Limit reached. Siempre conservas al menos un esquema, así que el último no se puede eliminar.
Los colores de un esquema
Generales
- Background: el fondo de la sección.
- Inner background: cajas y tarjetas dentro de la sección.
- Heading: los títulos.
- Text: párrafos y texto normal.
- Important text: texto que debe destacar, como precios y números de cuenta atrás.
- Badge background: el relleno de los distintivos de ahorro, las cintas de los paquetes y las etiquetas de ahorro de los paquetes.
- Links y Hover links: enlaces, y enlaces bajo el ratón.
- Border: líneas y separadores.
- Outline: anillos de foco y contornos, por ejemplo cuando un comprador recorre la página con el teclado.
- Shadow: el color de las sombras.
Botón principal y botón secundario
Cada uno tiene Background, Text y Border, además de Hover background, Hover text y Hover border para cuando el ratón está sobre el botón. El botón principal es tu llamada a la acción principal, como el botón de compra.
Campos
Campos de formulario: Background, Label, Text (lo que escribe el comprador), Border y Hover background.
Cómo eligen esquema las secciones
Selecciona una sección y busca su ajuste Color scheme. Elige un esquema de la lista. La lista tiene un enlace a tus esquemas de colores por si quieres editarlos.
Muchos bloques dentro de una sección tienen un interruptor Use parent color scheme. Activado, el bloque usa los colores de la sección que lo rodea. Desactivado, aparece un ajuste Color scheme para que el bloque use su propio esquema. En el bloque para escribir una reseña, Inherit scheme hace que su botón use los colores de la sección. Desactivado, eliges un Button scheme. Otros lugares que usan un esquema son los paneles del menú del encabezado y la página de mantenimiento.
Bueno saberlo
- Las secciones recuerdan el número, no los colores. Si arrastras el Scheme 3 al primer lugar, todas las secciones que usaban el esquema 1 muestran ahora los colores que se movieron ahí. Revisa tus páginas después de reordenar.
- Al eliminar un esquema, sus secciones pasan al esquema justo anterior (o al primero). Al duplicar, la copia se coloca justo después del original y cada sección conserva sus colores actuales.
- Los esquemas pertenecen al mercado que estás editando. Si vendes en varios mercados, cambia primero de mercado con la bandera.
- Los cambios se publican cuando haces clic en Publish.
Consejos
- Usa un esquema claro y tranquilo para la mayoría de las secciones y un esquema llamativo para el hero y las llamadas a la acción.
- Haz que el botón principal se distinga claramente del fondo.
- Comprueba que el texto se lee bien sobre su fondo, también en un móvil a plena luz del día.