Look And Feel Better

Überblick

Look and Feel Better ist der offizielle Store eines unabhängigen Herbalife Nutrition-Partners in Großbritannien. Das Vertriebsmodell ist kein einfacher Katalog: Es ist der beratungsgestützte Verkauf, bei dem die kostenlose persönliche Beratung – via WhatsApp – der eigentliche Differenzierungsfaktor gegenüber Generalkanälen ist.

Das Theme wurde vollständig von Grund auf als Shopify Online Store 2.0-Theme entwickelt, ohne ein bestehendes Theme als Basis und ohne JavaScript-Framework. Jede technische Entscheidung dient dem Geschäftsmodell: Rabatt-Badges berechnen sich automatisch aus den Preisen, das Merchandising wird über eine Tag-Taxonomie gesteuert, dreistufige Bundle-Programme verfügen über eigene Datenstrukturen und Templates, und der WhatsApp-Beratungskanal ist an jedem Punkt des Funnels integriert und über den Theme Editor aktivierbar. Die Arbeit beschränkte sich nicht auf das Theme: Der gesamte Katalog des Kunden – 99 Produkte – wurde in Shopify mit Produktseiten, Preisen, Tags und Metafeldern digitalisiert, die der Datenarchitektur des Themes entsprechen.

Das Projekt umfasst auch das, was oft fehlt: eine vollständige Bedienungsanleitung, ein Skript für eine Videoanleitung sowie eine gebrandete PDF-Dokumentation, damit der Kunde den Store eigenständig über den Theme Editor verwalten kann. Das gesamte Projekt – Design, Entwicklung, Inhalte und Katalog – wurde in 14 Tagen realisiert, gefolgt von 7 Tagen Revision mit dem Kunden. Die Website ist live mit einem Katalog von 99 Produkten.

Das Produkt

Was Nutzer wirklich sehen.

Wer die Website besucht – oft über Instagram, Facebook oder WhatsApp, also mobil – findet sofort das Angebot: bis zu 35 % Rabatt auf die Preisliste und persönlicher Support. Der Hero-Bereich zeigt die Produkte in einem Slider innerhalb des Bogenrahmens, der die visuelle Identität der Marke definiert, mit zwei Wegen: sofort kaufen oder eine kostenlose Beratung buchen.

Von dort teilt sich der Weg nach Ziel (Gewichtsmanagement, Hydration, Proteine, Skincare) oder nach Einstiegsniveau: drei geführte Programme – Starter, Complete und Premium – die Produkte und Partnerbegleitung kombinieren, wobei das meistverkaufte hervorgehoben wird.

Auf den Produktkarten hat jede Information ihren festen Platz: der tatsächliche Rabatt oben links, der Status (Best Seller, Most Popular) rechts, die Produktfunktion (Meal Replacement, Hydration) unten. Das Hinzufügen zum Warenkorb erfolgt ohne Seitenwechsel mit sofortiger Bestätigung; im Warenkorb werden Mengen in Echtzeit aktualisiert. Die Produktseite beantwortet Fragen in der richtigen Reihenfolge: wofür es gedacht ist, für wen es geeignet ist, wie es verwendet wird – und wenn der Kunde unschlüssig ist, ist der WhatsApp-Kontakt des Partners nur einen Tap entfernt.

Design & visuelle Identität

Jede visuelle Entscheidung hat einen Grund.

Die visuelle Identität stammt von uns – vom ersten Entwurf bis zum letzten Pixel – und ist auf eine einfache Frage aufgebaut: Wie soll ein Ernährungsstore aussehen, der von einer echten Person betrieben wird, nicht von einer Kette?

Warum Grün

