Hero

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre el uso de vídeo
3. Documentación de Company XYZ sobre ajustes de colores
4. Documentación de Company XYZ sobre Heading
5. Documentación de Company XYZ sobre el bloque Rich text
6. Documentación de Company XYZ sobre el bloque Button
7. Documentación de Company XYZ sobre el bloque Breadcrumbs
8. Documentación de Company XYZ sobre el bloque Icon with text
9. Documentación de Company XYZ sobre el bloque Image
10. Documentación de Company XYZ sobre el bloque Search
11. Documentación de Company XYZ sobre el bloque Separator
12. Documentación de Company XYZ sobre el bloque Share/print UI
13. Documentación de Company XYZ sobre el bloque Video
14. Documentación de Shopify sobre el editor de temas
15. Documentación de Company XYZ sobre ajustes de espaciado de sección
16. Documentación de Company XYZ sobre ajustes de separadores
17. Documentación de Company XYZ sobre ajustes de visibilidad
18. Documentación de Company XYZ sobre ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: personalización de tu tienda

Vídeo de Shopify Academy: personalización de tu tienda

Hero es una sección de banner flexible basada en bloques y diseñada para una introducción sólida de la página. Puede combinar contenido, acciones, elementos de utilidad y medios, y luego definir la presentación general con imágenes a nivel de sección, colores de superposición, espaciado y controles de ancho. Para obtener una visión general más amplia de cómo se organiza el contenido editable del tema, consulte documentación de Shopify sobre secciones y bloques

Ajustes de imagen

Este grupo controla el tratamiento visual principal del hero. Puede colocar la imagen destacada detrás del contenido, situarla a la izquierda o a la derecha, o eliminar por completo la imagen de la sección cuando los bloques deban llevar el diseño por sí solos.

Una imagen móvil independiente le ayuda a conservar la composición en pantallas más pequeñas. Si no añade una, en móvil se usa la imagen destacada principal.

También puede usar un video destacado para una presentación más inmersiva. Como se reproduce automáticamente sin sonido, funciona mejor como apoyo visual ambiental que como contenido que depende del audio. Para orientación sobre video, consulte documentación de Company XYZ sobre el uso de video.

Si el texto se sitúa sobre contenido de imagen o video, use los ajustes de superposición para proteger la legibilidad. Los medios recargados suelen necesitar una superposición más fuerte que una imagen simple o de bajo contraste.

Ajustes de color

Estos ajustes anulan solo para esta sección las opciones de color más amplias. Úselos cuando el hero necesite su propio icono, encabezado, texto o tratamiento de superposición sin afectar al resto de la página.

El color, el degradado y la opacidad de la superposición son los controles más importantes cuando el contenido aparece sobre medios. Aumente la intensidad de la superposición cuando el mensaje sea difícil de leer y redúzcala cuando el medio deba permanecer más visible. Para el comportamiento compartido del color, consulte documentación de Company XYZ sobre ajustes de color.

Tipos de bloque admitidos

1. Breadcrumbs
2. Button
3. Heading
4. Icon with text
5. Image
6. Rich text
7. Search
8. Separator
9. Share/print UI
10. Video

Tipos de bloque

Encabezado

Use el bloque Heading para el mensaje principal del hero o un título de apoyo. Incluye nivel de encabezado, alineación, icono opcional y controles de color a nivel de bloque. Consulte Encabezado.

Mantenga el texto breve y directo. En la mayoría de las páginas, un encabezado destacado combinado con un bloque de texto breve es más fácil de leer de un vistazo que apilar varios encabezados grandes.

Precaución

Evite usar varios encabezados H1 en la misma página. Reserve el nivel de encabezado más alto para el título principal de la página cuando sea necesario.

Texto enriquecido

Use Rich text para texto de apoyo, introducciones breves, texto enlazado o contenido explicativo breve debajo del encabezado principal. Consulte Texto enriquecido.

Los párrafos breves suelen funcionar mejor en un hero. Si añade un color de fondo al bloque, compruebe que siga resultando equilibrado frente a los medios y la superposición de la sección.

Botón

Use los bloques Button para acciones principales como comprar, explorar una colección o avanzar más en la página. Puede controlar el estilo, la disposición del icono, la alineación y el comportamiento del ancho en móvil. Consulte Botón.

La mayoría de los diseños de hero funcionan mejor con una acción principal. Añada botones adicionales solo cuando respalden una ruta secundaria clara.

Migas de pan

Breadcrumbs ayuda a los visitantes a entender su ubicación dentro de estructuras de página más profundas. En esta sección, normalmente se sitúa encima del mensaje principal y aporta contexto sin dominar el diseño. Consulte Migas de pan.

Use el enlace principal opcional cuando la ruta predeterminada necesite una jerarquía más clara. Mantenga un estilo sobrio para que el mensaje del hero siga siendo el protagonista.

Icono con texto

Use Icon with text para puntos de valor breves, indicadores de confianza o destacados concisos. Consulte Icono con texto.

Estos bloques funcionan mejor cuando cada elemento tiene una longitud y un tono similares. Mantenga el texto breve para que el grupo sea fácil de revisar de un vistazo.

Imagen

El bloque Image añade medios independientes dentro del flujo de contenido, separados de la imagen destacada a nivel de sección. Esto resulta útil para logotipos, recortes de producto, creatividades de campaña o elementos visuales de apoyo. Consulte Imagen.

