Look And Feel Better

Vue d'ensemble

Look and Feel Better est le store officiel d'un partenaire indépendant Herbalife Nutrition au Royaume-Uni. Son modèle de vente ne se résume pas à un simple catalogue : c'est la vente accompagnée, où le conseil personnalisé gratuit — via WhatsApp — constitue le vrai différenciateur face aux canaux généralistes.

Le thème a été développé entièrement de zéro en tant que thème Shopify Online Store 2.0, sans base existante et sans framework JavaScript. Chaque choix technique est au service du modèle commercial : les badges de réduction se calculent automatiquement à partir des prix, le merchandising est géré par une taxonomie de tags, les programmes bundle à trois niveaux disposent de structures de données et de templates dédiés, et le canal de conseil WhatsApp est intégré à chaque étape du funnel, activable depuis le Theme Editor. Le travail ne s'est pas arrêté au thème : l'intégralité du catalogue client — 99 produits — a été digitalisée sur Shopify avec fiches, prix, tags et metafields structurés selon l'architecture de données du thème.

Le projet comprend également ce qui manque habituellement : un guide opérationnel complet, le plan d'un tutoriel vidéo et une documentation PDF brandée, car le client gère son store en autonomie depuis le Theme Editor. L'ensemble du projet — design, développement, contenus et catalogue — a été réalisé en 14 jours, suivis de 7 jours de révision avec le client. Le site est en ligne avec un catalogue de 99 produits.

Le produit

Ce que voient ceux qui l'utilisent.

Les visiteurs qui arrivent sur le site — souvent depuis Instagram, Facebook ou WhatsApp, donc sur mobile — trouvent immédiatement la proposition : jusqu'à 35 % de réduction sur le tarif officiel et un accompagnement personnalisé. La hero présente les produits dans un slider encadré par l'arche qui définit l'identité visuelle du brand, avec deux chemins possibles : acheter directement ou réserver une consultation gratuite.

À partir de là, le parcours se divise selon l'objectif (gestion du poids, hydratation, protéines, skincare) ou le niveau d'engagement : trois programmes guidés — Starter, Complete et Premium — qui combinent produits et accompagnement du partenaire, avec le plus vendu mis en avant.

Sur les cards produit, chaque information a sa place précise : la réduction réelle en haut à gauche, le statut (Best Seller, Most Popular) à droite, la fonction du produit (Meal Replacement, Hydration) en bas. L'ajout au panier se fait sans changer de page, avec une confirmation immédiate ; dans le panier, les quantités se mettent à jour en temps réel. La page produit répond aux questions dans le bon ordre : à quoi ça sert, pour qui, comment l'utiliser — et si le client hésite, le contact WhatsApp du partenaire est à portée de tap.

Design et identité visuelle

Chaque choix visuel a une raison.

L'identité visuelle est entièrement la nôtre, de la première esquisse au dernier pixel, construite autour d'une question simple : à quoi doit ressembler un store de nutrition naturelle géré par une vraie personne, et non par une chaîne ?

Pourquoi le vert

