Carrusel de reseñas

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

Antes de generar el código, utiliza toda la información disponible sobre:

• Nombre de mi marca y producto.

• Público objetivo.

• Problemas y deseos del consumidor.

• Beneficios principales.
• Diferenciadores.
• Ángulo de venta.
• Branding, colores y tipografía.

• Personalidad y tono de comunicación.
• Research de mercado, si existe.
• Testimonios y reseñas reales previamente proporcionados.

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

No utilices nombres, productos ni elementos de otras marcas.

IMPORTANTE: Si ya existen reseñas auténticas en el proyecto, seleccioná cuatro. Si no existen, generá cuatro ejemplos ficticios claramente identificados como demostración, que deberán reemplazarse antes de publicar. No inventes compradores reales, valoraciones verificadas ni resultados de clientes.

Crear un bloque que muestre una sola reseña a la vez.

Cada reseña debe contener:

• Calificación con estrellas, únicamente si está respaldada por una valoración real.

• Comentario breve del cliente.

• Nombre o iniciales del cliente, si están disponibles.
• Cuatro pequeños puntos de navegación debajo.

Utilizar exactamente 4 reseñas.

Estilo de los comentarios

• Naturales y creíbles.

• Lenguaje propio del público objetivo.
• Entre 15 y 35 palabras aproximadamente.

• Centrados en experiencias concretas.
• Sin exageraciones.
• Sin lenguaje publicitario artificial.

• Sin resultados o beneficios inventados.

Cada reseña debe comunicar un aspecto diferente del producto.

No repetir el mismo argumento cuatro veces.

El carrusel debe adaptarse automáticamente al branding de mi marca.

Características:

• Diseño minimalista y premium.
• Contenedor compacto.

• Fondo blanco o un tono muy suave de la paleta de marca.

• Borde sutil, si corresponde.
• Esquinas ligeramente redondeadas.

• Estrellas y puntos activos en el color de acento de la marca.
• Tipografía heredada del tema Shopify.

• Texto oscuro y legible.
• Autor en semibold.
• Espaciado equilibrado.
• Sin sombras exageradas.
• Sin fotografías genéricas.
• Sin íconos decorativos innecesarios.

Debe parecer una parte nativa de mi tienda, no un widget externo.

REQUISITO OBLIGATORIO: AUTOPLAY CADA 4 SEGUNDOS.

El carrusel debe:

1. Mostrar inicialmente la primera reseña.
2. Cambiar automáticamente a la siguiente cada 4000 milisegundos.
3. Utilizar una transición suave de opacidad.
4. Volver a la primera después de la cuarta.
5. Repetirse indefinidamente mientras la página esté activa.
6. Permitir seleccionar manualmente una reseña mediante los puntos inferiores.
7. Reiniciar el contador después de una selección manual.
8. Pausar el autoplay cuando el usuario coloque el cursor sobre el carrusel.
9. Reanudarlo cuando retire el cursor.
10. Pausarse cuando la pestaña del navegador no esté visible.
11. Respetar la preferencia del usuario de movimiento reducido.

El carrusel no debe provocar saltos bruscos de altura ni desplazamientos horizontales.

MUY IMPORTANTE:

Entregá un único bloque de código completo en:

HTML + CSS + JavaScript

Listo para pegar directamente en:

Shopify → Personalizar tema → Agregar bloque → Liquid personalizado.

El código debe incluir:

• HTML completo de las cuatro reseñas.
• CSS dentro de etiquetas <style>.
• JavaScript dentro de etiquetas <script>.
• Toda la lógica del autoplay.

• Puntos de navegación funcionales.
• Estilos responsive.

Requisitos técnicos

• Utilizar clases CSS específicas y encapsuladas para evitar conflictos con el tema.

• No utilizar librerías externas.
• No utilizar dependencias adicionales.

• No modificar otros elementos de Shopify.
• No modificar el selector de bundles.

• No utilizar archivos externos.
• Evitar inicializaciones duplicadas.

• Permitir que el bloque funcione en el editor de Shopify, incluyendo cuando se recargan secciones.
• Mantener el contenido legible aunque JavaScript no se ejecute.
• Evitar múltiples temporizadores activos al reinicializar el carrusel.
• Asegurar que los controles sean accesibles mediante teclado.
• Mantener el código organizado y listo para producción.

CRÍTICO: No entregues CSS o JavaScript aislados. Todo debe estar incluido en un único código completo que Shopify pueda interpretar correctamente.

El carrusel debe estar optimizado principalmente para celulares.

• Ancho del 100% del contenedor disponible.

• Padding compacto.

• Texto entre 12 y 14 px.
• Autor entre 12 y 13 px.

• Estrellas pequeñas.
• Puntos de navegación discretos.

• Altura estable durante las transiciones.

• Sin desbordamientos.
• Sin scroll horizontal.

• Sin ocupar demasiado espacio antes del botón de compra.

En desktop debe mantener la misma estética, adaptándose al ancho disponible.

El objetivo del carrusel es aportar confianza sin distraer de la compra.

Por eso:

• No agregar títulos gigantes.
• No agregar botones adicionales.
• No agregar enlaces externos.
• No utilizar animaciones llamativas.
• No saturar de elementos.

• Priorizar experiencias concretas de clientes reales.

• Mantener una lectura rápida.

El bloque debe integrarse naturalmente dentro del hero de producto.