E-commerce
Tienda demo de ropa urbana técnica
Una tienda de streetwear técnico con portada cinematográfica que avanza con el scroll y un checkout que guarda cada pedido en base de datos.
El reto
Las tiendas de ropa urbana suelen parecerse: una rejilla de fotos y un botón de compra. La idea era mostrarle a una marca cómo se vería su tienda si contara el producto como una campaña, de noche, con textura y detalle, sin perder lo que hace falta para vender: catálogo, ficha, bolsa y pago.
Cómo lo abordé
- Dirección visual antes que código: negro, verde neón, tipografía condensada y un guion de escenas para la portada (la chaqueta, el tejido, la costura, el lanzamiento).
- La portada es un film que avanza con el scroll. Todos los recursos se generan al construir el sitio, así la página no calcula nada mientras carga.
- Detrás, una tienda completa: catálogo con filtros, ficha de producto, bolsa y checkout con los pedidos guardados en Cloudflare D1, todo servido desde un único Worker.
La solución
La portada presenta una chaqueta técnica sobre negro con acentos verde neón y avanza por escenas: el tejido, el detalle de las costuras y el lanzamiento de la colección. Después vienen un índice de cinco categorías (polos, pantalones, abrigos, accesorios y zapatillas), una edición limitada de doscientas prendas, un archivo editorial de estilos, el catálogo completo con filtros y un registro para enterarse de los lanzamientos. En «Otra perspectiva», una zapatilla en 3D gira con el scroll y se puede arrastrar para verla desde cualquier ángulo.
Resultado
- Del primer scroll al pedido guardado, sin piezas sueltas
- La tienda entera corre en un único Cloudflare Worker con su base D1: no hay servidor que mantener
- Visor 3D que se carga solo al acercarse a la sección, para no frenar la portada