Dónde se encuentran estos ajustes
La identidad visual se configura por mercado y, dentro de un mercado, afecta a todas las páginas a la vez. Abre el constructor, elige un mercado con el botón de mercados (bandera de país) en la parte superior de la barra lateral izquierda y luego abre la pestaña Configuración (icono de engranaje). Configuración tiene sus propias subpestañas en este orden: Identidad visual, Colores, Fuentes, Diseño, Animaciones, Automatizaciones, Entradas, Iconos, Prohibiciones, Checkout, Formulario de checkout, Página de mantenimiento, CSS personalizado y Javascript personalizado. Los cambios se aplican al mercado que tienes seleccionado y se publican cuando haces clic en Publicar. Cambiar de mercado recarga los colores, fuentes y diseño propios de ese mercado.
Esquemas de color
La pestaña Colores permite hasta 9 esquemas de color. Cuando llegas al límite, la tarjeta para añadir se convierte en una insignia de conteo deshabilitada como 9/9. Cada sección, bloque y componente hace referencia a un esquema por su número, así que cambiar los colores de un esquema actualiza al instante todas las secciones que lo usan en todas las páginas. Haz clic derecho en una tarjeta de esquema para duplicarla o eliminarla.
Roles de color en cada esquema
Cada esquema define estos roles, todos configurados como valores hexadecimales:
- Fondo: el fondo principal de la sección.
- Fondo interno: un fondo con tinte para tarjetas y contenido anidado dentro de una sección.
- Título: color del texto de los encabezados.
- Texto: color del texto de párrafos y cuerpo.
- Texto importante: texto destacado como precios y valores resaltados.
- Enlaces y Enlaces al pasar el cursor: color del hipervínculo en estado normal y al pasar el cursor.
- Borde: bordes de elementos y líneas divisorias.
- Contorno: aros de enfoque y contornos de acento que deben resaltar más que los bordes.
- Sombra: color de la sombra de caja (normalmente semitransparente).
- Botón principal: fondo, texto y borde, cada uno con su propio color al pasar el cursor (6 valores en total).
- Botón secundario: fondo, texto y borde, cada uno con su propio color al pasar el cursor (6 valores en total).
- Fondo, texto, borde y etiqueta de entrada: el estilo de los campos de formulario.
- Fondo de entrada al pasar el cursor: el fondo del campo de entrada cuando el cliente pasa el cursor.
Consejos para esquemas sólidos
- Mantén un Fondo neutro y claro en la mayoría de las secciones y reserva colores llamativos para un esquema de acento en secciones destacadas y de llamada a la acción.
- Haz que el Fondo del botón principal sea claramente distinto del Fondo de la sección para que el botón resalte.
- Configura el Fondo interno como un leve tinte del Fondo principal para que las tarjetas se distingan sin desentonar.
- Procura al menos una relación de contraste de 4.5:1 entre el texto y su fondo.
Fuentes
La pestaña Fuentes asigna cuatro roles a una familia tipográfica cada uno:
- Cuerpo: texto de párrafos y descripciones.
- Título: todos los encabezados de la tienda.
- Subtítulo: títulos secundarios y subtítulos de sección.
- Acento: una fuente estilística para precios, distintivos y énfasis decorativo.
Fuentes disponibles: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface y Acme. Para tiendas con contenido en árabe, cada fuente se empareja automáticamente con una contraparte árabe, así que no necesitas seleccionar una fuente árabe por separado.
Ancho de página
La pestaña Diseño tiene un control deslizante de Ancho de página que establece el ancho máximo de la cuadrícula de contenido principal, de 900 a 1400 px en pasos de 100 (es decir, 900, 1000, 1100, 1200, 1300 o 1400; el valor predeterminado es 1200). Las secciones configuradas en Ancho de página se limitan a este valor; las secciones en Completo siempre ocupan todo el ancho de la pantalla. En pantallas más estrechas que el ancho elegido, las secciones se ajustan para ocupar el 100% de la pantalla.
Logotipo
El logotipo se configura en dos lugares: el bloque Logotipo dentro de la sección Encabezado y el bloque Sobre nosotros en el pie de página. Haz clic en el bloque y usa su selector de imagen Logotipo para elegir una imagen de tu biblioteca multimedia o subir una nueva. Después de seleccionarla, ajusta el Ancho y Alto de visualización (cada uno de 20 a 300 px); la otra dimensión se ajusta automáticamente para mantener la proporción. El logotipo del encabezado tiene por defecto 120 px de ancho por 50 px de alto y puedes ajustar su posición horizontal (izquierda, centro o derecha) y el relleno. Por defecto, el logotipo del encabezado enlaza a la página de inicio; puedes hacerlo decorativo desactivando el interruptor El logotipo redirige a inicio en el grupo Encabezado de la pestaña Prohibiciones.
Favicon
Configura el favicon en la pestaña Identidad visual. Haz clic en Seleccionar favicon y elige una imagen PNG, JPEG, WEBP o ICO (tamaño recomendado 32x32 o 16x16 px). Aparecerá en las pestañas del navegador y en los marcadores.
Imagen de fondo del cuerpo
También en la pestaña Identidad visual, puedes establecer opcionalmente una Imagen de fondo detrás de toda la tienda (PNG, JPEG o WEBP). Una vez seleccionada la imagen, aparecen dos controles: Tamaño (Cubrir llena la pantalla, recortando si es necesario; Contener ajusta toda la imagen) y Repetir (si está activado, la imagen se repite y se desplaza con la página; si está desactivado, una sola imagen permanece fija mientras el contenido se desplaza sobre ella). Usa una imagen muy comprimida para evitar ralentizar la carga de la página.
CSS y JavaScript personalizados
Para cambios que no permiten los ajustes estándar, la pestaña CSS personalizado y la pestaña Javascript personalizado aceptan hasta 1,000 caracteres que se inyectan y ejecutan en cada página de la tienda. Úsalos con moderación. Para estilos aplicados solo a una sección, cada sección también tiene su propia pestaña CSS personalizado en su panel de control, lo cual es más seguro que el campo para todo el sitio.