Tru Western es la marca de fragancias western dentro de Tru Fragrance + Beauty, en Shopify Plus. Para la temporada navideña 2026 el brief pedía una guía de regalos que llevara el video de campaña, seis formas de comprar (para el calcetín, bajo 30 dólares, aciertos seguros, colecciones, para él, para ella), favoritos del equipo, una salida al quiz de aromas y las fechas límite de despacho, sin tocar el header, el footer, el carrito ni las apps de la tienda.
Me hice cargo de todo, desde el primer wireframe hasta el push a producción: rondas de diseño con el equipo creativo de la marca, un prototipo HTML responsive, la construcción en Liquid sobre el theme en producción, QA como visitante nuevo y el lanzamiento.
Diseño, con el pliegue como primera restricción
La página pasó por cuatro rondas en Figma con el equipo de la marca. La decisión de diseño más importante no fue visual, fue el pliegue: el video del hero más las seis píldoras del buscador rápido tenían que verse en la primera pantalla en todos los viewports habituales, para que la gente eligiera cómo comprar antes de desplazarse.
Lo resolví con mediciones y no con proporciones. Una copia de prueba de la página, con el video real puesto y una pequeña capa que imprime el tamaño del viewport y dónde termina la última píldora, se sirvió en la red local y se abrió en dos iPhone y en ventanas reales de un Mac. El resultado quedó como una regla escrita en svh, para que la barra de Safari se tome en cuenta:
/* Altura del hero: llenar la primera pantalla y dejar las píldoras visibles.
--lp-above es el desplazamiento real del hero, leído en tiempo de ejecución,
porque la variable de altura de header del theme sobreestima con la barra compacta. */
.lp-hero {
height: max(calc(100svh - var(--lp-above) - 236px), min(33.33vw, 52svh));
max-height: 56.25vw; /* nunca más alto que 16:9 */
}
@media (max-width: 749px) {
.lp-hero { height: calc(100svh - var(--lp-above) - 120px); max-height: 150vw; min-height: 360px; }
}Las alturas medidas en 1366×658, 1440×900, 1920×1080, 768×1024, 375×620, 390×844 y 440×796 quedaron en las notas del proyecto, y los frames de Figma se fijaron en esas mismas ventanas de referencia, para que el cliente revisara lo que el navegador iba a mostrar de verdad.
La construcción: secciones Liquid, nada escrito en el código
Todo vive en el theme de la tienda como archivos nuevos. La página es una plantilla con nueve secciones, cada una nombrada por su layout y no por la campaña, cada una con su esquema completo y un preset:
lp-framed-hero: imagen o video por breakpoint, capas SVG de película (superior, inferior, tarjeta final) en 16:9 y 9:16, sello de marca, pósters del primer cuadro, control de sonido.lp-pill-finder: las seis anclas, con la píldora activa siguiendo la sección visible.lp-product-grid: tres layouts (pares, fila, destacado) que comparten una misma tarjeta de producto.lp-collection-tiles,lp-split-panels,lp-quote-cards,lp-pick-and-links,lp-star-divider.lp-shipping-countdown: fecha límite por método de despacho, editable, con cuenta regresiva en vivo que cambia su mensaje pasada la fecha.
La tarjeta de producto reutiliza el contrato de carrito AJAX del theme, así que «Add to cart» abre el drawer de la tienda con el selector de muestra gratis, la lógica de regalo con compra y los píxeles de seguimiento tal como en cualquier otra página. Las imágenes pasan por un snippet lp-image que calcula sizes a partir del espacio y del zoom de encuadre elegido en el editor, para que una foto ampliada pida un archivo con píxeles suficientes a 2x y 3x.
El movimiento es CSS y un script pequeño en JavaScript puro: entrada y parallax del hero, aparición en cascada de las secciones, un separador de estrellas que se dibuja solo, dígitos de la cuenta regresiva que giran. Se apaga con prefers-reduced-motion y dentro del theme editor. En escritorio, una capa de desplazamiento suave lleva las anclas al píxel exacto bajo el header compacto, y se detiene cuando la tienda bloquea el scroll para su carrito o su buscador.
Después, el equipo de la marca editó la página por su cuenta antes del lanzamiento: productos elegidos, citas del equipo, fotos, textos. La construcción les dio los controles; la plantilla final es de ellos.
Recursos y lanzamiento
La fotografía final llegó como recortes del equipo creativo de la marca. Revisé cada archivo contra los píxeles que su espacio necesita a 1440@2x y 390@3x, volví a cortar desde los originales con gradación de color los cinco que quedaban cortos, con el mismo encuadre, y subí 28 archivos a Shopify Files por la Admin API con nombres SEO y texto alternativo, para luego asignarlos a la plantilla desde un manifiesto.
El lanzamiento fue un push quirúrgico: 26 archivos solamente, preparados aparte, shopify theme push --only … --nodelete sobre el theme en producción. Los checksums del theme completo antes y después demostraron que 25 archivos eran nuevos, un snippet cambió (el bloque de tarjeta social de la página, aditivo) y los otros 464 archivos quedaron intactos, incluida la plantilla de la portada que el equipo estaba editando en ese momento. La página se creó en el admin con su plantilla, título de búsqueda, descripción e imagen para compartir, y se revisó como visitante nuevo en 1440, 1280, 820, 390 y 360: sin errores de Liquid, sin desbordes, 24 imágenes con texto alternativo, 27 enlaces respondiendo 200, video del hero reproduciendo en escritorio y teléfono, quick add abriendo el carrito en ambos.
Lo que muestra este proyecto
Trabajar dentro de un theme Shopify Plus en producción con la disciplina de un sistema productivo: un esquema para todo, nada de contenido en el código, un despliegue reproducible con evidencia, y un diseño decidido con mediciones en dispositivos reales. Es lo contrario del enfoque por subdominio que usé para el lanzamiento de Rodeo Soul Harmony, y prefiero este para una campaña que debe vivir dentro de la tienda.