Dónde se encuentran estos ajustes
Estos ajustes se configuran por mercado, y dentro de un mercado afectan a todas las páginas a la vez. Abre el editor, elige un mercado con la pestaña de mercado (icono de bandera de país) en la barra lateral izquierda y luego haz clic en la pestaña Ajustes (icono de engranaje). Los cambios se aplican al mercado que tengas seleccionado y se publican cuando haces clic en Publicar. Para ver la lista completa de cada ajuste, consulta la referencia de ajustes del editor.
Esquemas de color
Storeep utiliza una paleta de hasta 9 esquemas de color. Cada sección, bloque y componente de tu tienda hace referencia a uno de estos esquemas por su número (del 1 al 9). Cambiar los colores de un esquema actualiza al instante todas las secciones que lo usan, en todas las páginas.
Roles de color dentro de cada esquema
Cada esquema define los siguientes roles de color, todos definidos como valores de color hexadecimales:
- Fondo: el color de fondo principal de la sección.
- Fondo interior: un fondo con un tinte sutil que se usa para tarjetas y áreas de contenido anidadas dentro de la sección.
- Color de los títulos: el color del texto de los títulos.
- Color del texto del cuerpo: el color del texto de los párrafos.
- Color del texto destacado: un color de texto enfatizado que se usa para precios, etiquetas de ahorro y valores de las cuentas atrás. Suele ser el tono más oscuro o intenso de la paleta.
- Color de los enlaces: el color predeterminado de los hipervínculos.
- Color de los enlaces al pasar el cursor: el color del hipervínculo cuando un comprador pasa el cursor por encima.
- Color de los bordes: el color de los bordes de los elementos y de las líneas divisorias.
- Color del contorno: el color de los anillos de enfoque, los resaltados de selección con el teclado y los contornos de acento que necesitan destacar más que los bordes normales.
- Color de la sombra: el color de las sombras de caja (normalmente con algo de transparencia).
- Fondo del botón principal: el color de relleno de los botones principales.
- Texto del botón principal: el color de la etiqueta de los botones principales.
- Borde del botón principal: el color del borde de los botones principales.
- Fondo del botón principal al pasar el cursor: el color de relleno del botón principal al pasar el cursor.
- Texto del botón principal al pasar el cursor: el color de la etiqueta del botón principal al pasar el cursor.
- Borde del botón principal al pasar el cursor: el color del borde del botón principal al pasar el cursor.
- Fondo del botón secundario: el color de relleno de los botones secundarios.
- Texto del botón secundario: el color de la etiqueta de los botones secundarios.
- Borde del botón secundario: el color del borde de los botones secundarios.
- Fondo del botón secundario al pasar el cursor: el color de relleno del botón secundario al pasar el cursor.
- Texto del botón secundario al pasar el cursor: el color de la etiqueta del botón secundario al pasar el cursor.
- Borde del botón secundario al pasar el cursor: el color del borde del botón secundario al pasar el cursor.
- Fondo del campo de entrada: el color de fondo de los campos de los formularios.
- Color del texto del campo de entrada: el color del texto dentro de los campos de los formularios.
- Color del borde del campo de entrada: el color del borde de los campos de los formularios.
- Color de la etiqueta del campo de entrada: el color del texto de la etiqueta situada encima de los campos del formulario.
- Fondo del campo de entrada al enfocar: el color de fondo del campo cuando un comprador lo enfoca o pasa el cursor por encima.
Consejos para crear esquemas de color sólidos
- Usa un color claro y neutro para el Fondo en la mayoría de las secciones y reserva los colores intensos para un único esquema de acento que se use en las secciones principales y de llamada a la acción.
- Haz que el Fondo del botón principal se distinga visualmente del Fondo de la sección, ya que el botón debe destacar con claridad.
- Mantén el Fondo interior como un tinte muy ligero del Fondo principal para que los fondos de las tarjetas se distingan sin resultar chocantes.
- Busca un contraste de al menos 4,5:1 entre el Color del texto del cuerpo y el Fondo, y entre el Texto del botón principal y el Fondo del botón principal.
Tipografía
Cuatro roles de fuente controlan la tipografía en todas las páginas. Cada rol se asigna a una familia tipográfica de la biblioteca disponible.
- Cuerpo: la fuente principal para el texto de los párrafos y las descripciones.
- Título: la fuente de todos los títulos de toda la tienda.
- Subtítulo: la fuente de los títulos secundarios y los subtítulos de sección, que sirve de puente entre los estilos de título y de cuerpo.
- Acento: una fuente estilística para precios, etiquetas y énfasis decorativo.
Las fuentes disponibles incluyen: 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 las tiendas con contenido en árabe, las fuentes se emparejan automáticamente con sus equivalentes en árabe: por ejemplo, Inter se empareja con Cairo, y Poppins con Tajawal. No necesitas seleccionar la fuente árabe por separado.
Ancho de página
El ajuste global Ancho de página controla el ancho máximo de la cuadrícula de contenido principal en píxeles. Las secciones configuradas con ancho de Página quedan limitadas a este valor; las secciones configuradas como Completo siempre ocupan toda la ventana, sin importar el valor. Valores disponibles: 900, 1000, 1100, 1200 (predeterminado), 1300 y 1400 px. En ventanas más estrechas que el ancho seleccionado, las secciones se reducen automáticamente para llenar el 100 % de la pantalla.
Logotipo
El logotipo se establece dentro del bloque de logotipo de la sección Encabezado y dentro del bloque Sobre nosotros del pie de página. Haz clic en el bloque de logotipo en el panel de control y luego haz clic en + Añadir medio o + Añadir imagen para subir tu logotipo desde tu dispositivo o elegirlo de tu biblioteca de medios. Después de subirlo, define el ancho de visualización (20 a 300 px) y la altura (20 a 300 px); la otra dimensión se escala automáticamente para mantener la relación de aspecto.
Favicon
El favicon se establece en Ajustes → Marca dentro del editor. Haz clic en el campo del favicon y sube una imagen (recomendado: una imagen cuadrada). El favicon aparece en las pestañas del navegador y en los marcadores.
Imagen de fondo del cuerpo
También en Ajustes → Marca: puedes establecer de forma opcional una imagen de fondo para toda la página. Configura cómo se escala (Cubrir llena toda la ventana, Contener ajusta la imagen dentro de ella) y si se repite (en mosaico) o permanece como una sola imagen detrás del contenido que se desplaza.
CSS y JavaScript personalizados globales
Para personalizaciones avanzadas que los ajustes estándar no pueden lograr, Ajustes ofrece un campo de CSS global (hasta 1.000 caracteres) y un campo de JS global (hasta 1.000 caracteres). El CSS introducido aquí se inyecta en todas las páginas de la tienda; el JS introducido aquí se ejecuta en todas las páginas. Úsalos con moderación, y prefiere la sección de código personalizado para personalizaciones específicas de cada página.