- Hero con video
- Scroll animado
Qué hace especial
- Scroll animado
- Filtros de productos
- Carrito
- Buscador
- Carrusel
- Preguntas frecuentes
- Formulario demo
- Revelados al hacer scroll
- Ticker horizontal continuo
- Vuelo del producto al carrito
- Videos silenciosos con carga diferida
- prefers-reduced-motion respetado
Qué incluye
- Prompt para recrear y personalizar el diseño con IA.
- Código y archivos del sitio: imágenes, fuentes y licencias.
- Demo interactiva e instrucciones.
- Uso en sitios propios y proyectos finales de clientes.
Secciones y pantallas de la demo (13)
- Cabecera con menú y buscador
- Hero
- Ticker
- Rejilla de productos
- Promo dividida
- Manifiesto con video
- Tarjetas conoce más
- Preguntas frecuentes
- Membresía
- Catálogo con filtros
- Ficha de producto
- Carrito local
- Pie
Qué puedes personalizar
- Nombre, productos, precios y textos (ejemplos incluidos)
- Paleta verde tinta / salvia / marfil / tierra
- Tipografías (serif itálica + sans, con licencia web)
- Número de productos, filtros y bloques del inicio
Cómo empezar
- Copia el prompt y descarga los archivos.
- Llévalos a tu herramienta de IA y pide los cambios: marca, textos e imágenes.
- Revisa el resultado y publícalo en tu dominio.
Descarga el paquete y copia el prompt: tu herramienta de IA trabaja sobre sitio/ (tema Liquid + contenido de SAVIA). `npm ci`, `npm run build` y `npm start` generan y sirven el sitio original; `npm run verificar` lo compara archivo por archivo. Cambia textos, productos, precios e imágenes en content/ sin tocar el tema. La tienda no cobra ni gestiona pedidos hasta que conectes tu pasarela de pago.
El resultado depende de tu herramienta de IA y de los cambios que hagas. La demo muestra la dirección visual.
Detalles técnicos y requisitos
Requisitos
- Node.js 20 o superior y npm para generar el sitio (LiquidJS).
- Hosting estático; las funciones /api de contacto y newsletter son opcionales.
- Licencia web propia de Helvetica Now Display y Mazzard (tipografías comerciales del diseño) para publicarlo.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- Vite
- HTML, CSS y JavaScript
Implementadas en el paquete que descargas.
Tema Liquid (Shopify) generado a sitio estático con LiquidJS · HTML, CSS y JavaScript · Carrito en localStorage
Herramientas de IA sugeridas
ClaudeCodexv0Lovable
Compatibles con las instrucciones del diseño; no es una prueba registrada.
Compatibilidad probada: Sin prueba registrada todavía.
Paleta y tipografía
- Serif con itálica expresiva (titulares)
- Sans neutra (interfaz y párrafos)
Composición: Artboard 1440 · hero a sangre · rejilla de 3–4 tarjetas · catálogo con 9–10 productos por página
Licencia y versiones
Úsalo en sitios propios y en proyectos finales de clientes, incluido uso comercial. No revendas ni redistribuyas el prompt, los archivos ni el sitio como plantilla. Leer la licencia
Procedencia: Paquete v1.2.0: código y assets del sitio original aprobado (piloto-02-ecommerce.vercel.app): tema Liquid generado a estático con LiquidJS, fotos, packshots, vídeos y tipografías del original. Avisos en LICENCIAS-Y-AVISOS.md.
- Versión
- v1.2.0 · Publicado 28 oct 2026
- Versiones
- v1.2.0 · 2026-11-03 — Versión original aprobada (la de Vercel y el vídeo de la ficha): tema, contenido, assets y fuentes del sitio publicado; 170/170 archivos idénticos al original.
- v1.1.0 · 2026-10-30 — Paquete de código y assets: proyecto ejecutable, imágenes, tipografías y licencias (74 archivos). Prompt alineado con el paquete.
- v1.0.0 · 2026-10-29 — Publicación: preview en video de la demo Savia y prompt breve. Sin paquete descargable.