Look And Feel Better

Panorâmica

Look and Feel Better é a loja oficial de um parceiro independente Herbalife Nutrition no Reino Unido. O seu modelo de venda não é o simples catálogo: é a venda assistida, em que a consultoria pessoal gratuita — via WhatsApp — é o verdadeiro diferenciador face aos canais generalistas.

O tema foi desenvolvido inteiramente de raiz como tema Shopify Online Store 2.0, sem partir de um tema existente e sem frameworks JavaScript. Cada decisão técnica serve o modelo de negócio: os badges de desconto calculam-se automaticamente a partir dos preços, o merchandising é gerido com uma taxonomia de tags, os programas bundle a três níveis têm estrutura de dados e templates dedicados, e o canal de consultoria WhatsApp está integrado em cada ponto do funil, ativável pelo Theme Editor. O trabalho não ficou pelo tema: todo o catálogo do cliente — 99 produtos — foi digitalizado no Shopify com fichas, preços, tags e metafields estruturados segundo a arquitetura de dados do tema.

O projeto inclui também o que normalmente falta: um guia operacional completo, o guião para um vídeo tutorial e documentação PDF com a identidade do cliente, para que este gira a loja de forma autónoma pelo Theme Editor. Todo o projeto — design, desenvolvimento, conteúdos e catálogo — foi concluído em 14 dias, seguidos de 7 dias de revisão com o cliente. O site está em produção com um catálogo de 99 produtos.

O produto

O que vê quem o usa.

Quem chega ao site — muitas vezes a partir do Instagram, Facebook ou WhatsApp, portanto em mobile — encontra imediatamente a proposta: poupança até 35% face ao preço de tabela e apoio personalizado. A hero apresenta os produtos num slider dentro da moldura em arco que define a identidade visual da marca, com dois caminhos: comprar de imediato ou agendar uma consultoria gratuita.

A partir daí, o percurso divide-se por objetivo (gestão de peso, hidratação, proteínas, skincare) ou por nível de compromisso: três programas orientados — Starter, Complete e Premium — que combinam produtos e apoio do parceiro, com o mais vendido em destaque.

Nos cards de produto, cada informação tem o seu lugar: o desconto real no canto superior esquerdo, o status (Best Seller, Most Popular) à direita, e a função do produto (Meal Replacement, Hydration) em baixo. A adição ao carrinho acontece sem mudar de página, com confirmação imediata; no carrinho, as quantidades atualizam-se em tempo real. A página de produto responde às perguntas na ordem certa: para que serve, para quem é, como se usa — e se o cliente estiver indeciso, o contacto WhatsApp do parceiro está a um toque de distância.

Design e identidade visual

Cada escolha visual tem um porquê.

A identidade visual é nossa desde o primeiro esboço ao último pixel, construída a partir de uma pergunta simples: como deve parecer uma loja de nutrição natural gerida por uma pessoa real, e não por uma cadeia?

Porquê o verde

