Una marca de agua, hecha para vender en todas partes.
Lyto Labs, una marca de hidratación natural de Monterrey, nos pidió construir su tienda en línea y todo lo que funciona detrás: precios de mayoreo, crédito en tienda, facturación y una red de negocios socios.
- Tecnología
- Inteligencia
- Cliente
- Industria
- Consumo, bebidas
- Disciplinas
- Desarrollo web, e-commerce, Shopify, 3D, back office, facturación electrónica
- Año
- 2025–2026
El reto
Lyto le vende a cafés, gimnasios y tienditas tanto como a la gente en casa, y una tienda por sí sola no podía con los precios de mayoreo, el crédito, las facturas ni los nuevos socios que se suman cada semana.
01 · La tienda
Shopify por debajo, Lyto por encima.
Construimos una tienda headless con Next.js y Shopify: cajas de 6, 12 y 24, compra única o suscripción con su propia frecuencia de entrega, y un carrito que se mantiene rápido en cualquier teléfono.
El diseño es de Rik Bracho y la fotografía de Mariana García. Nosotros hicimos funcionar cada pantalla, en español e inglés.
02 · Cajas
Cajas que se llenan solas.
Cada caja es una ilustración isométrica que animamos en código: elige 6, 12 o 24 y las botellas caen en una caja nueva, en el color del sabor. Esta es la real, pruébala.
03 · Sabores
Un sitio, todos los sabores.
Cada sabor vive en Shopify como contenido, no como código. Elige Orange Blend y todo el sitio lo sigue: paleta, textos, hero, carrito, imagen para compartir y hasta el favicon.
Un sabor nuevo agregado en Shopify aparece en el sitio sin un solo deploy.
La misma página en cada sabor: el tema viene de Shopify.
04 · 3D
De un archivo 3D a una botella que puedes girar.
Lyto nos entregó el modelo 3D de la botella. Lo optimizamos, de 13 MB a 465 KB, y lo llevamos al sitio como un objeto real de three.js, en los colores del sabor y con la etiqueta impresa.
Después, para cargar más rápido, renderizamos ese mismo modelo en un giro que se reproduce como video: la misma botella, sin motor 3D en la página.
05 · Detrás de la tienda
Mayoreo, crédito y facturas, integrados.
Cada cliente pertenece a un grupo de precios con sus propios niveles y envío. Cuando un negocio paga, el carrito se convierte en un pedido de Shopify a su precio, y puede pagar con su línea de crédito.
El equipo opera todo desde su propio back office: clientes, grupos de precios, crédito y solicitudes.
Arquitectura
Una tienda, tres tipos de cliente.
Compradores
En línea · suscripciones
Cajas de 6, 12 y 24, o cada mes.
Lyto Spots
B2B · cafés, gimnasios
Sus propios precios y una línea de crédito.
Equipo Lyto
Back office
Aprueba socios, fija precios, ajusta crédito.
Shopify
Storefront · Admin · Cuentas
Productos, pedidos y sabores como contenido.
Supabase
Datos
Grupos de precios, niveles y el saldo de crédito.
Factura.com
Fiscal · CFDI 4.0
Facturas electrónicas mexicanas, desde nuestro propio SDK.
Resend
Correo
30 correos, en español e inglés.
Para los socios: pedidos, facturas y su línea de crédito en un solo acceso, y un carrito que paga con ella.
30 correos transaccionales, en español e inglés, del primer pedido al último reembolso.
- API de Shopify trabajando juntas
- 4
- correos con la marca, en español e inglés
- 30
- líneas de código para lanzar un sabor nuevo
- 0
- la botella 3D, antes de 13 MB
- 465 KB
Míralo en vivo en drinklyto.com (se abre en una pestaña nueva)
Créditos
- Diseño
- Rik Bracho
- Fotografía
- Mariana García
- Desarrollo
- WAOF®