Hero + 4 beneficios

Ya estamos trabajando en una marca dentro de este chat o proyecto.

Utiliza toda la información disponible sobre:

• Mi marca y producto.
• Mi público objetivo.
• El problema que resuelve.
• Sus principales beneficios.
• Diferenciadores y características.
• Ángulo de venta principal.

• Research de mercado, si existe.

• Branding, colores y tipografías.
• Tono de comunicación.

• Objeciones y deseos del consumidor.

No me pidas información que ya conocés.

No utilices textos genéricos ni ejemplos de otras marcas.

Si falta información, utilizá únicamente lo que puedas confirmar del contexto. No inventes atributos.

El bloque debe tener exactamente dos partes.

PARTE A — Descripción persuasiva

Redactá un párrafo de aproximadamente 30 a 50 palabras que explique:

1. Qué es el producto.
2. Qué beneficio principal ofrece.
3. Qué lo diferencia de otras alternativas.

Utilizá negritas estratégicas para destacar las 2 o 3 ideas comerciales más importantes.

Estilo de redacción:

• Directo y natural.
• Comercial, sin exageraciones.
• Fácil de leer.
• Sin titulares enormes.
• Sin emojis.
• Sin promesas no verificadas.

Debe parecer una descripción editorial premium, no un anuncio saturado.

PARTE B — 4 beneficios con íconos

Debajo del párrafo, agregá exactamente 4 claims comerciales.

Cada uno debe contener:

• Un ícono SVG minimalista a la izquierda.
• Un texto breve a la derecha.
• Entre 2 y 6 palabras por beneficio.

Seleccioná los cuatro argumentos más importantes para la decisión de compra.

Pueden ser beneficios, características, diferenciales o ventajas de uso.

REGLA DE DISEÑO OBLIGATORIA:

Los cuatro beneficios deben aparecer UNO DEBAJO DEL OTRO.

Una sola columna vertical.

Todos alineados a la izquierda.

No utilizar una grilla 2x2, ni distribuir los beneficios horizontalmente.

No utilizar tarjetas, bordes, fondos de colores, círculos decorativos ni sombras.

El diseño debe adaptarse automáticamente a la identidad visual de mi marca.

• Utilizar el color principal o de acento de mi branding para los íconos.

• Texto oscuro, legible.

• Tipografía heredada del tema Shopify.

• Negritas moderadas.
• Espaciados equilibrados.

• Íconos SVG profesionales de trazo uniforme.
• Diseño minimalista, editorial y premium.
• Compatible con desktop y mobile.

El bloque debe integrarse naturalmente con el diseño actual de mi tienda, sin parecer una sección externa.

Entregá UN ÚNICO CÓDIGO COMPLETO EN HTML + CSS, listo para copiar y pegar directamente en el campo:

Shopify → Personalizar tema → Liquid personalizado (Custom Liquid).

Este punto es fundamental.

NO entregues CSS aislado.

NO entregues únicamente clases CSS.

NO entregues solamente HTML sin estilos.

El código debe incluir:

1. El HTML completo del párrafo y los cuatro beneficios.
2. Los cuatro íconos SVG inline, dentro de su correspondiente HTML.
3. Una etiqueta <style> que contenga todo el CSS necesario.
4. Media queries para adaptar el diseño a celulares.

Requisitos técnicos

• Utilizar clases CSS específicas y encapsuladas para evitar conflictos con el tema.
• Utilizar Flexbox con flex-direction: column para los cuatro beneficios.

• No utilizar JavaScript.
• No utilizar librerías externas.

• No utilizar emojis como íconos.
• No depender de archivos adicionales.
• No modificar otras secciones del tema.

• No crear botones adicionales.

• No modificar el selector de bundles.
• No utilizar etiquetas Liquid innecesarias.

CRÍTICO:

El código debe funcionar al pegarlo directamente en el campo Liquid personalizado de Shopify.

Nunca debe mostrarse código CSS como texto visible en la tienda.

Para evitarlo, todo el CSS debe estar correctamente encerrado entre las etiquetas <style> y </style>.

Verificá mentalmente la estructura y sintaxis del código antes de entregarlo.

En dispositivos móviles:

• Mantener los cuatro beneficios en una única columna vertical.
• Mantener todos los íconos alineados.
• Texto del párrafo entre 14 y 15 px aproximadamente.
• Claims entre 13 y 14 px.
• Íconos entre 20 y 24 px.
• Espaciado vertical de 10 a 12 px.

• Evitar desbordamientos horizontales.

• No generar espacios excesivos antes de los bundles.

En desktop, conservar la misma estructura vertical, ajustando únicamente tamaños y espaciados si es necesario.

Los beneficios deben ser específicos de mi producto.

No inventes:

• Resultados.
• Estadísticas.
• Certificaciones.
• Ingredientes.
• Propiedades.
• Garantías.
• Promesas comerciales.

No repitas el mismo argumento en los cuatro claims.

Priorizá los beneficios que mejor respondan a la pregunta:

¿Por qué debería elegir este producto?