Correcto
Banner de colección
Añada un banner promocional a la cuadrícula de colección con controles flexibles de medios, mensajes y color.
- Documentación de Shopify sobre secciones y bloques
- Documentación de Company XYZ sobre el bloque de banner de colección
- Documentación de Company XYZ sobre el uso de videos
- Google Material Icons
- Documentación de Company XYZ sobre iconos
- Documentación de Company XYZ sobre los ajustes de colores del banner
- Documentación de Shopify sobre la personalización de secciones
- Documentación de Company XYZ sobre los ajustes de visibilidad
Use este bloque para colocar un mensaje promocional directamente dentro de la cuadrícula de colección. Combina medios de fondo, contenido superpuesto, imágenes opcionales en primer plano y colores personalizados para que pueda crear campañas específicas de la colección que se sientan integradas con la navegación de productos.
Para una visión general más amplia de cómo funcionan los bloques del tema, consulte documentación de Shopify sobre secciones y bloques
Este bloque solo aparece cuando la colección tiene suficientes productos para incluirlo en la cuadrícula. Un banner grande necesita al menos 6 productos, y un banner pequeño necesita al menos 11 productos.
También puede usar la guía proporcionada por la fuente para obtener detalles adicionales: Banner de colección.
Ajustes básicos
Sección titulada «Ajustes básicos»El ajuste principal de tamaño controla cuánto espacio ocupa el banner dentro de la cuadrícula. Como solo se muestra un banner de cada tamaño, elija el tamaño con cuidado si planea usar más de un banner en la misma colección.
Use un banner Large cuando la promoción deba destacar claramente. Use Small cuando quiera un momento promocional más ligero que no compita tanto con las tarjetas de producto.
Fondo del banner
Sección titulada «Fondo del banner»Este grupo controla los medios detrás del contenido del banner. Puede usar una imagen o un video, con medios móviles separados cuando la versión de escritorio no se recorta bien en pantallas más pequeñas.
Si deja en blanco los campos de medios para móvil, se reutiliza el medio de fondo principal. Esto es útil para configuraciones simples, pero a menudo conviene usar recursos móviles separados cuando el texto o los puntos focales necesitan un encuadre más ajustado.
Ajuste de la imagen de fondo cambia cómo los fondos basados en imagen llenan el espacio disponible. Use un aspecto full-bleed cuando la imagen sea sobre todo atmosférica, y un ajuste contenido cuando toda la obra deba permanecer visible.
Para orientación sobre la configuración del video, consulte documentación de Company XYZ sobre el uso de video.
Primer plano del banner
Sección titulada «Primer plano del banner»Este grupo controla el contenido superpuesto sobre el fondo, incluida la alineación, el icono, el texto y la llamada a la acción principal. Cualquier campo que deje en blanco permanecerá oculto, lo que facilita crear desde una etiqueta minimalista hasta un mensaje promocional más completo.
La alineación horizontal y vertical le ayuda a posicionar el contenido alrededor del punto focal del medio de fondo. Si la imagen ya tiene un sujeto principal claro, coloque el texto en el espacio libre en lugar de centrar todo de forma predeterminada.
Puede añadir un icono con un emoji o con un nombre de icono compatible como referencia visual rápida. Esto funciona bien para campañas de temporada, mensajes por tiempo limitado o simples acentos de marca. La guía de iconos proporcionada por la fuente está disponible aquí: Google Material Icons y documentación de Company XYZ sobre iconos.
El heading, el caption y el subheading funcionan mejor con una jerarquía clara. Mantenga el heading conciso, use el caption para un contexto ligero y use el subheading solo cuando el texto adicional ayude a los clientes a entender la promoción.
Los ajustes del botón controlan el destino, el estilo, la ubicación del icono y el ancho en móvil. Si elige un estilo de enlace de bloque completo, el propio banner se convierte en el principal objetivo de clic.
Medios en primer plano del banner
Sección titulada «Medios en primer plano del banner»Este grupo añade una imagen opcional junto al contenido del primer plano. Es útil para logotipos, recortes de producto, insignias o material visual de apoyo que deba situarse encima del fondo en lugar de reemplazarlo.
El estilo de imagen cambia el tratamiento visual, mientras que el ajuste de ancho controla cuán dominante se percibe la imagen en el diseño. Los anchos más pequeños suelen funcionar mejor para logotipos, mientras que los anchos más grandes pueden admitir material visual de campañas llamativo.
También puede añadir un enlace independiente a la imagen del primer plano. Use esto con cuidado si el banner ya incluye un botón o un enlace de bloque completo, para que el bloque siga siendo predecible al interactuar con él.
Colores del banner
Sección titulada «Colores del banner»Estos ajustes anulan el estilo general del banner solo para este bloque. Son útiles cuando una campaña de colección necesita una paleta distintiva, un contraste más fuerte o una presentación más de marca que la que ofrece el estilo predeterminado.
Puede ajustar con precisión el fondo del banner, el borde, el texto, el icono, el heading, el subheading y el overlay. El color general del texto actúa como respaldo cuando no se establecen colores de texto más específicos.
El color y la opacidad del overlay son especialmente importantes cuando la imagen o el video de fondo compiten con el mensaje. Una menor opacidad hace que los medios sean más visibles, pero puede reducir rápidamente la legibilidad.
Para obtener más información sobre estos controles de color compartidos, use la referencia proporcionada por la fuente: documentación de Company XYZ sobre ajustes de color del banner.
Ajustes estándar del bloque
Sección titulada «Ajustes estándar del bloque»Ajustes de visibilidad
Sección titulada «Ajustes de visibilidad»Este grupo compartido controla si el bloque aparece en escritorio, móvil o en ambos. Es útil cuando quiere una mezcla de merchandising diferente en pantallas más pequeñas o necesita simplificar la cuadrícula en un tamaño de dispositivo.
Tenga cuidado al combinar reglas de visibilidad con el tamaño del banner y los requisitos de cantidad de productos, ya que la colección puede sentirse diferente entre dispositivos si el banner está oculto en un tamaño de pantalla. Para un comportamiento más amplio del editor, consulte documentación de Shopify sobre la personalización de secciones. La guía de visibilidad proporcionada por la fuente está aquí: documentación de Company XYZ sobre ajustes de visibilidad.
Notas de uso
Sección titulada «Notas de uso»- Compruebe el tamaño de la colección. Si el banner no aparece, confirme que la colección tenga suficientes productos para el tamaño de banner seleccionado.
- Mantenga clara la acción. Use un único destino principal siempre que sea posible para que el banner sea fácil de entender y pulsar.
- Diseñe pensando en el contraste. Equilibre los colores de medios, overlay y texto para que el mensaje siga siendo legible tanto en escritorio como en móvil.
- Use medios específicos para móvil cuando sea necesario. Sustituya por recursos móviles separados cuando el recorte de escritorio oculte contenido importante en pantallas más pequeñas.
- Revise ambos viewports. Los controles de escritorio y móvil pueden cambiar la alineación, la visibilidad y el comportamiento de los medios, así que revise el banner en ambos tamaños antes de publicarlo.
- Use el estilo de respaldo de forma intencional. Deje en blanco los colores y los medios cuando quiera que el bloque herede el aspecto circundante, y establezca anulaciones explícitas cuando el banner deba sentirse más independiente.