O verde é a resposta natural para uma marca que vive no universo Herbalife e do wellness: transmite natureza, saúde e frescura, e é coerente com o imaginário do setor sem copiar ativos corporativos proprietários. Usamos dois tons com papéis distintos e precisos. O verde escuro profundo (#0F3D22) enquadra o site: header, footer, headings fortes e barra de anúncios. Confere autoridade e funciona como contentor visual estável. O verde natural (#2E7D32) é a cor da ação: CTAs principais, botões Add to Cart, links ativos e ícones de conversão. Quem navega aprende em poucos segundos uma regra implícita: onde está esse verde, age-se.

Porquê creme e não branco

Os fundos das secções são creme quente (#F8F1E6) e os cards são marfim (#FFFDF8). Evitámos o branco puro deliberadamente: daria um tom frio, de farmácia, enquanto o creme aquece a página, torna o site mais premium e natural e, acima de tudo, valoriza as fotografias dos produtos, que têm embalagens brancas e verdes.

Os fundos botânicos

As plantas não são decoração aleatória — são o contexto do produto. Na hero, integrámos elementos botânicos decorativos desenhados via CSS (laf-hero__botanical) que suavizam o fundo por detrás da imagem de produto. As fotografias de categoria e dos programas seguem uma direção precisa que definimos no guia operacional: aloé, folhas, pedras naturais, luz quente, fundo creme. O resultado é visível nos cards "Shop by Goal" e nos cards dos programas, onde os produtos são enquadrados entre plantas e materiais naturais. Isto posiciona os produtos como parte de uma rotina de bem-estar, não como caixas numa prateleira.

Os acentos dourados: onde e porquê

O dourado (#C79A2B) é a cor do valor, e é precisamente por isso que o usamos com parcimónia: se estivesse em todo o lado, não valeria nada. Colocámo-lo apenas onde importa dizer "isto conta":

o "35%" da hero, o número mais importante da promessa comercial;
o badge circular premium da hero ("Exclusive Customer Pricing");
o badge "Most Popular" no card do programa central, realizado com um gradiente dourado;
os eyebrows, ou seja, as pequenas etiquetas acima dos títulos de secção ("MEET", "FIND YOUR WELLNESS PRODUCTS");
o sublinhado curto sob os títulos de secção ("PROGRAMMES & BUNDLES");
a borda esquerda da citação do parceiro na secção "Meet";
a borda das CTAs secundárias, para as distinguir das primárias verdes sem as desvalorizar;
o ponto ativo do slider da hero e os estados de foco.

A lógica é hierárquica: o verde orienta a ação, o creme dá respiração, o dourado sinaliza o valor. Três cores, três funções, nenhuma sobreposição.

Tipografia e formas

Escolhemos um sans-serif moderno e muito legível, com headings bold e compactos e uma escala fluida que se adapta bem ao mobile. Sem serifas decorativas: teriam retirado limpeza e credibilidade a um setor onde a clareza é sinónimo de confiança. As formas são suaves em todo o lado, com raios generosos em cards e painéis e sombras verdes subtis, até à moldura em arco da hero, que é o elemento mais reconhecível do design e regressa como motivo identitário da marca.

Toda a paleta está implementada como design tokens (CSS custom properties ligadas às definições do tema), portanto documentada, coerente em cada componente e modificável pelo Theme Editor sem tocar no código.

Capacidades-chave

O que sabe fazer, e porque conta.

Badges que não enganam

O desconto apresentado em cada produto é calculado em tempo real pela comparação entre o preço original e o preço atual: nunca pode estar dessincronizado com o checkout. Os restantes badges derivam de uma taxonomia de tags que concebemos e documentámos, para que o merchandising de 99 produtos se mantenha coerente e gerível sem necessidade de programador.

Compra sem interrupções

Adição ao carrinho a partir dos cards com confirmação imediata, contador atualizado, quantidades editáveis no carrinho sem recarregar a página e pesquisa com sugestões em tempo real: tudo escrito por nós em JavaScript puro sobre as APIs nativas do Shopify, sem apps de terceiros.

Programas, não apenas produtos

Três percursos orientados com preços, produtos incluídos e consultoria integrada, suportados por campos de dados dedicados e um template de página próprio. O tema vende a forma de trabalhar do parceiro, não apenas o catálogo.

Consultoria sempre acessível

O tema integra o canal WhatsApp em cada ponto do funil: botão flutuante global, CTA na hero, secção dedicada ao parceiro e mensagem personalizável por produto — todos ativáveis e configuráveis pelo Theme Editor sem código.

Catálogo digitalizado end-to-end

Digitaliz�mos todo o sortido do cliente, 99 produtos: fichas, imagens, preços com compare-at price, coleções, tags e metafields. É este trabalho sobre os dados que faz funcionar os badges automáticos, os filtros e os programas em todo o catálogo.

Montra gerível pelo próprio cliente

O slider da hero aceita até dez imagens com controlos de posição e zoom para cada slide diretamente no Theme Editor: o cliente afina o enquadramento sem precisar de ferramentas de edição de imagem.

Dentro da engenharia

Os problemas interessantes, e como os resolvemos.

01

Um sistema de badges concebido para não falhar

DesafioNum catálogo em promoção contínua, os badges de desconto geridos manualmente acabam inevitavelmente por contradizer os preços reais.

SoluçãoOs descontos nunca são conteúdo inserido pelo operador: um componente calcula-os pela comparação de preços da variante. Os badges editoriais derivam de tags com prefixos (status:, goal:, role: e outros) orquestrados por um único componente com etiquetas centralizadas e um limite de dois badges por card.

Shopify Liquid tag taxonomy snippet architecture.

02

Comércio interativo sem bibliotecas

DesafioOferecer quick add, carrinho em tempo real e pesquisa preditiva — funcionalidades para as quais muitas lojas instalam apps pagas — mantendo o tema leve.

SoluçãoUm único ficheiro JavaScript de cerca de 900 linhas, sem dependências, comunica diretamente com as APIs AJAX do Shopify: adição ao carrinho com toast de confirmação, sincronização do estado linha a linha com debounce e recuperação de erros, sugestões de pesquisa com pré-visualização de produto.

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

03

Licença do tema dentro dos limites do Liquid

DesafioUm tema Shopify é um conjunto de ficheiros facilmente copiável para outras lojas, e o Liquid não oferece um backend onde apoiar um controlo de licenças.

SoluçãoO layout verifica em runtime o domínio da loja contra uma whitelist. Fora de licença, o tema apresenta uma página de bloqueio e marca as páginas como noindex. Um controlo comercial real obtido apenas com as primitivas da plataforma.

Liquid (shop.permanent_domain request.host).

04

Art direction pelo Theme Editor

DesafioAs fotografias de produto não nascem para uma moldura em arco: cada imagem exige um enquadramento diferente.

SoluçãoCada slide expõe controlos de posição horizontal, vertical e zoom que o Theme Editor converte em CSS custom properties por slide. O cliente compõe a montra sem edição de imagem.

Liquid section schema CSS custom properties.

05

Menu mobile verdadeiramente acessível

DesafioOs drawer menus mobile quebram frequentemente o foco e o scroll, prejudicando utilizadores de teclado e leitores de ecrã.

SoluçãoFocus trap com gestão de inert, bloqueio do scroll com reposição da posição, fecho com Escape e retorno do foco ao elemento de origem.

Vanilla JS ARIA.

arquiteturacomo se sustenta

O sistema é um tema Shopify Online Store 2.0 puro: 26 secções Liquid combináveis pelo Theme Editor, 16 snippets reutilizáveis e templates JSON para cada tipo de página. Os dados de merchandising vivem no Shopify — preços, tags com taxonomia de prefixos e metafields custom — e o tema interpreta-os em runtime: os preços geram os badges de desconto, as tags geram os badges editoriais, e os metafields alimentam os conteúdos de produto e programa com fallbacks ordenados.

O nível interativo é um único ficheiro JavaScript sem dependências que comunica com as APIs AJAX nativas do Shopify para carrinho e pesquisa. O aspeto visual é governado por design tokens (CSS custom properties) ligados às definições do tema, pelo que a paleta é modificável pelo Theme Editor. O layout inclui ainda um controlo de licença por domínio que bloqueia o tema em lojas não autorizadas.

Galeria

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

Vamos começar

Um projeto como este, também para ti?

Partimos de uma leitura do teu fluxo. Sem compromisso.

Vamos analisar o teu fluxo Outros projetos