Look And Feel Better

Panorámica

Look and Feel Better es la tienda oficial de un distribuidor independiente de Herbalife Nutrition en el Reino Unido. Su modelo de venta no es el catálogo tradicional: es la venta asistida, donde la consultoría personal gratuita — vía WhatsApp — es el verdadero diferenciador frente a los canales generalistas.

El tema fue desarrollado íntegramente desde cero como tema Shopify Online Store 2.0, sin partir de un tema existente ni de ningún framework JavaScript. Cada decisión técnica responde al modelo de negocio: los badges de descuento se calculan solos a partir de los precios, el merchandising se gestiona con una taxonomía de tags, los programas bundle de tres niveles tienen estructura de datos y templates propios, y el canal de consultoría WhatsApp está integrado en cada punto del funnel, activable desde el Theme Editor. El trabajo no se limitó al tema: todo el catálogo del cliente — 99 productos — fue digitalizado en Shopify con fichas, precios, tags y metafields estructurados según la arquitectura de datos del tema.

El proyecto incluye también lo que suele faltar: una guía operativa completa, el guion para un videotutorial y documentación PDF con el branding del cliente, porque el cliente gestiona la tienda de forma autónoma desde el Theme Editor. Todo el proyecto — diseño, desarrollo, contenidos y catálogo — se completó en 14 días, seguidos de 7 días de revisión con el cliente. El sitio está live con un catálogo de 99 productos.

El producto

Lo que ve quien lo usa.

Quien llega a la tienda — normalmente desde Instagram, Facebook o WhatsApp, es decir, desde móvil — encuentra enseguida la propuesta: hasta un 35% de descuento sobre el precio de lista y soporte personalizado. La hero muestra los productos en un slider dentro del marco en arco que define la identidad visual del brand, con dos caminos claros: comprar ahora o reservar una consulta gratuita.

Desde ahí, el recorrido se divide por objetivo (control de peso, hidratación, proteínas, skincare) o por nivel de compromiso: tres programas guiados — Starter, Complete y Premium — que combinan productos y soporte del distribuidor, con el más vendido destacado.

En las cards de producto cada dato tiene su lugar exacto: el descuento real en la esquina superior izquierda, el estado (Best Seller, Most Popular) a la derecha, y la función del producto (Meal Replacement, Hydration) abajo. Añadir al carrito ocurre sin cambiar de página, con confirmación inmediata; en el carrito las cantidades se actualizan en tiempo real. La página de producto responde las preguntas en el orden correcto: para qué sirve, para quién es, cómo se usa — y si el cliente tiene dudas, el contacto WhatsApp del distribuidor está a un tap de distancia.

Diseño e identidad visual

Cada decisión visual tiene un porqué.

La identidad visual es nuestra desde el primer borrador hasta el último píxel, construida sobre una pregunta simple: ¿cómo debería verse una tienda de nutrición natural gestionada por una persona real, no por una cadena?

Por qué el verde

