Look And Feel Better

Cliente: Look and Feel Better, Independent Herbalife Nutrition Partner (UK)

Settore: Wellness & Nutrition e-commerce

Prodotto: Tema Shopify custom (Online Store 2.0)

Ruolo: Progetto completo end-to-end: idea, design, sviluppo del tema, contenuti, digitalizzazione del catalogo, settaggio dell'account Shopify, metodi di pagamento e metodi di spedizione. Tutto quello che serve per portare un sito live.

Anno: 2026

Tempi: 14 giorni di realizzazione più 7 giorni di revisione

Stack: Shopify OS 2.0 Liquid Vanilla JavaScript Shopify AJAX API Metafields CSS Design System

Vai al sito live

Panoramica

Look and Feel Better è lo store ufficiale di un partner indipendente Herbalife Nutrition nel Regno Unito. Il suo modello di vendita non è il semplice catalogo: è la vendita assistita, in cui la consulenza personale gratuita via WhatsApp è il vero differenziatore rispetto ai canali generalisti.

Abbiamo creato tutto noi, dall'idea alla messa online: l'identità visiva, il design system, le 26 sezioni del tema, il codice JavaScript e ogni logica di vendita. Nessun tema di partenza, nessun framework. I badge sconto si calcolano da soli a partire dai prezzi, il merchandising si governa con una tassonomia di tag che abbiamo progettato, i programmi bundle a tre livelli hanno struttura dati e template dedicati, il canale WhatsApp è integrato in ogni punto del funnel e attivabile dal Theme Editor.

Il lavoro non si è fermato al tema: abbiamo digitalizzato l'intero catalogo del cliente, 99 prodotti, con schede, prezzi, tag e metafield strutturati secondo l'architettura dati che avevamo definito. Abbiamo anche preparato lo store alla vendita reale: settaggio dell'account Shopify, configurazione dei metodi di pagamento e dei metodi di spedizione, cioè tutto quello che serve per mandare un sito live e far arrivare gli ordini. Abbiamo anche curato il dopo: guida operativa in italiano, scaletta per una videoguida e documentazione PDF brandizzata, perché il cliente gestisce lo store in autonomia. L'intero progetto è stato realizzato in 14 giorni, seguiti da 7 giorni di revisione con il cliente.

Il prodotto

Cosa vede chi lo usa.

Chi arriva sul sito, spesso da Instagram, Facebook o WhatsApp e quindi da mobile, trova subito la proposta: risparmio fino al 35% sul listino e supporto personale. La hero mostra i prodotti in uno slider dentro la cornice ad arco che abbiamo disegnato come firma del brand, con due strade: comprare subito o prenotare una consulenza gratuita.

Da lì il percorso si divide per obiettivo (gestione del peso, idratazione, proteine, skincare) o per livello di impegno: tre programmi guidati, Starter, Complete e Premium, che combinano prodotti e supporto del partner, con il più venduto evidenziato.

Sulle card prodotto ogni informazione ha un posto preciso: lo sconto reale in alto a sinistra, lo status (Best Seller, Most Popular) a destra, la funzione del prodotto (Meal Replacement, Hydration) in basso. L'aggiunta al carrello avviene senza cambiare pagina, con conferma immediata. Nel carrello le quantità si aggiornano in tempo reale. La pagina prodotto risponde alle domande nell'ordine giusto: a cosa serve, per chi è, come si usa. E se il cliente è indeciso, il contatto WhatsApp del partner è a un tap di distanza.

Design e identità visiva

Ogni scelta visiva ha un perché.

L'identità visiva è nostra dalla prima bozza all'ultimo pixel, ed è costruita su una domanda semplice: come deve sembrare uno store di nutrizione naturale gestito da una persona vera, non da una catena?

Perché il verde

Il verde è la risposta naturale per un brand che vive nel mondo Herbalife e del wellness: comunica natura, salute e freschezza, ed è coerente con l'immaginario del settore senza copiare asset corporate proprietari. Ne usiamo due tonalità con ruoli diversi e precisi. Il verde scuro profondo (#0F3D22) incornicia il sito: header, footer, heading forti e barra annunci. Dà autorevolezza e fa da contenitore visivo stabile. Il verde naturale (#2E7D32) è invece il colore dell'azione: CTA principali, pulsanti Add to Cart, link attivi e icone di conversione. Chi naviga impara in pochi secondi una regola implicita: dove c'è quel verde, si agisce.

