Categoría 3: Banners y medios de comunicación de héroes

22 indicaciones de Claude.AI creadas por expertos para crear banners y elementos multimedia de Shopify

Banner de héroe de imagen básica

Crea una sección de banner de héroe de Shopify que:

  • Muestra una imagen de fondo de ancho completo
  • Incluye un encabezado, un subencabezado y un único botón CTA.
  • Permite a los comerciantes configurar imágenes, textos y enlaces de botones en el editor de temas.
  • Es totalmente receptivo y accesible.
Salida Liquid, esquema JSON-T y CSS.

Banner de héroe de fondo de video

Construye un banner de héroe con:

  • Fondo de video MP4 o YouTube (reproducción automática, bucle, silenciado)
  • Superposición de texto y un botón de CTA
  • Imagen de respaldo móvil
  • Esquema para la carga de vídeo y personalización de superposiciones
Proporcionar Liquid, esquema JSON-T y CSS.

Estandarte de héroe de Parallax

Crea una sección de banner de héroe que:

  • Utiliza un efecto de desplazamiento de paralaje en la imagen de fondo.
  • Incluye encabezado, subtítulo y CTA
  • Permite a los comerciantes ajustar la velocidad de paralaje
Proporciona Liquid, esquema JSON-T, CSS y JavaScript.

Banner de héroe con múltiples CTA

Genera un banner de héroe para Shopify que:

  • Admite hasta 3 botones CTA personalizables
  • Permite a los comerciantes establecer textos de botones y enlaces únicos para cada uno
  • Es totalmente receptivo y accesible.
Proporcionar Liquid, esquema JSON-T y CSS.

Estandarte de héroe con temporizador de cuenta regresiva

Construye un banner de héroe que:

  • Cuenta con un temporizador de cuenta regresiva en tiempo real para promociones o ventas.
  • Los comerciantes pueden establecer la fecha/hora de finalización en el editor de temas.
  • Incluye encabezado, subtítulo y CTA
Proporciona Liquid, esquema JSON-T, JavaScript y CSS.

Banner de héroe animado

Crea un banner de héroe con:

  • Entrada de texto animado o CTA (desvanecimiento, deslizamiento, zoom)
  • Fondo animado opcional (GIF, vídeo o animación CSS)
  • Los comerciantes pueden controlar la velocidad y el estilo de la animación.
Proporciona Liquid, esquema JSON-T, CSS y JavaScript.

Banner de héroe de punto de acceso

Genere un banner de héroe con puntos de acceso interactivos que:

  • Permitir que los usuarios hagan clic o pasen el cursor para ver información del producto, enlaces rápidos o precios.
  • Cada punto de acceso es configurable en el editor de temas.
  • Funciona en computadoras de escritorio y dispositivos móviles.
Proporciona Liquid, esquema JSON-T, JavaScript y CSS.

Banner principal "Compra el look"

Crea un banner de héroe que:

  • Muestra un conjunto de productos o un atuendo seleccionado
  • Permite a los usuarios hacer clic en los elementos para ver detalles o agregarlos al carrito.
  • Incluye un CTA para comprar el look completo.
Proporciona Liquid, esquema JSON-T, JavaScript y CSS.

Banner de héroe con pestañas (elige tu modelo/variante)

Construye un banner de héroe donde:

  • Los clientes pueden alternar entre pestañas para ver diferentes variaciones de productos, modelos o colores.
  • Cada pestaña actualiza la imagen/video y el texto del banner.
  • Las pestañas se pueden personalizar en el editor de temas.
Proporciona Liquid, esquema JSON-T, JavaScript y CSS.

Banner de héroe con historia de marca

Crea una sección de banner de héroe que:

  • Incluye un espacio para una breve historia de marca o declaración de misión.
  • Incluye una imagen de fondo o un vídeo, un título y una CTA.
  • Los comerciantes pueden editar todo el texto y los medios en el editor de temas.
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con superposición de máscara

Generar un banner de héroe con:

  • Una máscara semitransparente opcional o una superposición de degradado sobre la imagen/vídeo
  • Los comerciantes pueden ajustar el color y la opacidad de la superposición.
  • Incluye encabezado, subtítulo y CTA
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con insignia de promoción

Construye un banner de héroe que:

  • Muestra una insignia personalizable (por ejemplo, "Venta flash", "Novedad")
  • La posición y el color de la insignia se pueden editar en la configuración del tema.
  • Incluye encabezado principal, subtítulo y CTA
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con prueba social

Crea una sección de banner de héroe que:

  • Muestra un testimonio, un fragmento de reseña o una superposición de insignia de confianza
  • Los comerciantes pueden editar el texto del testimonio y el autor.
  • Incluye encabezado, subtítulo y CTA
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con fondo degradado

Generar un banner de héroe que:

  • Utiliza un degradado CSS personalizable como fondo.
  • Incluye encabezado, subtítulo y CTA
  • Los comerciantes pueden establecer colores degradados en el editor de temas.
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con carrusel de productos

Construye un banner de héroe que:

  • Presenta un carrusel de imágenes de productos o productos destacados.
  • Incluye encabezado, subtítulo y CTA para cada diapositiva.
  • Los comerciantes pueden agregar o eliminar diapositivas en el editor de temas
Proporciona Liquid, esquema JSON-T, JavaScript y CSS.

Banner de héroe con fondo animado

Crea un banner de héroe con:

  • Un fondo animado (por ejemplo, formas, ondas o partículas en movimiento)
  • Texto superpuesto estático y CTA
  • Los comerciantes pueden ajustar el estilo y la velocidad de la animación.
Proporciona Liquid, esquema JSON-T, CSS y JavaScript.

Banner de héroe con tipografía adaptable

Generar un banner de héroe donde:

  • Los tamaños de fuente de los títulos y subtítulos se ajustan dinámicamente para dispositivos móviles, tabletas y computadoras de escritorio.
  • Los comerciantes pueden configurar la familia de fuentes y el peso en el editor de temas
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con mejoras de accesibilidad

Construye un banner de héroe que:

  • Asegura que todo el texto tenga suficiente contraste con el fondo.
  • Incluye etiquetas y roles ARIA para todos los elementos interactivos
  • Es totalmente navegable mediante teclado.
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con estilo de temporada

Crea una sección de banner de héroe que:

  • Cambia los colores de fondo, superposición o acento según la temporada o festividad actual.
  • Los comerciantes pueden programar previamente estilos de temporada en el editor de temas
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con soporte multilingüe

Generar un banner de héroe que:

  • Muestra texto y CTA en el idioma seleccionado por el cliente.
  • Extrae traducciones de metacampos o Shopify Markets
  • Incluye contenido de respaldo si falta la traducción
Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con enlace a la declaración de accesibilidad

Agregue un enlace de "Declaración de accesibilidad" al banner principal, editable en el editor de temas, lo que garantiza el cumplimiento y el fácil acceso para todos los usuarios.

Proporcionar Liquid, esquema JSON-T y CSS.

Banner de héroe con diseños personalizables

Crea una sección de banner de héroe que:

  • Permite a los comerciantes elegir el diseño (texto a la izquierda, al centro o a la derecha; CTA encima o debajo del texto)
  • Todas las opciones de diseño se pueden seleccionar en el editor de temas.
Proporcionar Liquid, esquema JSON-T y CSS.

Modo de empleo:

  • Copia cualquier mensaje en Claude.AI 3.7
  • Añade tu marca o requisitos especiales
  • Pegue el código generado en su editor de temas de Shopify
  • Personalice utilizando los campos de esquema proporcionados en el Editor de temas de Shopify
¡Mensaje copiado al portapapeles!