El verde es la respuesta natural para un brand que vive en el mundo Herbalife y del wellness: comunica naturaleza, salud y frescura, y es coherente con el imaginario del sector sin copiar activos corporativos propietarios. Usamos dos tonos con roles distintos y precisos. El verde oscuro profundo (#0F3D22) enmarca el sitio: header, footer, headings fuertes y barra de anuncios. Aporta autoridad y actúa como contenedor visual estable. El verde natural (#2E7D32) es el color de la acción: CTAs principales, botones Add to Cart, enlaces activos e iconos de conversión. Quien navega aprende en pocos segundos una regla implícita: donde aparece ese verde, se actúa.

Por qué crema y no blanco

Los fondos de las secciones son crema cálido (#F8F1E6) y las cards marfil (#FFFDF8). Evitamos el blanco puro de manera intencionada: habría dado un tono frío, de farmacia, mientras que el crema calienta la página, hace el sitio más premium y natural y, sobre todo, hace destacar las fotografías de los productos, que tienen envases blancos y verdes.

Los fondos botánicos

Las plantas no son decoración casual, son el contexto del producto. En la hero incorporamos elementos botánicos decorativos dibujados en CSS (laf-hero__botanical) que suavizan el fondo detrás de la imagen del producto. Las fotografías de categoría y de los programas siguen una dirección precisa que definimos en la guía operativa: aloe, hojas, piedras naturales, luz cálida, fondo crema. El resultado es visible en las cards "Shop by Goal" y en las cards de los programas, donde los productos aparecen ambientados entre plantas y materiales naturales. Esto posiciona los productos como parte de una rutina de bienestar, no como cajas en una estantería.

Los acentos dorados: dónde y por qué

El dorado (#C79A2B) es el color del valor, y precisamente por eso lo usamos con moderación: si estuviera en todas partes no significaría nada. Lo hemos colocado solo donde hace falta decir "esto importa":

el "35%" de la hero, el número más importante de la propuesta comercial;
el badge circular premium de la hero ("Exclusive Customer Pricing");
el badge "Most Popular" en la card del programa central, realizado con un degradado dorado;
los eyebrow, es decir, las pequeñas etiquetas sobre los títulos de sección ("MEET", "FIND YOUR WELLNESS PRODUCTS");
el subrayado corto bajo los títulos de sección ("PROGRAMMES & BUNDLES");
el borde izquierdo de la cita del distribuidor en la sección "Meet";
el borde de las CTAs secundarias, para distinguirlas de las primarias verdes sin rebajarlas de rango;
el punto activo del slider de la hero y los estados de foco.

La lógica es jerárquica: el verde guía la acción, el crema da aire, el dorado señala el valor. Tres colores, tres funciones, ninguna superposición.

Tipografía y formas

Elegimos un sans-serif moderno y muy legible, con headings en bold y compactos y una escala fluida que se adapta bien al móvil. Nada de serifs decorativos: habrían restado limpieza y credibilidad a un sector donde la claridad es confianza. Las formas son suaves en todas partes, con radios generosos en cards y paneles y sombras verdes difusas, hasta llegar al marco en arco de la hero, que es el elemento más reconocible del diseño y regresa como motivo identitario del brand.

Toda la paleta está implementada como design tokens (CSS custom properties vinculadas a las configuraciones del tema), por lo que está documentada, es coherente en cada componente y puede modificarse desde el Theme Editor sin tocar código.

Capacidades clave

Qué sabe hacer, y por qué importa.

Badges que no mienten

El descuento mostrado en cada producto se calcula en tiempo real comparando el precio original con el precio actual: nunca puede estar desincronizado con el checkout. Los demás badges derivan de una taxonomía de tags que diseñamos y documentamos, para que el merchandising de 99 productos se mantenga coherente y manejable sin necesidad de un desarrollador.

Compra sin interrupciones

Añadir al carrito desde las cards con confirmación inmediata, contador actualizado, cantidades modificables en el carrito sin recargar la página y búsqueda con sugerencias en tiempo real: todo escrito por nosotros en JavaScript puro sobre las APIs nativas de Shopify, sin apps de terceros.

Programas, no solo productos

Tres recorridos guiados con precios, productos incluidos y consultoría integrada, respaldados por campos de datos dedicados y un template de página propio. El tema vende la forma de trabajar del distribuidor, no solo el catálogo.

Asesoría siempre al alcance

El tema integra el canal WhatsApp en cada punto del funnel: botón flotante global, CTA en la hero, sección dedicada al distribuidor y mensaje personalizable por producto, todo activable y configurable desde el Theme Editor sin tocar código.

Catálogo digitalizado end-to-end

Digitalizamos todo el surtido del cliente, 99 productos: fichas, imágenes, precios con compare-at price, colecciones, tags y metafields. Es este trabajo sobre los datos lo que hace funcionar los badges automáticos, los filtros y los programas en todo el catálogo.

Escaparate gestionable por el cliente

El slider de la hero acepta hasta diez imágenes con controles de posición y zoom para cada slide directamente en el Theme Editor: el cliente cuida el encuadre sin necesidad de herramientas de edición fotográfica.

Dentro de la ingeniería

Los problemas interesantes, y cómo los resolvimos.

01

Un sistema de badges diseñado para no equivocarse

RetoEn un catálogo en promoción continua, los badges de descuento gestionados manualmente acaban contradiciendo inevitablemente los precios reales.

SoluciónLos descuentos nunca son contenido introducido por el operador: un componente los calcula comparando los precios de la variante. Los badges editoriales derivan de tags con prefijos (status:, goal:, role: y otros) orquestados por un único componente con etiquetas centralizadas y un límite de dos badges por card.

Shopify Liquid tag taxonomy snippet architecture.

02

Commerce interactivo sin librerías

RetoOfrecer quick add, carrito en vivo y búsqueda predictiva — funciones para las que muchas tiendas instalan apps de pago — manteniendo el tema ligero.

SoluciónUn único archivo JavaScript de aproximadamente 900 líneas, sin dependencias, habla directamente con las APIs AJAX de Shopify: añadir al carrito con toast de confirmación, sincronización del estado línea a línea con debounce y gestión de errores, sugerencias de búsqueda con vista previa del producto.

Vanilla JS Shopify AJAX API (cart/add.js cart/change.js search/suggest.json).

03

Licencia del tema dentro de los límites de Liquid

RetoUn tema Shopify es un paquete de archivos fácilmente copiable en otras tiendas, y Liquid no ofrece un backend sobre el que apoyar un control de licencias.

SoluciónEl layout verifica en tiempo de ejecución el dominio de la tienda contra una whitelist. Fuera de licencia, el tema muestra una página de bloqueo y marca las páginas como noindex. Un control comercial real obtenido únicamente con las primitivas de la plataforma.

Liquid (shop.permanent_domain request.host).

04

Art direction desde el Theme Editor

RetoLas fotos de producto no nacen pensadas para un marco en arco: cada imagen requiere un encuadre diferente.

SoluciónCada slide expone controles de posición horizontal, vertical y zoom que el Theme Editor traduce en CSS custom properties por slide. El cliente compone el escaparate sin edición fotográfica.

Liquid section schema CSS custom properties.

05

Menú móvil verdaderamente accesible

RetoLos drawer menu móviles suelen romper el foco y el scroll, penalizando a usuarios de teclado y lectores de pantalla.

SoluciónFocus trap con gestión inert, bloqueo del scroll con restauración de la posición, cierre con Escape y retorno del foco al elemento de origen.

Vanilla JS ARIA.

arquitecturacómo se sostiene

El sistema es un tema Shopify Online Store 2.0 puro: 26 secciones Liquid componibles desde el Theme Editor, 16 snippets reutilizables y templates JSON para cada tipo de página. Los datos de merchandising viven en Shopify — precios, tags con taxonomía de prefijos y metafields custom — y el tema los interpreta en tiempo de ejecución: los precios generan los badges de descuento, los tags generan los badges editoriales, los metafields alimentan los contenidos de producto y programa con fallbacks ordenados.

El nivel interactivo es un único archivo JavaScript sin dependencias que se comunica con las APIs AJAX nativas de Shopify para el carrito y la búsqueda. La apariencia está gobernada por design tokens (CSS custom properties) vinculados a las configuraciones del tema, de modo que la paleta es modificable desde el Theme Editor. El layout incluye además un control de licencia por dominio que bloquea el tema en tiendas no autorizadas.

Galería

Shopify E-commerce Wellness Liquid Vanilla JS Conversion UX Design System D2C

Empecemos

¿Un proyecto como este, también para ti?

Partimos de una lectura de tu flujo. Sin compromiso.

Analicemos tu flujo Más proyectos