Use su relación de aspecto, ancho máximo, leyenda y opciones de superposición para que la imagen parezca intencional dentro del hero. Si ya utiliza medios potentes a nivel de sección, evite añadir otra imagen que compita por la atención.

Búsqueda

El bloque Search convierte el hero en un punto de entrada centrado en la búsqueda. Funciona especialmente bien para catálogos grandes, páginas de ayuda o páginas de inicio en las que los visitantes suelen empezar buscando. Consulte Búsqueda.

Este bloque también incluye sus propios ajustes de contenido y presentación de resultados al estilo de banner, por lo que puede convertirse en el elemento focal principal. Mantenga el contenido cercano del hero al mínimo cuando la búsqueda sea la tarea principal.

Nota

Los resultados predictivos solo se aplican cuando la configuración necesaria de búsqueda predictiva está activa. Si esa configuración no está implementada, las opciones de visualización relacionadas no afectarán a la experiencia.

Separador

Use bloques Separator para añadir espacio entre los elementos del hero. Son útiles cuando necesita más espaciado interno sin cambiar el padding superior e inferior general de la sección. Consulte Separador.

Incluso con una altura mínima, queda un pequeño espacio entre los elementos. Use este bloque para una separación intencional en lugar de intentar crear una pila sin espacio.

UI de compartir/imprimir

Este bloque añade acciones compactas para compartir e imprimir cerca de la parte superior de la página. Resulta más útil en diseños editoriales, de guía o centrados en la utilidad, donde esas acciones importan pronto. Consulte UI de compartir/imprimir.

Colóquelo donde resulte accesible pero no distraiga. Debe apoyar al hero, no competir con la llamada a la acción principal.

Video

El bloque Video coloca el video directamente en el flujo de bloques, lo que resulta útil cuando el video en sí forma parte del mensaje y no solo de un tratamiento de fondo. Admite subtítulos, superposiciones, reproducción automática, imágenes de póster, límites de ancho y relaciones de aspecto responsivas. Consulte documentación de Company XYZ sobre el bloque Video.

Los clips cortos suelen rendir mejor en este espacio. Si usa reproducción automática o superposiciones, pruebe tanto el estado en pausa como el de reproducción para que los subtítulos y los controles sigan siendo claros.

Ajustes estándar de sección

Para los controles del editor que se aplican en todas las secciones, consulte documentación de Shopify sobre el editor de temas

Ajustes de padding

Ajustes de padding controlan el espacio por encima y por debajo del contenido del hero en escritorio y móvil. En esta sección, el padding afecta en gran medida a lo destacado e inmersivo que resulta el hero antes de que los visitantes lleguen a la siguiente sección.

Use más padding cuando el hero deba transmitir una sensación de campaña o amplitud. Redúzcalo cuando el contenido sea breve o cuando quiera un acceso más rápido a la página que aparece debajo.

Ajustes de separador

Ajustes de separador añaden líneas opcionales en el borde superior o inferior de la sección. Ayudan a definir el hero con más claridad cuando las secciones adyacentes tienen colores o peso visual similares.

Si deja transparente el color del separador, se usa el comportamiento estándar del color del borde. Los separadores sutiles suelen funcionar mejor cuando el hero ya tiene una imagen potente o contraste.

Ajustes de visibilidad

Ajustes de visibilidad le permiten ocultar la sección en escritorio o móvil. Esto es útil cuando desea diseños distintos en la parte superior de la página para tamaños de pantalla diferentes.

Úselo con cuidado si crea versiones alternativas del mismo mensaje. El objetivo es adaptar el diseño, no duplicar contenido innecesariamente.

Ajustes de ancho

Ajustes de ancho controlan el ancho máximo del contenido y el ancho externo de la sección. En Hero, esto afecta tanto a la legibilidad del texto como a la amplitud que transmite cualquier tratamiento de fondo.

El ancho del contenido es el principal control de legibilidad. El ancho de la sección importa más al usar medios de fondo o cuando quiere que el contenedor del hero resulte más contenido o más amplio.

Consejos de uso

1. Mantenga el mensaje centrado. Use un encabezado claro, texto de apoyo breve y una acción principal para que el hero se entienda con rapidez de un vistazo.
2. Elija la colocación de los medios de forma intencional. Los medios de fondo son adecuados para imágenes atmosféricas, mientras que la colocación a la izquierda o a la derecha funciona mejor cuando la imagen necesita más espacio dedicado.
3. Planifique el móvil por separado. Añada una imagen específica para móvil cuando el recorte de escritorio no se adapte bien, y revise el ancho y la alineación del botón en pantallas más pequeñas.
4. Revise ambos estados para la búsqueda. El hero puede sentirse distinto antes y después de una consulta, así que compruebe el estado vacío y el estado con consulta escrita para confirmar que el contenido correcto siga siendo destacado.
5. Compruebe el comportamiento responsivo. Los controles de escritorio y móvil pueden cambiar la alineación, la visibilidad y la presentación de los medios, así que previsualice ambos viewports antes de publicar.
6. Proteja el contraste del texto. Ajuste el color y la opacidad de la superposición antes de cambiar todos los colores del contenido, especialmente al usar imágenes recargadas o video con reproducción automática.
7. Previsualice los cambios de ancho en la página publicada. Los diseños anchos y full-bleed pueden sentirse muy distintos fuera del editor, especialmente cuando el hero se sitúa en la parte superior de una página.