Grün ist die natürliche Wahl für eine Marke, die in der Herbalife- und Wellness-Welt lebt: Es kommuniziert Natur, Gesundheit und Frische und ist konsistent mit dem Branchenimage, ohne proprietäre Corporate-Assets zu kopieren. Wir verwenden zwei Töne mit klar definierten Rollen. Das tiefe Dunkelgrün (#0F3D22) rahmt die Website ein: Header, Footer, starke Überschriften und Ankündigungsleiste. Es verleiht Autorität und bildet einen stabilen visuellen Container. Das natürliche Grün (#2E7D32) ist die Farbe der Aktion: primäre CTAs, Add-to-Cart-Buttons, aktive Links und Conversion-Icons. Wer die Website benutzt, lernt innerhalb weniger Sekunden eine implizite Regel: Wo dieses Grün erscheint, wird gehandelt.

Warum Creme statt Weiß

Die Hintergründe der Sektionen sind warmes Creme (#F8F1E6) und die Karten Elfenbein (#FFFDF8). Reines Weiß haben wir bewusst vermieden: Es hätte einen kühlen, apothekenhaften Ton erzeugt, während Creme die Seite wärmt, ihr ein premiumwertigeres und natürlicheres Erscheinungsbild verleiht und vor allem die Produktfotografien zur Geltung bringt, die weiße und grüne Verpackungen zeigen.

Die botanischen Hintergründe

Die Pflanzen sind keine zufällige Dekoration, sie sind der Kontext des Produkts. Im Hero haben wir via CSS gezeichnete dekorative botanische Elemente (laf-hero__botanical) eingefügt, die den Hintergrund hinter dem Produktbild aufweichen. Die Kategorie- und Programmfotos folgen einer klaren Bildsprache, die wir in der Bedienungsanleitung definiert haben: Aloe, Blätter, Natursteine, warmes Licht, cremefarbener Hintergrund. Das Ergebnis ist in den "Shop by Goal"-Karten und den Programmkarten sichtbar, wo die Produkte zwischen Pflanzen und natürlichen Materialien in Szene gesetzt werden. Das positioniert die Produkte als Teil einer Wellness-Routine, nicht als Schachteln in einem Regal.

Die goldenen Akzente: wo und warum

Gold (#C79A2B) ist die Farbe des Wertes, und genau deshalb setzen wir es sparsam ein: Wäre es überall, würde es nichts mehr bedeuten. Wir haben es nur dort platziert, wo es sagen soll "das ist wichtig":

das "35%" im Hero, die wichtigste Zahl des Wertversprechens;
das runde Premium-Badge im Hero ("Exclusive Customer Pricing");
das "Most Popular"-Badge auf der mittleren Programmkarte, realisiert mit einem Gold-Verlauf;
die Eyebrows, also die kleinen Labels über den Sektionsüberschriften ("MEET", "FIND YOUR WELLNESS PRODUCTS");
die kurze Unterstreichung unter den Sektionsüberschriften ("PROGRAMMES & BUNDLES");
der linke Rahmen des Partner-Zitats in der "Meet"-Sektion;
der Rahmen der sekundären CTAs, um sie von den primären grünen CTAs zu unterscheiden, ohne sie abzuwerten;
der aktive Dot des Hero-Sliders und Fokuszustände.

Die Logik ist hierarchisch: Grün führt zur Aktion, Creme schafft Raum, Gold signalisiert Wert. Drei Farben, drei Aufgaben, keine Überschneidungen.

Typografie und Formen

Wir haben uns für eine moderne, sehr gut lesbare Sans-Serif entschieden, mit fetten, kompakten Überschriften und einer fließenden Skala, die auf Mobilgeräten gut skaliert. Keine dekorativen Serifen: Sie hätten einem Bereich, in dem Klarheit Vertrauen bedeutet, Sauberkeit und Glaubwürdigkeit genommen. Die Formen sind durchgehend weich, mit großzügigen Radien auf Karten und Panels sowie sanften grünen Schatten – bis hin zum Bogenrahmen im Hero, der das markanteste Designelement ist und als wiedererkennbares Markenmotiv wiederkehrt.

Die gesamte Palette ist als Design-Tokens implementiert (CSS Custom Properties, die mit den Theme-Einstellungen verknüpft sind): dokumentiert, in jeder Komponente konsistent und im Theme Editor anpassbar, ohne Code anfassen zu müssen.

Zentrale Fähigkeiten

Was es kann, und warum das zählt.

Badges, die nie lügen

Der auf jedem Produkt angezeigte Rabatt wird in Echtzeit durch den Vergleich zwischen Originalpreis und aktuellem Preis berechnet: Er kann niemals mit dem Checkout auseinanderfallen. Die anderen Badges basieren auf einer Tag-Taxonomie, die wir entworfen und dokumentiert haben, damit das Merchandising von 99 Produkten konsistent und ohne Entwickler verwaltbar bleibt.

Einkaufen ohne Unterbrechungen

Produkte direkt von den Karten in den Warenkorb legen mit sofortiger Bestätigung, aktualisiertem Zähler, im Warenkorb anpassbaren Mengen ohne Seitenreload und Live-Suchvorschlägen: alles von uns in reinem JavaScript auf den nativen Shopify-APIs geschrieben, ohne Drittanbieter-Apps.

Programme, nicht nur Produkte

Drei geführte Wege mit Preisen, enthaltenen Produkten und inkludierter Partnerberatung, unterstützt durch dedizierte Datenfelder und ein eigenes Seitentemplate. Das Theme verkauft die Arbeitsweise des Partners, nicht nur den Katalog.

Beratung immer zur Hand

Das Theme integriert den WhatsApp-Kanal an jedem Punkt des Funnels: globaler schwebender Button, CTA im Hero, dedizierter Partner-Bereich und individuell anpassbare Nachricht pro Produkt – alles ohne Code im Theme Editor aktivierbar und konfigurierbar.

End-to-End digitalisierter Katalog

Wir haben das gesamte Sortiment des Kunden digitalisiert – 99 Produkte: Produktseiten, Bilder, Preise mit Compare-at-Price, Collections, Tags und Metafelder. Diese Datenarbeit macht automatische Badges, Filter und Programme im gesamten Katalog erst möglich.

Storefront, die der Kunde selbst pflegt

Der Hero-Slider nimmt bis zu zehn Bilder auf, mit Positions- und Zoom-Reglern für jede Slide direkt im Theme Editor: Der Kunde gestaltet den Bildausschnitt ohne Bildbearbeitungswerkzeuge.

Ein Blick in die Technik

Die interessanten Probleme, und wie wir sie gelöst haben.

01

Ein Badge-System, das keine Fehler macht

HerausforderungBei einem Katalog mit laufenden Aktionen enden manuell gepflegte Rabatt-Badges unweigerlich im Widerspruch zu den tatsächlichen Preisen.

LösungRabatte sind niemals vom Betreiber eingegebene Inhalte: Eine Komponente berechnet sie aus dem Preisvergleich der Variante. Redaktionelle Badges basieren auf Tags mit Präfixen (status:, goal:, role: und andere), orchestriert von einer einzigen Komponente mit zentralisierten Labels und einem Limit von zwei Badges pro Karte.

Shopify Liquid tag taxonomy snippet architecture.

02

Interaktiver Commerce ohne Bibliotheken

HerausforderungQuick Add, Live-Warenkorb und Predictive Search anzubieten – Funktionen, für die viele Stores kostenpflichtige Apps installieren – ohne das Theme schwer zu machen.

LösungEine einzige JavaScript-Datei mit rund 900 Zeilen, ohne Abhängigkeiten, kommuniziert direkt mit den AJAX-APIs von Shopify: Warenkorb-Hinzufügen mit Toast-Bestätigung, zeilenweise Statussynchronisierung mit Debounce und Fehlerbehandlung, Suchvorschläge mit Produktvorschau.

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

03

Theme-Lizenzierung innerhalb der Liquid-Grenzen

HerausforderungEin Shopify-Theme ist ein Dateipaket, das leicht auf andere Stores kopiert werden kann, und Liquid bietet kein Backend für eine Lizenzprüfung.

LösungDas Layout prüft zur Laufzeit die Store-Domain gegen eine Whitelist. Außerhalb der Lizenz zeigt das Theme eine Sperrseite und markiert alle Seiten als noindex. Eine echte kommerzielle Kontrolle, die ausschließlich mit den Plattform-Primitiven realisiert wurde.

Liquid (shop.permanent_domain request.host).

04

Art Direction direkt im Theme Editor

HerausforderungProduktfotos sind nicht für einen Bogenrahmen konzipiert: Jedes Bild braucht einen eigenen Bildausschnitt.

LösungJede Slide verfügt über Regler für horizontale und vertikale Position sowie Zoom, die der Theme Editor in CSS Custom Properties pro Slide übersetzt. Der Kunde gestaltet die Storefront ohne Bildbearbeitung.

Liquid section schema CSS custom properties.

05

Wirklich zugängliches mobiles Menü

HerausforderungMobile Drawer-Menüs brechen häufig Fokus und Scroll, was Tastatur- und Screenreader-Nutzer benachteiligt.

LösungFocus Trap mit inert-Verwaltung, Scroll-Sperre mit Positionswiederherstellung, Schließen per Escape-Taste und Rückgabe des Fokus an das auslösende Element.

Vanilla JS ARIA.

architekturwie es zusammenhält

Das System ist ein reines Shopify Online Store 2.0-Theme: 26 im Theme Editor kombinierbare Liquid-Sektionen, 16 wiederverwendbare Snippets und JSON-Templates für jeden Seitentyp. Die Merchandising-Daten leben in Shopify – Preise, Tags mit Präfix-Taxonomie und custom Metafelder – und das Theme interpretiert sie zur Laufzeit: Preise generieren Rabatt-Badges, Tags generieren redaktionelle Badges, Metafelder speisen Produkt- und Programminhalte mit geordneten Fallbacks.

Die interaktive Ebene ist eine einzige JavaScript-Datei ohne Abhängigkeiten, die über die nativen AJAX-APIs von Shopify mit Warenkorb und Suche kommuniziert. Das Erscheinungsbild wird durch Design-Tokens (CSS Custom Properties) gesteuert, die mit den Theme-Einstellungen verknüpft sind, sodass die Farbpalette direkt im Theme Editor angepasst werden kann. Das Layout umfasst außerdem eine Domain-Lizenzprüfung, die das Theme auf nicht autorisierten Stores sperrt.

Galerie

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

Los geht's

Ein Projekt wie dieses, auch für dich?

Wir starten mit einer Analyse deines Flows. Unverbindlich.

Analysieren wir deinen Flow Weitere Projekte