Correcto
Ajustes de color
Defina colores personalizados de texto, encabezado, borde e icono para una zona específica del tema.
Use estos ajustes para dar a una zona específica del tema su propio tratamiento de color de primer plano en la documentación de Shopify sobre el editor de temas. Anulan los colores más amplios del tema, lo que resulta útil cuando una zona destacada, promocional o con mucho contenido necesita mejor contraste o un aspecto más adaptado.
Para una referencia general sobre cómo funcionan estas anulaciones, consulte Referencia de ajustes de color.
Anulaciones de color
Sección titulada «Anulaciones de color»Este grupo controla los colores que se usan para bordes, iconos, encabezados, subencabezados y texto del cuerpo. En lugar de cambiar la paleta de toda la tienda, puede ajustar con precisión cómo se presenta el contenido en una zona para que se vea más claro, más equilibrado o más diferenciado.
Use las anulaciones cuando cambie el fondo circundante, cuando una campaña necesite un acento de marca o cuando los colores predeterminados no ofrezcan suficiente separación entre los niveles de contenido. Si una zona ya se lee bien con su paleta principal, por lo general es mejor dejar estos ajustes sin tocar.
Estos ajustes anulan las opciones de color del tema más amplias para la zona en la que se aplican. Úselos de forma intencionada para que las zonas personalizadas parezcan deliberadas y no visualmente desconectadas.
Creación de una jerarquía de texto clara
Sección titulada «Creación de una jerarquía de texto clara»Los colores de encabezado, subencabezado y texto deben funcionar juntos para guiar la vista. Mantenga el contraste más fuerte para el texto más importante, use un color fiable para el cuerpo del texto y elija un tono de apoyo más suave para los subencabezados solo si sigue siendo fácil de leer.
Si todos los colores del texto son demasiado parecidos, el contenido puede parecer plano. Si son demasiado distintos, el diseño puede verse disperso. Procure una jerarquía sencilla que se mantenga coherente en zonas de contenido similares.
Uso adecuado de bordes e iconos
Sección titulada «Uso adecuado de bordes e iconos»Los bordes y los iconos suelen funcionar mejor como elementos de apoyo. Los bordes pueden separar contenido, enmarcar tarjetas o añadir estructura, mientras que los colores de los iconos ayudan a reforzar pequeñas pistas sin competir con el mensaje principal.
Si los iconos aparecen dentro de formas contorneadas, asegúrese de que el color del icono y el color del borde del icono sigan estando coordinados. Un borde sutil puede verse pulido, pero si es demasiado tenue puede desaparecer sobre el fondo.
Elección de combinaciones legibles
Sección titulada «Elección de combinaciones legibles»Revise sus elecciones de color en conjunto, no un ajuste a la vez. Un color de encabezado que se ve fuerte por sí solo puede no combinar bien con un texto de subencabezado más suave o con líneas de borde claras una vez que se ensambla toda la zona.
Preste especial atención al contraste en textos más pequeños, iconos decorativos y bordes finos. Estos elementos suelen ser los primeros en volverse difíciles de ver cuando los colores son demasiado claros o tienen poco contraste.
Notas de uso
Sección titulada «Notas de uso»- Anule con un propósito. Use colores personalizados cuando una zona realmente necesite un tratamiento de primer plano distinto, no solo variación adicional.
- Proteja la legibilidad. Compruebe los encabezados, subencabezados, texto, iconos y bordes con el fondo real que se usa en esa zona.
- Revise ambos viewports. Los controles de escritorio y móvil pueden comportarse de forma distinta, así que confirme el layout, la alineación, la visibilidad y el comportamiento de los medios en ambos tamaños de pantalla.
- Tenga en cuenta el estilo de reserva. Los valores en blanco, transparentes o con estilo predeterminado suelen conservar el aspecto más amplio, mientras que los colores explícitos, los degradados o las anulaciones de medios hacen que la zona local sea más independiente.
- Trate los acentos como secundarios. Use los colores de borde e icono para apoyar la estructura y el énfasis sin desviar la atención del contenido.
- Revise con cuidado las opciones de medios. Cuando los medios de escritorio y móvil se configuran por separado, revise el recorte, la carga, el recurso de reserva y la legibilidad en ambas versiones.