Le vert est la réponse naturelle pour un brand qui évolue dans l'univers Herbalife et du wellness : il évoque la nature, la santé et la fraîcheur, et s'inscrit dans l'imaginaire du secteur sans copier d'assets corporate propriétaires. Nous en utilisons deux tonalités aux rôles distincts et précis. Le vert foncé profond (#0F3D22) encadre le site : header, footer, titres forts et barre d'annonces. Il confère de l'autorité et sert de conteneur visuel stable. Le vert naturel (#2E7D32) est le couleur de l'action : CTA principales, boutons Add to Cart, liens actifs et icônes de conversion. En quelques secondes, le visiteur intègre une règle implicite : là où ce vert apparaît, on agit.

Pourquoi le crème et non le blanc

Les fonds de section sont en crème chaud (#F8F1E6) et les cards en ivoire (#FFFDF8). Nous avons délibérément évité le blanc pur : il aurait donné une tonalité froide, proche d'une pharmacie, tandis que le crème réchauffe la page, rend le site plus premium et naturel, et surtout met en valeur les photographies produit, dont les packagings sont blancs et verts.

Les fonds botaniques

Les plantes ne sont pas une décoration hasardeuse, elles constituent le contexte du produit. Dans la hero, nous avons intégré des éléments botaniques décoratifs dessinés en CSS (laf-hero__botanical) qui adoucissent le fond derrière l'image produit. Les photographies de catégorie et de programme suivent une direction précise que nous avons définie dans le guide opérationnel : aloe, feuilles, pierres naturelles, lumière chaude, fond crème. Le résultat est visible dans les cards "Shop by Goal" et dans les cards de programmes, où les produits sont mis en scène parmi plantes et matières naturelles. Cela positionne les produits comme une composante d'un rituel de bien-être, et non comme des boîtes sur une étagère.

Les accents dorés : où et pourquoi

L'or (#C79A2B) est la couleur de la valeur, et c'est précisément pour cela que nous l'utilisons avec parcimonie : s'il était partout, il ne signifierait plus rien. Nous l'avons placé uniquement là où il faut signifier "ceci compte" :

le "35%" de la hero, le chiffre le plus important de la promesse commerciale ;
le badge circulaire premium de la hero ("Exclusive Customer Pricing") ;
le badge "Most Popular" sur la card programme centrale, réalisé avec un dégradé doré ;
les eyebrows, c'est-à-dire les petites étiquettes au-dessus des titres de section ("MEET", "FIND YOUR WELLNESS PRODUCTS") ;
le soulignement court sous les titres de section ("PROGRAMMES & BUNDLES") ;
la bordure gauche de la citation du partenaire dans la section "Meet" ;
la bordure des CTA secondaires, pour les distinguer des primaires vertes sans les dévaloriser ;
le point actif du slider de la hero et les états de focus.

La logique est hiérarchique : le vert guide l'action, le crème laisse respirer, l'or signale la valeur. Trois couleurs, trois rôles, aucun chevauchement.

Typographie et formes

Nous avons choisi un sans-serif moderne et très lisible, avec des titres bold et compacts et une échelle fluide qui s'adapte bien au mobile. Pas de serifs décoratifs : ils auraient nui à la clarté et à la crédibilité d'un secteur où la lisibilité est synonyme de confiance. Les formes sont arrondies partout, avec des rayons généreux sur les cards et les panneaux, des ombres vertes douces, jusqu'à la cornice en arche de la hero — l'élément le plus reconnaissable du design, qui revient comme motif identitaire du brand.

Toute la palette est implémentée sous forme de design tokens (CSS custom properties liées aux paramètres du thème), donc documentée, cohérente dans chaque composant et modifiable depuis le Theme Editor sans toucher au code.

Capacités clés

Ce qu'il sait faire, et pourquoi ça compte.

Des badges qui ne mentent pas

La réduction affichée sur chaque produit est calculée en temps réel par comparaison entre le prix plein et le prix actuel : elle ne peut jamais être désynchronisée avec le checkout. Les autres badges découlent d'une taxonomie de tags que nous avons conçue et documentée, ce qui permet de garder le merchandising de 99 produits cohérent et gérable sans développeur.

Un achat sans interruption

Ajout au panier depuis les cards avec confirmation immédiate, compteur mis à jour, quantités modifiables dans le panier sans rechargement de page et recherche avec suggestions en direct : tout écrit par nos soins en JavaScript pur sur les API natives de Shopify, sans applications tierces.

Des programmes, pas seulement des produits

Trois parcours guidés avec prix, produits inclus et conseil intégré, portés par des champs de données dédiés et un template de page propre. Le thème vend la façon de travailler du partenaire, pas seulement le catalogue.

Le conseil toujours à portée de main

Le thème intègre le canal WhatsApp à chaque étape du funnel : bouton flottant global, CTA en hero, section dédiée au partenaire et message personnalisable par produit, tous activables et configurables depuis le Theme Editor sans toucher au code.

Catalogue digitalisé de bout en bout

Nous avons digitalisé l'intégralité de l'assortiment client, soit 99 produits : fiches, images, prix avec compare-at price, collections, tags et metafields. C'est ce travail sur les données qui permet aux badges automatiques, aux filtres et aux programmes de fonctionner sur l'ensemble du catalogue.

Une vitrine pilotable par le client

Le slider de la hero accepte jusqu'à dix images avec des contrôles de position et de zoom pour chaque slide directement dans le Theme Editor : le client soigne le cadrage sans outil de retouche photo.

Dans l'ingénierie

Les problèmes intéressants, et comment nous les avons résolus.

01

Un système de badges conçu pour ne pas se tromper

DéfiSur un catalogue en promotion permanente, les badges de réduction gérés manuellement finissent inévitablement par contredire les prix réels.

SolutionLes réductions ne sont jamais des contenus saisis par l'opérateur : un composant les calcule par comparaison des prix de la variante. Les badges éditoriaux découlent de tags à préfixes (status:, goal:, role: et autres) orchestrés par un unique composant avec libellés centralisés et une limite de deux badges par card.

Shopify Liquid tag taxonomy snippet architecture.

02

Commerce interactif sans librairies

DéfiProposer le quick add, le panier live et la recherche prédictive — fonctionnalités pour lesquelles beaucoup de stores installent des applications payantes — tout en gardant le thème léger.

SolutionUn unique fichier JavaScript d'environ 900 lignes, sans dépendances, dialogue directement avec les API AJAX de Shopify : ajout au panier avec toast de confirmation, synchronisation de l'état ligne par ligne avec debounce et gestion des erreurs, suggestions de recherche avec aperçu produit.

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

03

Licence du thème dans les limites de Liquid

DéfiUn thème Shopify est un ensemble de fichiers facilement copiable sur d'autres stores, et Liquid ne propose pas de backend sur lequel s'appuyer pour un contrôle de licence.

SolutionLe layout vérifie à la volée le domaine du store contre une whitelist. Hors licence, le thème affiche une page de blocage et marque les pages en noindex. Un vrai contrôle commercial obtenu uniquement avec les primitives de la plateforme.

Liquid (shop.permanent_domain request.host).

04

Art direction depuis le Theme Editor

DéfiLes photos produit ne sont pas conçues pour une cornice en arche : chaque image nécessite un cadrage différent.

SolutionChaque slide expose des contrôles de position horizontale, verticale et de zoom que le Theme Editor traduit en CSS custom properties par slide. Le client compose sa vitrine sans retouche photo.

Liquid section schema CSS custom properties.

05

Menu mobile vraiment accessible

DéfiLes drawer menus mobiles cassent souvent le focus et le scroll, pénalisant les utilisateurs au clavier et les lecteurs d'écran.

SolutionFocus trap avec gestion inert, blocage du scroll avec restauration de la position, fermeture avec Escape et retour du focus à l'élément d'origine.

Vanilla JS ARIA.

architecturecomment ça tient debout

Le système est un thème Shopify Online Store 2.0 pur : 26 sections Liquid composables depuis le Theme Editor, 16 snippets réutilisables et templates JSON pour chaque type de page. Les données de merchandising vivent dans Shopify — prix, tags avec taxonomie à préfixes et metafields custom.* — et le thème les interprète à la volée : les prix génèrent les badges de réduction, les tags génèrent les badges éditoriaux, les metafields alimentent les contenus produit et programme avec des fallbacks ordonnés.

La couche interactive est un unique fichier JavaScript sans dépendances qui dialogue avec les API AJAX natives de Shopify pour le panier et la recherche. L'apparence est gouvernée par des design tokens (CSS custom properties) liés aux paramètres du thème, ce qui rend la palette modifiable depuis le Theme Editor. Le layout inclut enfin un contrôle de licence par domaine qui bloque le thème sur les stores non autorisés.

Galerie

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

Commençons

Un projet comme celui-ci, pour vous aussi ?

Nous partons d'une lecture de votre flux. Sans engagement.

Analysons votre flux Autres projets