Le Monde Gourmand, que vende como Gourmand Beauty, es la marca de fragancias gourmand dentro de Tru Fragrance + Beauty. El brief navideño pedía una página de tienda con una personalidad distinta a la guía de Tru Western: más luminosa, editorial, armada alrededor de sets y capas de aroma, con un lanzamiento exclusivo para el programa de lealtad y una oferta de packs al centro. Las dos páginas se diseñaron y construyeron en paralelo, desde la misma lista de verificación, y se lanzaron la misma noche.
Lo llevé completo: rondas de diseño con los equipos creativo y de e-commerce de la marca, el prototipo responsive, la construcción en Liquid sobre el theme en producción, la preparación de recursos, el QA y el push a producción.
Decisiones de diseño que sobrevivieron cuatro rondas
El buscador rápido se fue a mosaicos de imagen (la página de Tru Western usa píldoras), con el título y los cuatro mosaicos sobre el pliegue en todos los tamaños de escritorio y una grilla de dos columnas en teléfonos. Las filas de productos se desplazan en móvil con un asomo visible y un indicador fino; el buscador mismo nunca se desplaza.
La lógica comercial salió del brief y de la mecánica propia de la tienda, no de la página:
- El producto de lanzamiento es exclusivo para el programa de lealtad. El bloque lee la marca de «producto exclusivo de lealtad» de la tienda: un miembro con sesión ve el producto y su botón, un visitante ve «Únete a Rewards para comprar» y «¿Ya eres miembro? Inicia sesión». La página del producto sigue oculta hasta que la marca la publica.
- La oferta de packs muestra los niveles de compra más, ahorra más de la tienda (dos, tres, cuatro, cinco o más) y deriva al armador de packs, así que el precio nunca se duplica en la página.
- La sección de aromas es el bloque «Shop by Scent» de la propia tienda, curado a cuatro pestañas para la temporada, no una copia.
El movimiento se ajustó al gusto de la marca después de una revisión: la capa de desplazamiento suave y el parallax se quitaron a pedido de ellos, la página se desplaza de forma nativa, y el movimiento restante son entradas, estados hover y la cuenta regresiva. Sin problema, porque todo eran ajustes de sección.
La construcción
Nueve secciones lp- más la sección de colección destacada de la propia tienda, con una tarjeta compartida y un snippet compartido de quick add que pasa por la ruta de agregar al carrito del theme. Eso importaba aquí: el cart drawer se abre con el banner de regalo por lealtad y las recomendaciones que la tienda ya tiene funcionando.
Cada espacio de foto tiene sus propios ajustes de encuadre (archivos de escritorio y teléfono, zoom, posición) y puntos de brillo opcionales, pequeños destellos ubicados sobre la foto por coordenadas en el editor, con puntos separados para el recorte de teléfono. Los valores por defecto vinieron de las maquetas aprobadas, así que la página se vio bien desde el primer día y el equipo igual podía mover todo.
Las imágenes se sirven por un snippet lp-media que escribe sizes a partir del espacio y del zoom de encuadre. Las 18 fotos finales fueron a Shopify Files por la Admin API con nombres de archivo SEO y texto alternativo, y luego se asignaron a la plantilla desde un manifiesto, con cada archivo revisado contra los píxeles que su espacio necesita a 1440@2x y 390@3x.
{%- comment -%} Compuerta de lealtad, simplificada: la marca vive en el producto, la decisión en Liquid {%- endcomment -%}
{%- assign gated = product.metafields.loyalty.exclusive | default: false -%}
{%- if gated and customer == null -%}
<a class="lp-btn" href="{{ section.settings.rewards_url }}">Join Rewards to shop</a>
<a class="lp-link" href="{{ routes.account_login_url }}">Already a member? Log in</a>
{%- else -%}
{%- render 'lp-atc', product: product, variant: product.selected_or_first_available_variant -%}
{%- endif -%}
Medir antes de publicar
Antes de que la vista previa llegara al cliente corrí Lighthouse tres veces por página, móvil y escritorio, y guardé las medianas junto a las de la portada de la propia tienda. Lo útil fue separar lo nuestro de lo de la tienda: axe reportó cero problemas dentro de las secciones de la página, el costo de hilo principal en móvil venía de las apps de la tienda, y el script propio de la página quedó muy por debajo. Esos números fueron a las notas de lanzamiento, para que el equipo sepa dónde está de verdad el presupuesto de rendimiento que queda.
Lanzamiento
Un theme de vista previa construido desde una copia fresca del theme en producción más los archivos nuevos, compartido con el equipo para sus ediciones. El día del lanzamiento: la vista previa se volvió a descargar, los 17 archivos de código se verificaron idénticos al repositorio, la plantilla del equipo se tomó exactamente como la dejaron, y 18 archivos se subieron al theme en producción con --only y --nodelete. Checksums antes y después: 17 archivos nuevos, un snippet actualizado (la tarjeta social de la página), los otros 491 archivos intactos. La página se creó con su plantilla, título de búsqueda, descripción e imagen para compartir, y se revisó como visitante nuevo en cinco viewports: sin errores de Liquid, sin desbordes, 31 imágenes con texto alternativo, 42 enlaces respondiendo 200, quick add funcionando en escritorio y teléfono.
Lo que muestra este proyecto
Dos páginas de marca desde un mismo proceso, publicadas la misma noche, cada una dentro de su propio theme en producción, cada una totalmente editable y cada una con un despliegue documentado y reversible. La compuerta de lealtad y los niveles de packs son las partes que le mostraría a un comerciante: la página respeta las reglas de la tienda en vez de reimplementarlas.