Esquemas de color

Esta página fue impresa el Mar 23, 2023. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/online-store/themes/theme-structure/color-scheme.

Las diferentes secciones del tema, como la de texto enriquecido, banner de imagen y lista de colecciones, te permiten seleccionar un esquema de colores entre los que configuraste en los ajustes de tu tema y aplicarlos en esa sección. Se aplicará un esquema predeterminado de colores a tu tema, que puedes cambiar en cualquier momento en el editor de temas. Al agregar los colores de tu marca, lograrás un uso coherente de tu paleta de colores en toda tu tienda online.

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 Selecciona un degradado predefinido o usa el selector para personalizar el degradado resaltado.
Resaltado 2 El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones.
Degradado resaltado 2 Selecciona un degradado predefinido o usa el selector para personalizar el degradado resaltado.
Fondo 1 El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones.
Degradado de fondo 1 Selecciona un degradado predefinido o usa el selector de degradados para personalizar el degradado del fondo.
Fondo 2 El color se puede aplicar a los botones de impacto y a los fondos de algunas secciones.
Degradado de fondo 2 Selecciona un degradado predefinido o usa el selector de degradados para personalizar el degradado del fondo.
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

Algunos de los ajustes que te permiten elegir un esquema de colores también te permiten usar degradados. Por ejemplo, en Dawn, puedes configurar degradados de los colores de tu marca y usarlos en lugar de las opciones estándar de colores de resaltado y de fondo.

Gestiona tu esquema de colores

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

  1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que deseas editar y luego haz clic en Personalizar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Haz clic en Configuración del tema.
  2. Haz clic en Colores.
  3. Para cambiar un color en tu tema, haz clic en el color y usa el selector de color o introduce el valor del color nuevo en el campo de texto.
  4. 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.

Degradados

Puedes configurar un gradiente de colores en Dawn para obtener opciones de fondo visualmente interesantes. El ajuste 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

  1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que deseas editar y luego haz clic en Personalizar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Haz clic en Configuración del tema.
  2. Haz clic en Colores.

  3. Selecciona una de las opciones de degradados.

  4. Selecciona tus opciones de degradado:

  • Puedes elegir entre un degradado linear o radial. Usa los botones para seleccionar tu estilo de degradado preferido.
  • El ángulo de tu degradado se puede configurar con las flechas hacia arriba y hacia abajo. Al hacer clic en el símbolo hacia arriba o hacia abajo, el porcentaje del ángulo aumenta o disminuye de 5 en 5.
  • Usa el deslizador para seleccionar la posición de tu degradado o introduce un valor numérico en el campo.
  • Puedes introducir un código hexadecimal de color específico o usa el deslizador de colores para elegir un matiz. Los colores seleccionados recientemente se muestran en la parte inferior del panel de opciones de degradados.
  • Si deseas que tu degradado sea opaco, usa el deslizador a la derecha para seleccionar la transparencia de tu degradado. También puedes introducir un porcentaje en el campo junto al código de color hexadecimal.
  1. Haz clic en Guardar.

Selector de degradados en el editor de temas

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:

  1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que deseas editar y luego haz clic en Personalizar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Haz clic en Configuración del tema.
  2. Haz clic en Colores.
  3. Haz clic en el degradado que deseas editar.
  4. Haz clic en la flecha junto a Degradado y selecciona CSS.
  5. 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.
  6. Haz clic en Guardar.
    Gradient CSS Code field in the theme editor

Eliminar un degradado

Para restablecer o eliminar un degradado:

  1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que deseas editar y luego haz clic en Personalizar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Desde la aplicación de Shopify, toca Tienda.
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Gestionar temas.
  4. Busca el tema que deseas editar, y luego toca Personalizar.
  5. Toca Editar.
  1. Haz clic en Configuración del tema.
  2. Haz clic en Colores.
  3. Haz clic en el degradado que deseas editar.
  4. Haz clic en Eliminar degradado
  5. Haz clic en Guardar.

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

Prueba gratis