Esquemas de color de Dawn

Las diferentes secciones del tema, como la de Texto enriquecido, Banner de imagen y Lista de colecciones, te permiten seleccionar un esquema de colores para aplicarlo a esa sección a partir de los colores que elegiste en la configuración de tu tema. Se aplicará un esquema de color predeterminado a tu tema, que se puede cambiar en cualquier momento en el editor de temas. Agregar los colores de tu marca garantiza una aplicación cohesiva de tu paleta de colores en toda tu tienda online.

Gestiona tu esquema de colores

El esquema de colores de tu tienda se establece en la configuración de tu tema.

  1. Haz clic en Configuración del tema en la parte inferior de tu barra lateral. 3. Haz clic en Colores. 5. Para cambiar un color en tu tema, haz clic en el color y usa el selector de color o introduce el valor del nuevo color en el campo de texto. 6. Haz clic en Guardar.

Para colores sólidos, usa el selector de color para seleccionar un nuevo color o introduce el valor del color en el campo de texto. El campo acepta nombres de colores (por ejemplo, red, black, blue), RGB o valores de color hexadecimales.

Para degradados de colores, haz clic en el cuadro de color y luego escribe o pega tu código CSS de degradado en el campo (por ejemplo, linear-gradient(red, green), radial-gradient(red, green)o conic-gradient(red, green)). El editor de temas mostrará un mensaje de error si tu código CSS de degradado contiene caracteres especiales, imágenes o URL. Si tu código CSS es válido, la vista previa del editor de temas mostrará el degradado seleccionado en la ubicación adecuada.

Campo de código CSS de degradado en el editor de temas

Configuración de color

El fondo y el relleno de las imágenes se pueden configurar en tu editor de temas. Usa el menú desplegable para elegir entre el degradado Acento 1, Acento 1 degradado, Acento 2, Acento 2 degradado, Fondo 1, Fondo 1 degradado, Fondo 2, Fondo 2 degradado o Inverso. Puedes obtener una vista previa de los esquemas de color seleccionados en el panel de vista previa del editor de temas.

Configuración Descripción
Texto El color se puede aplicar al texto del bloque o de la sección.
Resaltado 1 El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones.
Degradado resaltado 1 Introduce el código CSS de degradado para generar tu degradado.
Resaltado 2 El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones.
Degradado resaltado 2 Introduce el código CSS de degradado para generar tu degradado.
Fondo 1 El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones.
Degradado de fondo 1 Introduce el código CSS de degradado para generar tu degradado.
Fondo 2 El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones.
Degradado de fondo 2 Introduce el código CSS de degradado para generar tu degradado.
Invertir El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones. Usa el fondo 1 como el color del texto y el color del texto como el color de fondo

Algunas configuraciones que te permiten elegir el esquema de colores usado también te permiten usar degradados. Por ejemplo, en Dawn, el primer tema gratuito de Online Store 2.0 de Shopify, puedes configurar degradados de los colores de tu marca y usarlos en lugar de las opciones estándar de colores de acento y fondo.

Configurar degradados

Dawn usa la configuración color_background para personalizar la propiedad de fondo CSS, lo que te permite crear opciones de fondo visualmente interesantes, como degradados.

La mayoría de propiedades background de CSS se pueden usar para establecer un color de fondo. Puedes usar este campo para colores sólidos (por ejemplo, #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) y hsla(0, 0%, 0%, 1) producen un fondo negro sólido) o para degradados (por ejemplo, linear-gradient(red, green), radial-gradient(red, green) or conic-gradient(red, green)). Los degradados también se pueden repetir.

La configuración de color de fondo usa código CSS e incluye un comprobación de validación que mostrará una advertencia si hay imágenes, caracteres especiales o URL en tu código CSS. Si el código de fondo CSS es válido, el editor de temas previsualizará tu degradado en el panel de vista previa.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis