Landing premium para una marca de shots naturales Cold Press
QORI vendía sus zumos prensados en frío por WhatsApp e Instagram, sin un escaparate propio a la altura del producto. Le construimos una landing de una sola página que transmite el concepto "oro de la tierra" y convierte la visita en pedido directo, sin intermediarios.
Un producto artesanal que merecía un escaparate a su altura
QORI —"oro" en quechua— es la marca de shots naturales Cold Press que Rocío elabora artesanalmente en Granollers. Tres referencias de 60 ml, prensadas en frío, 100% vegetales, sin conservantes ni azúcares añadidos: Golden Defense (jengibre y cúrcuma), Green Detox y Red Power. Un producto premium, con una historia y un cuidado que hasta entonces solo se veían en persona.
El cliente ya vendía y tenía comunidad en Instagram, pero toda la venta pasaba por el chat: un DM, un WhatsApp, una foto de producción. No había una web propia que contara la marca, explicara los planes y transmitiera la calidad antes de que alguien preguntara el precio.
El encargo fue construir esa pieza que faltaba: una landing que hiciera de escaparate, argumentario y canal de pedido a la vez, sin traicionar el tono elegante y natural de QORI cayendo en la estética de fitness agresivo.
El producto ya era premium. Nuestro trabajo fue que la web se pareciera al producto, no a una tienda cualquiera.
Vender premium sin un escaparate premium
Vender un producto artesanal exclusivamente por chat tiene techo: cada venta arranca de cero, sin un sitio donde la marca hable por sí sola.
Sin web propia: toda la conversión dependía de DMs de Instagram y WhatsApp, sin una página que explicara producto, planes y filosofía.
El producto no se "veía": la calidad del prensado en frío y el mimo artesanal se perdían en fotos sueltas de chat, imposibles de convertir en argumento de venta.
Planes poco claros: los packs (Descubre, Impulso, Equilibrio, Transformación) necesitaban un lugar donde compararse de un vistazo.
Riesgo de tono equivocado: el sector "detox/salud" está lleno de estética agresiva de gimnasio, muy lejos del carácter cálido y elegante de QORI.
Una sola página que cuenta la marca y cierra el pedido
Decidimos una landing de página única, pensada para leerse de un tirón en el móvil. El hilo conductor fue un concepto propio, "oro de la tierra — cuaderno botánico", que da a la web un aire artesanal y natural sin caer en el cliché saludable.
Cada bloque empuja hacia el mismo sitio: entender el producto, elegir un plan y pedirlo por WhatsApp. El producto es el protagonista visual de principio a fin.
Producto a sangre
Fotografía de los tres shots a pantalla completa, tratada para transmitir el color y la textura del prensado en frío.
Parallax de producto
En cada referencia la foto queda fija (sticky) mientras el texto avanza: un efecto de scroll que da sensación de marca cuidada sin librerías pesadas.
Concepto propio
Dirección "oro de la tierra / cuaderno botánico": paleta dorada, tipografía con carácter y tono cálido, lejos del fitness agresivo.
Pedido por WhatsApp
Cada plan enlaza a un mensaje de WhatsApp prerredactado: el camino más corto entre el interés y la venta real.
Mobile-first
Diseñada primero para el móvil, que es donde vive la comunidad de Instagram de la marca.
SEO local
Optimizada para búsquedas de shots y zumos naturales en Granollers y alrededores.
Así quedó QORI
Oro de la tierra, no gimnasio
La dirección de arte se construyó alrededor de una idea: que la web oliera a producto natural y artesanal. Trabajamos una paleta dorada cálida sobre fondo crema, con tipografía serif elegante para los titulares.
Todos los textos de producto se pusieron íntegros tal como los facilitó el cliente, sin reescribirlos con jerga de marketing: el tono de la marca lo pone Rocío, nosotros lo enmarcamos.
Moodboard "oro de la tierra"
Referencias de cuaderno botánico y producto natural premium; paleta dorado #B8892E sobre crema #FAF7F2, con un color propio por shot (oliva, dorado, granate).
Tipografía con carácter
Cormorant Garamond para los titulares (elegancia editorial) y Poppins para el cuerpo (limpieza y legibilidad en móvil).
Jerarquía hacia el pedido
Cada sección empuja al siguiente paso: conocer el shot, ver cómo tomarlo, elegir plan, pedir por WhatsApp.
Microinteracción parallax
Foto de producto en position:sticky mientras el texto sube: sensación de detalle sin coste de rendimiento.
Responsive
Adaptación completa a móvil, tablet y escritorio con verificación pixel a pixel.
Ligera por decisión, con un truco de parallax
La web se desarrolló en HTML, CSS y JavaScript, sin CMS: una landing no necesita el peso de WordPress y sí necesita cargar rápido y no dar problemas de mantenimiento.
El único reto técnico serio fue el parallax de producto, que exigió cuidar el comportamiento del scroll para que la foto se quedara fija sin romper la maqueta.
Front-end vanilla (HTML5, CSS3, JavaScript) sin dependencias, para máxima velocidad y estabilidad.
Parallax con position:sticky: para que funcionara sin cortes usamos overflow-x:clip en el body (no hidden) y overflow:visible en las secciones de producto.
Imágenes optimizadas en formatos modernos con carga diferida, clave con fotografía de producto de alta calidad.
LiteSpeed + Cloudflare para caché en el borde y entrega rápida.
Datos estructurados Schema.org (Product, LocalBusiness) para que Google entienda producto y ubicación.
Accesibilidad: contraste cuidado, textos alternativos y navegación por teclado.
Que se encuentre a QORI por lo que es
Una marca joven de producto tiene que ganar visibilidad por su categoría y su zona. Trabajamos el SEO local alrededor de los shots y zumos naturales en Granollers, y preparamos el contenido para los buscadores generativos, que ya recomiendan marcas de nicho directamente.
El objetivo GEO fue claro: que una IA pueda responder "qué es QORI, qué shots ofrece y cómo comprarlos" con la información de la propia web.
Keyword research alrededor de "shots naturales", "zumos prensados en frío" y "cold press Granollers".
SEO on-page con títulos, encabezados y descripciones orientados a producto e intención local.
Schema.org Product / LocalBusiness para datos ricos en Google.
Core Web Vitals en verde: al ser una landing ligera, la velocidad juega a favor del ranking.
Optimización GEO/EEAT: contenido claro sobre qué es cada shot, ingredientes y elaboración, citable por Google AI Overviews, ChatGPT, Gemini, Claude y Perplexity.
De vender por chat a tener escaparate propio
QORI pasó de depender del DM a tener una landing que presenta la marca, explica los planes y canaliza el pedido por WhatsApp con un solo toque.
El resultado es una pieza que trabaja sola: cuenta la historia, transmite la calidad del producto y deja el camino de compra despejado, reforzando la imagen premium de la marca.
La landing en todos los dispositivos
El stack de este proyecto
Todo sobre este proyecto
¿Cómo hicimos la web de QORI?
Con una landing de una sola página en HTML, CSS y JavaScript, mobile-first, con la fotografía de producto como protagonista, un parallax de producto con position:sticky y pedido directo por WhatsApp. Se sirve sobre LiteSpeed y Cloudflare.
¿Cuánto se tardó en desarrollar?
Aproximadamente una semana, de cero a producción, incluyendo diseño, desarrollo, integración de contenidos y puesta en marcha.
¿Qué problema resolvimos?
QORI vendía solo por Instagram y WhatsApp, sin una web propia que transmitiera la calidad de su producto premium. Le dimos un escaparate que presenta la marca, compara los planes y canaliza el pedido, reforzando su imagen.
¿Por qué una landing y no una tienda con carrito?
El cliente vende y atiende cada pedido por WhatsApp, con planes por suscripción. Una landing rápida con pedido por chat encajaba mejor con su operativa que un checkout de e-commerce, y es mucho más ligera y fácil de mantener.
¿Qué tecnologías utilizamos?
HTML5, CSS3 y JavaScript vanilla, con parallax en CSS, datos estructurados Schema.org y entrega sobre LiteSpeed + Cloudflare. Sin CMS pesado.
QORI
Ya conoces el trabajo que hay detrás. Ahora explora el proyecto terminado en producción.
