Esquemas de color
Puedes definir diferentes esquemas de colores en la configuración del tema y aplicarlos a distintas secciones en toda la tienda online con un selector de esquema de colores. Un esquema de colores es un conjunto de colores. El tema tiene aplicado un conjunto de esquemas de colores predeterminados que puedes cambiar en cualquier momento en el editor de temas. Puedes agregar los colores de la marca para lograr un uso coherente de la paleta de colores en toda la tienda online.
En esta página
Configuración del esquema de colores del tema
Los esquemas de color son una configuración de tema que agrupa los elementos y sus colores respectivos de manera visualmente representativa. Puedes asignar colores diferentes a varios elementos en un esquema de colores cohesivo que se puede aplicar en todo el tema donde hay un selector de esquema de colores disponible. Puedes tener hasta 21 esquemas de colores. También puedes ver cómo se muestran los colores en la vista previa del esquema.
| Configuración | Descripción |
|---|---|
| Fondo | Se aplica color al fondo de algunas secciones y al del botón con contorno. |
| Degradado de fondo | Se aplica un degradado de colores al fondo de algunas secciones. Los degradados de fondo reemplazan el fondo donde es posible. |
| Texto | Se aplica color al texto del bloque o de la sección. |
| Fondo de botón sólido | Se aplica color al fondo del botón principal. |
| Etiqueta de botón sólido | Se aplica color al texto del botón principal. |
| Botón de contorno | Se aplica color al texto y al borde del botón secundario. |
| Sombra | Se aplica color a las sombras. |
Gestiona tu esquema de colores
El esquema y las opciones de colores de la tienda se establecen en la configuración del tema. Para colores sólidos, usa el selector de color para elegir un nuevo color o introduce el valor del color en el campo de texto. El campo de color acepta los siguientes nombres y valores de color:
- Nombres de color, como
red,blackblue - Códigos de color RGB
- Valores de color hexadecimal
Pasos:
- Desde el Panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en Personalizar junto al tema que deseas personalizar.
- Haz clic en el ícono del engranaje y luego en Colores.
- En la sección Esquemas, haz clic en un esquema existente o en Agregar esquema para agregar un nuevo esquema de colores.
- Haz clic en la muestra de color para el tipo de contenido cuyo color deseas cambiar.
- Para establecer el color, introduce un código de color hexadecimal o elígelo desde el selector de color. Para establecer el color en transparente, elimina el código hexadecimal del campo de texto.
- Haz clic en Guardar.
Aplicar tu esquema de colores
Después de definir el esquema de colores en la configuración del tema, puedes asignar un esquema usando el selector de esquemas de colores en las secciones y bloques del tema. El selector de esquemas de colores está disponible solo en ciertas secciones, bloques y configuración general del tema.
Degradados
Puedes configurar un degradado de colores en algunos temas para obtener opciones de fondo visualmente interesantes. La configuración color_background se usa para personalizar la propiedad de fondo CSS.
El selector de degradados permite seleccionar los colores, el estilo, el ángulo, la posición y la opacidad del degradado. Las opciones seleccionadas en el selector de degradados se muestran en tiempo real en el editor de temas. También puedes crear un fondo de degradados con código CSS, que incluye un verificador de validación.
Configurar degradados
- Desde el Panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en Personalizar junto al tema que deseas personalizar.
- Haz clic en el ícono del engranaje y luego en Colores.
- En la sección Esquemas, haz clic en un esquema existente que desees editar.
- Haz clic en la opción de muestra de color de degradado, como Degradado de fondo.
- Si aún no configuraste un degradado, se mostrarán algunas opciones preestablecidas para que puedas elegir. Selecciona un degradado preestablecido para abrir el panel de opciones.
- Selecciona tus opciones de degradado:
- Elige entre un degradado lineal o radial. Usa los botones para seleccionar tu estilo de degradado preferido.
- Establece el ángulo del degradado con las flechas hacia arriba y hacia abajo. Al hacer clic en las flechas hacia arriba o hacia abajo, el porcentaje del ángulo aumenta o disminuye de cinco en cinco.
- Usa el deslizador para seleccionar la posición de tu degradado o introduce un valor numérico en el campo.
- Introduce un código de color hexadecimal específico o usa el control deslizante de colores para elegir un matiz. Los colores seleccionados recientemente se muestran en la parte inferior del panel de opciones de degradados.
- Para que el degradado sea opaco, usa el control deslizante a la derecha para seleccionar la transparencia del degradado. También puedes introducir un porcentaje en el campo junto al código de color hexadecimal.
- Haz clic en Guardar.
Usar CSS para configurar degradados
La mayoría de los valores de la propiedad CSS background se puede usar para configurar 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) o conic-gradient(red, green)). Los degradados también se pueden repetir.
Pasos:
- Desde el Panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en Personalizar junto al tema que deseas personalizar.
- Haz clic en el ícono del engranaje y luego en Colores.
- En la sección Esquemas, haz clic en un esquema existente que desees editar.
- Haz clic en el degradado que deseas editar.
- Haz clic en la flecha junto a Degradado y luego selecciona CSS.
- En el campo código CSS, escribe o pega tu código de degradado. La vista previa del editor de temas muestra tu degradado en la ubicación adecuada.
- Haz clic en Guardar.
Eliminar un degradado
- Desde el Panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en Personalizar junto al tema que deseas personalizar.
- Haz clic en el ícono del engranaje y luego en Colores.
- En la sección Esquemas, haz clic en un esquema existente que desees editar.
- Haz clic en el degradado que deseas eliminar.
- Haz clic en Eliminar degradado.
- Haz clic en Guardar.