Correcto
Ajustes de color
Configure la paleta de color global del tema para fondos, texto, botones, banners, tarjetas y muestras.
Los ajustes de color controlan la paleta compartida que se usa en todo el tema. Como estas opciones pueden afectar a varias plantillas, áreas de contenido, tarjetas, formularios y estados interactivos a la vez, conviene establecerlas como un sistema coordinado en lugar de ajustar los colores un área cada vez. Para obtener un contexto de configuración más amplio, consulte documentación de Shopify sobre la personalización de temas
Empiece eligiendo las superficies principales y los colores del texto; luego construya a su alrededor los estilos de botones, banners y tarjetas. Para obtener orientación sobre accesibilidad, consulte documentación de Company XYZ sobre orientación de accesibilidad de ajustes de color.
Los colores de fondo establecen las superficies base del tema. El fondo del cuerpo define el tono general de la página, mientras que el fondo alternativo ayuda a separar áreas de contenido sin necesidad de bordes más marcados ni efectos visuales más intensos.
Los degradados pueden aportar profundidad, pero no deben dificultar la lectura del texto. Revise los encabezados, el texto de párrafo y las tarjetas allí donde pueda aparecer el degradado para que todo el rango de color siga siendo utilizable.
Los cambios de fondo son globales. Un color que se vea refinado en un área puede reducir el contraste del texto en otras plantillas o secciones de contenido.
Los ajustes de texto moldean la experiencia principal de lectura en todo el tema. Use colores de texto para encabezados y cuerpo que estén relacionados pero claramente diferenciados, y luego elija colores de enlace que sean fáciles de identificar como interactivos.
Los colores al pasar el cursor deben crear una respuesta clara sin hacer que los enlaces desaparezcan entre el texto circundante. Si los estados predeterminado y de hover se parecen demasiado, es posible que los clientes no adviertan que se puede hacer clic en un enlace.
Botones primarios
Sección titulada «Botones primarios»Los colores de los botones primarios deben destacar la acción principal en la interfaz. Normalmente son los estilos de acción más fuertes del tema, por lo que el fondo, el borde y el texto deben funcionar juntos para seguir siendo visibles en cualquier superficie donde aparezcan.
Los estilos de hover deben sentirse como un estado de interacción claro, no como un estilo de botón completamente distinto. Los cambios pequeños y deliberados suelen verse más pulidos que los cambios drásticos.
Botones secundarios
Sección titulada «Botones secundarios»Los botones secundarios respaldan las acciones de menor prioridad y deben percibirse claramente menos destacados que los botones primarios. Aun así, deben verse intencionados y utilizables, especialmente cuando se muestran junto a llamadas a la acción más fuertes.
Un buen estilo secundario aporta jerarquía sin parecer deshabilitado. Revise los lugares en los que aparecen ambos tipos de botón juntos para asegurarse de que la acción principal siga siendo obvia.
Banners
Sección titulada «Banners»Los ajustes de banner controlan las grandes áreas de contenido promocional y con imagen de fondo, incluidos su fondo, borde, encabezado, icono, texto y tratamiento de superposición. Estas opciones tienen un fuerte impacto visual porque los banners suelen combinar texto con medios y aparecer en posiciones destacadas.
El texto del banner puede recurrir al color de texto del banner cuando no se establecen colores de texto más específicos, por lo que merece la pena comprobar banners con distintas combinaciones de contenido. El color, el degradado y la opacidad de la superposición ayudan a mantener la legibilidad sobre las imágenes sin impedir que se vea el medio.
Establezca las superposiciones de banner en función de las imágenes reales que use. Una superposición que funciona bien en una imagen oscura puede resultar demasiado débil en una clara o recargada.
Tarjetas
Sección titulada «Tarjetas»Los ajustes de tarjeta definen superficies de contenido más pequeñas que se usan en cuadrículas y áreas de contenido de apoyo. Úselos para separar el contenido agrupado del fondo de la página circundante, manteniendo al mismo tiempo la coherencia de la paleta general.
Si las tarjetas aparecen sobre fondos alternativos, asegúrese de que el fondo y el borde de la tarjeta sigan creando suficiente separación visual. Los colores del encabezado y del texto de la tarjeta deben seguir siendo fáciles de leer de un vistazo en diseños densos.
Los colores de los iconos afectan a pequeñas pistas de interfaz en la navegación, las acciones y la UI de apoyo. Los estados hover e inactivo ayudan a comunicar la interacción y la jerarquía sin depender solo de las etiquetas de texto.
Mantenga los iconos inactivos apagados, pero aún reconocibles. Si son demasiado tenues, los controles útiles pueden parecer no estar disponibles o pasar desapercibidos por completo.
Entradas
Sección titulada «Entradas»Los colores de las entradas moldean el aspecto de los formularios en las áreas de búsqueda y de formularios orientados al cliente. El texto de marcador de posición debe ser más suave que el texto introducido, pero seguir siendo lo bastante legible como para guiar a las personas antes de que empiecen a escribir.
Los fondos y bordes de los campos deben hacer que las entradas sean fáciles de detectar sobre la página. Si se confunden con el diseño circundante, los formularios pueden resultar más difíciles de usar.
Estos controles cubren detalles compartidos de la interfaz que aparecen en muchos lugares. El color del borde ayuda a definir la estructura, el color de la superposición de página afecta a estados de superposición de página completa como las vistas de menú activo, búsqueda o mini carrito, y el color del precio rebajado destaca los precios con descuento.
Use moderación aquí. Los bordes deben organizar el contenido sin añadir ruido visual, las superposiciones deben oscurecer la página sin perjudicar la legibilidad del primer plano, y el precio rebajado debe destacar sin chocar con los colores de sus acciones.
Muestras
Sección titulada «Muestras»Las muestras personalizadas le permiten asociar nombres de opción con valores de color específicos para que las muestras de variantes aparezcan con más precisión y coherencia. Esto resulta especialmente útil cuando los nombres de opción estándar no producen el color de muestra que desea.
Introduzca las definiciones de muestra en el formato esperado separado por comas para que los valores de opción puedan reconocerse correctamente. Para obtener orientación sobre el formato y detalles relacionados con variantes, consulte documentación de Company XYZ sobre variantes de producto.
Notas de uso
Sección titulada «Notas de uso»- Configure primero las superficies. Elija los fondos del cuerpo y el alternativo antes de ajustar el texto, los botones y las tarjetas para que las decisiones de contraste se mantengan coherentes.
- Compruebe el contraste en todas partes. Revise el texto, los enlaces, los botones y los campos de formulario sobre cada fondo principal para detectar problemas de legibilidad cuanto antes.
- Mantenga clara la jerarquía de botones. Haga que los botones primarios sean notablemente más fuertes que los secundarios para que la acción principal sea siempre fácil de identificar.
- Pruebe los banners con medios reales. Vuelva a comprobar el texto del banner y la opacidad de la superposición en las imágenes reales que planea usar, no en material de marcador de posición.
- Revise los efectos secundarios globales. Después de cambiar colores compartidos como bordes, superposiciones o iconos, examine las plantillas clave para asegurarse de que la actualización siga funcionando en todo el tema.
- Revise ambos viewports. Los controles de color de escritorio y móvil pueden afectar de forma distinta al diseño, la alineación, la visibilidad y el tratamiento de los medios, así que compruebe ambos tamaños después de hacer cambios.
- Use las anulaciones de forma deliberada. Los valores en blanco o con estilo predeterminado suelen mantener intacto el estilo alternativo, mientras que los colores, degradados o elecciones de medios explícitos hacen que la sección sea más autónoma.
- Vuelva a comprobar las áreas con muchos medios. Cuando los medios de escritorio y móviles se configuran por separado, confirme el recorte, la carga, la apariencia de reserva y la legibilidad del texto en cada versión.