Ajustes de encabezado
Use estos ajustes para crear una introducción clara para las áreas de contenido en todo el tema. Un encabezado bien estructurado ayuda a los visitantes a entender qué viene después, mejora la exploración y da al contenido importante una introducción visual y semántica más sólida. Para una visión general más amplia de cómo se organiza el contenido del tema, consulte documentación de Shopify sobre secciones y bloques
Contenido del encabezado
Sección titulada «Contenido del encabezado»Este grupo controla la pila de texto en la parte superior de un área de contenido: alineación, un icono opcional, un subtítulo, el encabezado principal y el texto de apoyo. Los encabezados más sólidos suelen mantenerse centrados en una sola idea, con cada elemento desempeñando una función distinta en lugar de repetir el mismo mensaje.
Elija la alineación del texto según el estilo del contenido que lo rodea. La alineación centrada se adapta bien a diseños promocionales o editoriales, mientras que la alineación a la izquierda suele ser más fácil de leer cuando incluye texto de apoyo más extenso.
El campo de icono acepta un emoji o un nombre de icono. Úselo cuando una señal visual rápida ayude a contextualizar el mensaje, como un destacado de una característica o una etiqueta de contenido temática. Si parece decorativo en lugar de informativo, déjelo en blanco para un resultado más limpio. Para orientaciones sobre nombres de iconos, consulte Icons.
Use el subtítulo del encabezado como una etiqueta breve encima del encabezado principal. Funciona mejor para un contexto breve, como una categoría, una campaña o un tema de contenido.
El encabezado principal debe transmitir el mensaje principal. Manténgalo específico y descriptivo para que ayude tanto a los visitantes como a la estructura de la página. El tipo de encabezado le permite elegir cuán destacado y estructural debe ser ese encabezado.
Elija los niveles de encabezado según la estructura de la página, no solo por la apariencia. Reserve los encabezados de nivel más alto para los títulos más importantes, de modo que la página se mantenga bien organizada.
Use el subtítulo para un contexto de apoyo breve, una declaración de valor o una explicación concisa. Si el encabezado ya dice lo suficiente, un subtítulo conciso suele funcionar mejor que un párrafo largo.
Acción del botón
Sección titulada «Acción del botón»Puede añadir un botón opcional cuando el encabezado deba dar paso a un siguiente paso claro. Esto resulta útil cuando el contenido presenta algo accionable, como navegar, obtener más información o abrir un destino destacado. Para conocer los detalles de configuración en el editor, consulte documentación de Shopify sobre el editor de temas
Añada el texto del botón y un enlace juntos para que la acción resulte completa y clara. Si incluye un icono en el botón, este debe complementar la etiqueta en lugar de sustituirla. El campo de icono acepta emojis o nombres de iconos; para orientaciones sobre nombres, consulte Icons.
El estilo del botón controla cuánto peso visual recibe la acción. Los estilos más marcados funcionan bien cuando el botón es el siguiente paso principal, mientras que los estilos más ligeros ayudan a que el contenido siga siendo el protagonista.
El diseño del botón controla si el icono aparece junto a la etiqueta o por sí solo. Los botones solo con icono deben reservarse para casos en los que la acción sea inequívoca por el contexto circundante.
Puede colocar el botón encima o debajo del contenido de texto, con una posición móvil independiente si es necesario. Esto facilita mantener equilibrado el diseño de escritorio y, al mismo tiempo, ofrecer a los visitantes móviles un flujo de lectura más fluido.
Active la opción de botón móvil de ancho completo cuando quiera que la acción destaque más claramente en pantallas pequeñas. Esto resulta especialmente útil cuando tocar el botón es el objetivo principal.
Abrir un enlace en una nueva pestaña suele ser lo mejor para destinos externos o casos en los que no quiere que los visitantes pierdan su lugar. Para la navegación habitual, permanecer en la misma pestaña suele resultar más natural.
Notas de uso
Sección titulada «Notas de uso»- Mantenga el mensaje centrado. Use juntos el encabezado, el subtítulo y el subencabezado para introducir una idea clara en lugar de repetir el mismo texto en varios campos.
- Ajuste la jerarquía a la importancia. Elija un tipo de encabezado que se adapte a la estructura de la página para que el contenido importante destaque sin debilitar el orden general de encabezados.
- Use los iconos con intención. Añada iconos solo cuando ayuden a los visitantes a identificar el contenido o la acción más rápidamente.
- Haga explícitas las acciones de los botones. Combine un texto claro para el botón con un enlace relevante y evite depender solo de un icono, salvo que la acción sea obvia.
- Revise la presentación en móvil. Compruebe la alineación, la posición del botón y el comportamiento de ancho completo en pantallas pequeñas para que el encabezado siga siendo fácil de leer y tocar.
- Revise ambos diseños de vista. Si usa controles separados para escritorio y móvil, compruebe ambos tamaños para que la alineación, la visibilidad y el comportamiento de los medios sigan siendo intencionales.
- Mantenga los reemplazos con un propósito. Deje los valores predeterminados cuando quiera que el encabezado se integre con el área circundante; use colores o medios explícitos solo cuando quiera que el encabezado destaque por sí mismo.