Perché il crema e non il bianco

I fondi delle sezioni sono crema caldo (#F8F1E6) e le card avorio (#FFFDF8). Abbiamo evitato il bianco puro di proposito: avrebbe dato un tono freddo, da farmacia, mentre il crema scalda la pagina, rende il sito più premium e naturale e soprattutto fa risaltare le fotografie dei prodotti, che hanno confezioni bianche e verdi.

Gli sfondi botanici

Le piante non sono decorazione casuale, sono il contesto del prodotto. Nella hero abbiamo inserito elementi botanici decorativi disegnati via CSS (laf-hero__botanical) che ammorbidiscono lo sfondo dietro l'immagine prodotto. Le fotografie di categoria e dei programmi seguono una direzione precisa che abbiamo definito nella guida operativa: aloe, foglie, pietre naturali, luce calda, sfondo crema. Il risultato è visibile nelle card "Shop by Goal" e nelle card dei programmi, dove i prodotti sono ambientati tra piante e materiali naturali. Questo posiziona i prodotti come parte di una routine di benessere, non come scatole su uno scaffale.

Gli accenti oro: dove e perché

L'oro (#C79A2B) è il colore del valore, e proprio per questo lo usiamo con parsimonia: se fosse ovunque non varrebbe niente. Lo abbiamo messo solo dove serve a dire "questo conta":

il "35%" della hero, il numero più importante della promessa commerciale;
il badge circolare premium della hero ("Exclusive Customer Pricing");
il badge "Most Popular" sulla card programma centrale, realizzato con un gradiente oro;
gli eyebrow, cioè le piccole etichette sopra i titoli di sezione ("MEET", "FIND YOUR WELLNESS PRODUCTS");
la sottolineatura corta sotto i titoli di sezione ("PROGRAMMES & BUNDLES");
il bordo sinistro della quote del partner nella sezione "Meet";
il bordo delle CTA secondarie, per distinguerle da quelle primarie verdi senza abbassarle di rango;
il dot attivo dello slider della hero e gli stati di focus.

La logica è gerarchica: il verde guida l'azione, il crema fa respirare, l'oro segnala il valore. Tre colori, tre compiti, nessuna sovrapposizione.

Tipografia e forme

Abbiamo scelto un sans-serif moderno e molto leggibile, con heading bold e compatti e una scala fluida che scende bene su mobile. Niente serif decorativi: avrebbero tolto pulizia e credibilità a un settore dove la chiarezza è fiducia. Le forme sono morbide ovunque, con raggi generosi su card e pannelli e ombre verdi soffuse, fino alla cornice ad arco della hero, che è l'elemento più riconoscibile del design e ritorna come motivo identitario del brand.

Tutta la palette è implementata come design token (CSS custom properties collegate alle impostazioni del tema), quindi documentata, coerente in ogni componente e modificabile dal Theme Editor senza toccare codice.

Capacità chiave

Cosa sa fare, e perché conta.

Badge che non mentono

Lo sconto mostrato su ogni prodotto è calcolato in tempo reale dal confronto tra prezzo pieno e prezzo attuale: non può mai essere fuori sincrono con il checkout. Gli altri badge derivano da una tassonomia di tag che abbiamo progettato e documentato, così il merchandising di 99 prodotti resta coerente e gestibile senza sviluppatore.

Acquisto senza interruzioni

Aggiunta al carrello dalle card con conferma immediata, contatore aggiornato, quantità modificabili nel carrello senza ricaricare la pagina e ricerca con suggerimenti live: tutto scritto da noi in JavaScript puro sulle API native di Shopify, senza app di terze parti.

Programmi, non solo prodotti

Tre percorsi guidati con prezzi, prodotti inclusi e consulenza compresa, sostenuti da campi dati dedicati e da un template pagina proprio. Il tema vende il modo di lavorare del partner, non solo il catalogo.

Consulenza a portata di mano

Il tema integra il canale WhatsApp in ogni punto del funnel: pulsante flottante globale, CTA in hero, sezione dedicata al partner e messaggio personalizzabile per singolo prodotto, tutti attivabili e configurabili dal Theme Editor senza codice.

Catalogo digitalizzato end-to-end

Abbiamo digitalizzato l'intero assortimento del cliente, 99 prodotti: schede, immagini, prezzi con compare-at price, collection, tag e metafield. È questo lavoro sui dati che fa funzionare badge automatici, filtri e programmi su tutto il catalogo.

Vetrina governabile dal cliente

Lo slider della hero accetta fino a dieci immagini con controlli di posizione e zoom per ogni slide direttamente nel Theme Editor: il cliente cura l'inquadratura senza strumenti di fotoritocco.

Dentro l'ingegneria

I problemi interessanti, e come li abbiamo risolti.

01

Un sistema di badge progettato per non sbagliare

SfidaSu un catalogo in promozione continua, i badge sconto gestiti a mano finiscono inevitabilmente per contraddire i prezzi reali.

SoluzioneGli sconti non sono mai contenuti inseriti dall'operatore: un componente li calcola dal confronto prezzi della variante. I badge editoriali derivano da tag con prefissi (status:, goal:, role: e altri) orchestrati da un unico componente con etichette centralizzate e un limite di due badge per card.

Shopify Liquid tag taxonomy snippet architecture.

02

Commerce interattivo senza librerie

SfidaOffrire quick add, carrello live e ricerca predittiva, funzioni per cui molti store installano app a pagamento, mantenendo il tema leggero.

SoluzioneUn unico file JavaScript di circa 900 righe, senza dipendenze, parla direttamente con le API AJAX di Shopify: aggiunta al carrello con toast di conferma, sincronizzazione dello stato riga per riga con debounce e recupero errori, suggerimenti di ricerca con anteprima prodotto.

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

03

Licenza del tema dentro i vincoli di Liquid

SfidaUn tema Shopify è un pacchetto di file facilmente copiabile su altri store, e Liquid non offre un backend su cui appoggiare un controllo licenze.

SoluzioneIl layout verifica a runtime il dominio dello store contro una whitelist. Fuori licenza il tema mostra una pagina di blocco e marca le pagine noindex. Un controllo commerciale reale ottenuto solo con le primitive della piattaforma.

Liquid (shop.permanent_domain request.host).

04

Art direction dal Theme Editor

SfidaLe foto prodotto non nascono per una cornice ad arco: ogni immagine richiede un'inquadratura diversa.

SoluzioneOgni slide espone controlli di posizione orizzontale, verticale e zoom che il Theme Editor traduce in CSS custom properties per slide. Il cliente compone la vetrina senza fotoritocco.

Liquid section schema CSS custom properties.

05

Menu mobile accessibile sul serio

SfidaI drawer menu mobile spesso rompono focus e scroll, penalizzando utenti da tastiera e screen reader.

SoluzioneFocus trap con gestione inert, blocco dello scroll con ripristino della posizione, chiusura con Escape e ritorno del focus all'elemento di origine.

Vanilla JS ARIA.

architetturacome sta in piedi

Il sistema è un tema Shopify Online Store 2.0 puro che abbiamo scritto per intero: 26 sezioni Liquid componibili dal Theme Editor, 16 snippet riutilizzabili e template JSON per ogni tipologia di pagina. I dati di merchandising vivono in Shopify, cioè prezzi, tag con tassonomia a prefissi e metafield custom.*, e il tema li interpreta a runtime: i prezzi generano i badge sconto, i tag generano i badge editoriali, i metafield alimentano i contenuti di prodotto e programma con fallback ordinati.

Il livello interattivo è un singolo file JavaScript senza dipendenze che dialoga con le API AJAX native di Shopify per carrello e ricerca. L'aspetto è governato dai design token che abbiamo definito (CSS custom properties collegate alle impostazioni del tema), quindi la palette è modificabile dal Theme Editor. Il layout include infine un controllo di licenza per dominio che blocca il tema sugli store non autorizzati.

Galleria