Caso práctico · París · En línea
Una marca de botas de París con un solo producto, noventa pares numerados y ningún margen para un sitio que pareciera una plantilla. Construimos una tienda de una sola página que lee el stock real de Shopify y pone la bota en el centro.
The Muuls fabrican una sola bota, la Kuru, en dos colores: Noir y Tobacco. La primera serie fueron noventa pares, cada uno numerado. Esa es toda la propuesta, y plantea un problema concreto para un sitio web.
La maquetación normal de una tienda, rejilla de productos, filtros, categorías, está pensada para elegir. Esta marca no tiene nada que elegir. Meter un solo producto en una plantilla diseñada para doscientos hace que parezca una tienda fracasada en vez de una serie deliberadamente corta. La escasez tenía que ser la estructura de la página, no una etiqueta encima.
Todo el sitio es una sola página con scroll: portada, los dos colores, el detalle de material y cuidado, la historia de la numeración y el registro. Sin navegación en la que perderse, sin páginas de categoría con un único artículo. El orden del scroll es el argumento de venta.
Una barra de «pares restantes» lee el inventario real de Shopify a través de la API Storefront, con un token de solo lectura, por el canal de venta headless. Un discurso de escasez solo funciona si la cifra es cierta, así que está conectada al stock real en vez de escrita a mano.
La bota gira sobre una secuencia de 240 imágenes dibujada en un canvas y controlada por la posición del scroll, una secuencia por color. Da la sensación de un giro 3D sin enviar al navegador un motor 3D ni un modelo pesado.
Un bloque de número de serie cuenta hacia atrás de 090 a 001 y vuelve a empezar, con el /90 fijado debajo. Es una animación pequeña que hace una sola cosa: que noventa se sienta como una cifra real y no como texto publicitario.
La tipografía Nord está alojada en el propio sitio en vez de cargarse desde un servicio externo, lo que mantiene la marca coherente, elimina una dependencia de terceros y evita que la carga de una fuente retrase el primer pintado.
Una política de seguridad de contenido, protecciones contra iframes y MIME sniffing, HTTPS forzado, campos trampa en los dos formularios de registro y un tiempo de espera antispam en el cliente. Un sitio de un solo producto sigue recogiendo correos, y la captación de correos atrae bots.
El front-end es una página estática escrita a mano, sin proceso de build ni framework, desplegada en un CDN. Shopify queda detrás como capa de comercio y gestiona productos, inventario, pago y pedidos, que es la parte que nunca deberías reconstruir por tu cuenta. El sitio habla con él por la API Storefront con un token de solo lectura.
Esa separación es todo el sentido de un montaje headless. La marca consigue un front-end que no se parece a nada, y el cliente conserva un panel de Shopify normal para llevar el negocio. Si el sitio pasara algún día a otro estudio, la parte de comercio quedaría intacta.
El despliegue es continuo: un push a la rama principal publica. Las cabeceras de seguridad se configuran en el CDN y no en la página, y los archivos de desarrollo quedan excluidos de lo que se publica.
El sitio está en línea en themuuls.com, con el contador funcionando contra el inventario real de Shopify y la página de lanzamiento haciendo la venta. Diseño, código front-end, integración de comercio, configuración de seguridad y despliegue salieron de este estudio, sin agencia de por medio.
Si vas a lanzar una serie corta y quieres que el sitio la sostenga, cuéntanos qué sacas. Hay un segundo proyecto que también merece un vistazo: Junky Solutions, que fue justo en la dirección contraria.