Un tema de tienda hecho a la medida de la marca

El problema

Una marca colombiana de bienestar para mascotas vendía sobre un tema comprado en la tienda de aplicaciones. Se notaba: la misma galería que tienen otras mil tiendas, una página de producto rígida donde el orden venía dado, y animaciones que en un celular de gama media hacían que el desplazamiento se sintiera pesado.

Para una marca que compite por atención en redes eso cuesta plata dos veces: la página no transmite el nivel del producto, y quien llega desde el celular se cansa antes de comprar.

Cómo funciona

• La página de producto se arma con bloques —reseñas, combos, selector de variante, beneficios, preguntas frecuentes, sellos de confianza— que se arrastran y se reordenan desde el panel de la tienda, sin llamar a nadie.
• La galería tiene lupa: al pasar el mouse sobre la foto aparece una ampliación al lado. En celular, un toque la abre a pantalla completa.
• Los combos son piezas en tres dimensiones: la opción bajo el cursor se levanta del plano con sombra propia y las de al lado se hunden, así se siente cuál se está eligiendo antes de hacer clic.
• Si el celular es lento, la página detecta que no aguanta y se sirve estática en vez de trabarse. El video de portada arranca incluso en teléfonos que lo bloquean por defecto.
• Nada de esto viene de una plantilla: el tema se diseña y se escribe para la marca, y la velocidad se mide en cada cambio, no se supone.

Qué cambió

La tienda quedó con cara propia y con una página de producto que aguanta comparación con marcas mucho más grandes. El equipo cambia el orden de la página cuando quiere probar algo distinto, sin esperar turno de un programador. Y la siguiente marca no empieza de cero: hereda el rendimiento y las animaciones ya resueltas. La tienda está en línea en getluppo.com.

Qué más se puede hacer con esto

• Marcas de un solo producto: una página larga que cuenta toda la historia, reordenable según lo que funcione.
• Suplementos: combos y suscripción, con la matemática del ahorro justo donde la gente decide.
• Belleza: galerías de antes y después con lupa, donde el detalle de la piel es el argumento.
• Cualquier tienda en línea: tema propio en vez de tema alquilado, con el rendimiento en celular resuelto de fábrica.

Bajo el capó

Es un tema de Shopify propio —escrito desde cero, no una plantilla comprada con otra piel— de cerca de 29 secciones, sobre Web Components y CSS moderno, con GSAP y Lenis para el movimiento. Los combos usan transformaciones 3D que corre la tarjeta gráfica del teléfono, así que se mueven sin costarle nada al desplazamiento. La lupa se calcula en tiempo real porque el ancho disponible depende de dónde quedó la imagen en pantalla, y ninguna regla de CSS puede saberlo. Y el freno por hardware es literal: si el teléfono tiene dos núcleos o menos, no se carga nada de animación.