So designt man einen Shopify-Store für Food- & Beverage-Brands

Wichtigste Takeaways

• Ein Shopify-Store für Food & Beverage verkauft zwei Dinge, die ein Bildschirm nicht vermitteln kann: Geschmack und Frische. Jede Designentscheidung sollte eines davon glaubwürdig machen.
• Füge Zutaten, Allergene und Nährwerte auf der Produktseite als Metafields hinzu, statt sie als Text in die Beschreibung zu kopieren. So wird eine Definition im gesamten Katalog einheitlich gerendert.
• Verbrauchsgüter werden nachgekauft, designe also für die zweite Bestellung: Subscription-Optionen in der Buy Box und Probierpakete, die neue Kunden anziehen.
• Verderbliche Waren erfordern Ehrlichkeit beim Versand auf der Produktseite: Versandtage, isolierte Verpackungen und Lieferfenster sollten vor dem Checkout angegeben werden und nicht erst in einer E-Mail.
• Alkohol und gesundheitsbezogene Produkte unterliegen regulatorischen Pflichten, die je nach Gerichtsbarkeit variieren – berücksichtige Verifizierungen und vorsichtige Formulierungen beim Design.

Einen Shopify-Store für Lebensmittel und Getränke (Food & Beverage) zu designen, bedeutet, etwas zu verkaufen, das der Käufer weder schmecken, riechen noch auf Frische prüfen kann. Jeder starke F&B-Store gleicht das mit den gleichen drei Schritten aus: Fotografie, die Appetit macht, Transparenz, die Vertrauen schafft, und ehrliche Logistikangaben, die die Angst vor geschmolzenen Lieferungen nehmen.

Dieser Guide behandelt diese Entscheidungen Muster für Muster, von der Fotografie über Allergen-Tabellen bis hin zu Kühlketten-Erwartungen, und wie sich alles auf der Startseite, den Collection- und Produktseiten einfügt.

Wenn du zuerst visuelle Referenzpunkte suchst, durchstöbere unsere Übersicht der besten Shopify-Stores, die mehrere F&B-Brands enthält, und komme dann zurück, um zu sehen, wie sie aufgebaut sind.

Warum du uns vertrauen kannst

Wir sind seit über vier Jahren im Shopify-Bereich tätig und haben mit Hunderten von Shopify-Brands an deren Storefronts gearbeitet, darunter Lebensmittel-, Getränke- und Nahrungsergänzungsmittel-Marken – von Start-ups mit einem einzigen Produkt bis hin zu etablierten DTC-Namen. Wir entwickeln Fudge, einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store. Wir arbeiten also genau auf der Theme-Ebene, auf der diese Entscheidungen getroffen werden.

Warum Food- & Beverage-Design eine eigene Disziplin ist

Apparel-Design (Bekleidung) kämpft mit der Frage nach der Passform. F&B-Design kämpft gleich mit vier verschiedenen Fragen:

• Der Geschmack ist unbekannt. Kein Text kann beweisen, dass eine scharfe Soße gut schmeckt. Fotografie, Bewertungen und Probierpakete übernehmen stattdessen die Beweislast.
• Zutaten werden genau geprüft. Käufer mit Allergien, bestimmten Ernährungsweisen oder religiösen Vorschriften lesen zuerst die Etiketten. Ist der Inhalt des Etiketts nicht auf der Seite zu finden, gehen sie.
• Das Produkt ist ein Verbrauchsgut. Ein zufriedener Kunde kauft wieder. Das macht Retention-Design – Subscriptions, Reorder-Flows – zu einem erstklassigen Storefront-Anliegen.
• Die Logistik verzeiht nichts. Schokolade schmilzt, Kombucha braucht eine Kühlkette, Kaffee wird alt. Das Lieferversprechen ist Teil des Produkts.

Bei Alkohol kommt ein fünfter Punkt hinzu: Regulierung. Sie prägt alles, vom Age Gate (Altersprüfung) bis hin zu dem, was in Werbetexten behauptet werden darf.

Die Fashion-Version dieser Methode findest du unter Wie man einen Shopify-Store für Fashion-Brands designt; die untenstehende Struktur ist daran angelehnt.

Appetit führt: Fotografie und Farbe

Lebensmittel kauft man mit den Augen. Die erste Designentscheidung auf jeder Seite ist, ob die Bilder hungrig oder durstig machen; alles andere ist zweitrangig.

Die vier Bilder, die eine F&B-Produktseite braucht

Der Pack Shot (Produktfoto) beantwortet „was ankommt“. Sauber, frontal, Etikett lesbar. Er wird in Collection-Grids, Suchergebnissen und Ads verwendet.

Der Appetite Shot beantwortet „wie es schmeckt“. Das eingeschenkte Glas, die abgebrochene Schokoladentafel, die Soße beim Träufeln. Texturen aus nächster Nähe kommen dem Geschmack auf einem Bildschirm am nächsten, also nutze Makroaufnahmen.

Der Context Shot beantwortet „wie es verwendet wird“. Ein Frühstückstisch oder ein Cocktail zeigen Portion, Anlass und Zielgruppe in einem Bild. Wenn der Teller ein Serviervorschlag ist, erwähne das.

Der Scale Shot beantwortet „wie viel“. Ein einziges Bild mit einer Hand oder einer Tasse erspart dir eine Welle von „kleiner als erwartet“-Bewertungen.

Video ist hier besonders wertvoll: Ein Einschenken, ein Umrühren oder ein Knacken vermittelt eine Textur, die kein Standbild zeigen kann, und Shopify hostet Videos direkt in der Produktgalerie.

Farbe: Lass das Produkt die Palette bestimmen

Zwei Muster dominieren:

• Neutraler Hintergrund, lautes Produkt. Weiße oder warm-neutrale Hintergründe, die die Verpackung und die Farbe der Lebensmittel wirken lassen. Der Standard für Sortimente, bei denen Geschmacksrichtungen farblich gekennzeichnet sind.
• Markengesättigt (Brand-saturated). Die gesamte Seite ist in der Farbwelt der Marke gehalten und das Produkt ist passend fotografiert. Stark für Marken mit einem einzigen Hero-Produkt, riskant bei großen Katalogen.

So oder so sollte die Geschmacksnavigation visuell sein: Swatches (Farbmuster) oder Thumbnail-Kacheln, kein Text-Dropdown. Ein Shopify-Produkt unterstützt bis zu drei Optionen und 2.048 Varianten, und jeder Variante kann ein eigenes Bild zugewiesen werden. Ein Flavour-Selector, der das Galeriebild austauscht, ist also natives Theme-Verhalten.¹

Der Bildertest für jede F&B-Seite besteht aus einer Frage: Bekommt man beim Scrollen Lust, das Produkt zu essen oder zu trinken?

Transparenz bei Zutaten und Nährwerten

Das Etikett ist online kein juristisches Kleingedrucktes – es ist ein Conversion-Asset. Käufer, die auf Zutaten achten, sind deine Besucher mit der höchsten Kaufabsicht. Die Seite gibt ihnen entweder eine Antwort oder verliert sie.

Strukturiere die Daten als Metafields

Füge Nährwertangaben in eine Beschreibung ein, und du erhältst eine inkonsistente Formatierung und musst sie bei jeder neuen Rezeptur neu abtippen. Speichere die Daten stattdessen als Metafields und Metaobjects, und lass Sections sie auf jedem Produkt identisch rendern:

Die Listen-Metafields dienen gleichzeitig als Filterquellen: Die Search & Discovery App von Shopify erstellt Collection-Filter aus Metafields. So werden „glutenfrei“ oder „ohne Zuckerzusatz“ zu One-Click-Filtern. Sperre das Vokabular in der Metafield-Definition, damit „Vegan“ und „vegan“ nie zu zwei verschiedenen Filterwerten werden.

Allergene: Sichtbar, nicht versteckt

Allergeninformationen gehören in die Nähe des Preises, Above the Fold. Ein Käufer mit einer Nussallergie sollte niemals scrollen müssen, um zu erfahren, dass ein Produkt für ihn nicht sicher ist.

Das zuverlässigste Muster ist eine Badge-Reihe – „Enthält: Milch, Soja“ plus Zertifizierungs-Icons – die aus dem Metafield gerendert wird. So weicht sie nie von der physischen Verpackung ab und behauptet nie mehr als das gedruckte Etikett.

Sourcing als Section, nicht als Absatz

„Single-Origin“ und „Small Batch“ konvertieren, wenn sie spezifisch sind: eine benannte Region, ein namentlich genannter Produzent, ein Erntedatum. Eine Sourcing-Section mit einem Foto der tatsächlichen Farm performt besser als ein Absatz voller Adjektive, weil Spezifität wie ein Beweis wirkt.

Das sind klassische Jobs für Custom Sections: Der Sourcing-Block, die Allergen-Badge-Reihe und die Nährwerttabelle sind genau die Sections, die den meisten Themes fehlen. Wenn du sie Fudge beschreibst, werden sie als native Theme-Sections erstellt, die deine Metafields auslesen, anstatt hart codierten Text zu verwenden, den du für jedes Produkt neu abtippen musst.

Alles, was auf dem physischen Etikett steht, sollte auf der Produktseite auffindbar sein, ohne blind danach scrollen zu müssen.

Die regulierten Bereiche: Age Gates und Claims

Nichts in diesem Artikel ist eine Rechtsberatung. Die Vorschriften für Lebensmittel, Alkohol und Nahrungsergänzungsmittel unterscheiden sich je nach Land, Bundesland und Produkt. Kläre deine Pflichten also mit einem Profi, bevor du baust.

Brauchst du ein Age Gate?

Wenn du Alkohol verkaufst, erfordert die Shopify-Richtlinie „wirksame Praktiken zur Altersverifizierung“, damit Alkohol nicht von minderjährigen Kunden gekauft oder entgegengenommen werden kann, zusammen mit der Einhaltung der Gesetze deiner eigenen Gerichtsbarkeit und der deiner Kunden.²

Zwei Design-Ebenen lösen unterschiedliche Probleme:

• Das Entry Age Gate – das „Bist du über 18/21?“ Interstitial. Gestalte es schnell: Im Brand-Design, eine Interaktion, speichere die Antwort, und mach niemals ein getarntes Newsletter-Popup daraus.
• Verifizierung beim Kauf oder bei Lieferung – Ausweiskontrollen durch eine Verifizierungs-App im Checkout oder eine Altersprüfung durch den Paketdienstleister bei der Zustellung. Das selbst deklarierte Gate allein erfüllt selten die gesamte Pflicht.

Das Gate ist eine Compliance-Ebene, keine Conversion-Ebene. Halte es von allem anderen fern.

Health Claims und Disclaimers

Funktionelle Getränke und „Wellness“-Lebensmittel unterliegen in den meisten Märkten den Werbe- und Health-Claim-Verordnungen. Das sichere Vorgehen ist überall dasselbe:

• Beschreibe Zutaten und lass sie die Story tragen („200 mg L-Theanin pro Dose“), anstatt Ergebnisse zu versprechen.
• Platziere erforderliche Disclaimers an einem einheitlichen, gut lesbaren Ort – als Standard-Block auf der PDP, nicht als grauer 9px-Text im Footer.
• Moderiere Bewertungs-Inhalte: Angezeigte Kundenbewertungen, die gesundheitliche Ergebnisse versprechen, können dasselbe rechtliche Risiko bergen wie Claims, die du selbst geschrieben hast.

Subscriptions: Designe für die zweite Bestellung

Kaffee geht leer. Hundefutter geht leer. Wenn das Produkt ein Verbrauchsgut ist, ist die wertvollste Design-Fläche im Store der Subscribe-and-Save-Block in der Buy Box.

Die Muster, die hier funktionieren:

• Einmaliger Kauf und Abo (Subscribe) nebeneinander, wobei die Ersparnis pro Stück in der jeweiligen Währung und nicht nur als Prozentsatz angezeigt wird.
• Standard-Frequencies, die dem Verbrauch entsprechen. Eine 250-g-Kaffeetüte reicht etwa für einen Zwei-Wochen-Rhythmus. Ein Standardwert von „alle 30 Tage“ führt leise zu einem Berg von ungenutzten Produkten und zukünftigen Kündigungen.
• Sprich die unausgesprochenen Sorgen an: „Jederzeit überspringen, pausieren oder kündigen“ direkt neben der Auswahl. Das Zögern bei Abos ist meist die Angst, in einer Falle zu stecken.
• Eine „Wie es funktioniert“-Section weiter unten auf der Seite: Drei Schritte, Lieferrhythmus, Verwaltung.

Was das Tooling betrifft, deckt die kostenlose Subscriptions-App von Shopify die Basics ab – wöchentliche, monatliche und jährliche Rhythmen, Rabatte und einen Self-Service-Bereich für Kunden, um Abos zu überspringen, zu pausieren oder zu kündigen.³ Brands, die Prepaid-Gifting oder Build-a-Box-Funktionen benötigen, greifen meist zu einer dedizierten App. Wir vergleichen die Optionen in unserem Überblick der besten Shopify Subscription Apps.

Die Billing-Engine ist Aufgabe der App. Der Presentation Layer – Widget-Styling, Berechnung der Ersparnis, die Erklärung – ist Sache des Themes. Hier verlieren die meisten Subscription-PDPs unbemerkt Geld, weil sie einfach den Standard-Look der App übernehmen.

Bundles und Variety Packs: Wie Neukunden das Sortiment probieren

Das Risiko, dass es nicht schmeckt, ist die größte Hürde für eine erste F&B-Bestellung, und das Probierpaket (Variety Pack) ist die Design-Antwort darauf: Verringere das Risiko eines einzelnen Geschmacks, indem du die gesamte Auswahl verkaufst.

Drei Bundle-Muster decken die meisten Stores ab:

• Der Sampler – ein festes Starterpaket mit Bestsellern, das als Standard für den Erstkauf positioniert ist. Vermarkte es im Hero-Bereich, in der Navigation und ganz oben in den wichtigsten Collections.
• Der Mix-and-Match-Builder – „Wähle beliebige 6“ aus dem Sortiment, was die Angst vor dem falschen Geschmack in ein Spiel verwandelt. Das stärkste Muster für Getränke und Snacks.
• Das Gift Set (Geschenkset) – kuratiert, saisonal, mit passendem Preis zum Verschenken. Die Grußnachricht wird als Line-Item-Property erfasst und nicht als Variante.

Auf der Plattformseite deckt die kostenlose First-Party Bundles-App von Shopify feste Bundles mit bis zu 30 Teilprodukten und Customer-Choice-Bundles mit bis zu 150 ab, wobei die Verfügbarkeit anhand des echten Komponentenbestands getrackt wird.⁴ Der Build an sich – Layout, Flavour-Tiles, Fortschrittsbalken – ist ein Page-Design-Problem, das in wie man eine Bundle-Seite in Shopify erstellt behandelt wird. Fudge baut dies als native Bundle-Builder-Seite aus einem Prompt: Beschreibe die Regeln und das Sortiment, und die Section kommt als Theme-Code, der mit deinen Produkten verdrahtet ist.

Bundles sind das Akquise-Tool, Subscriptions das Retention-Tool, und ein starker F&B-Store designt den Weg von dem einen zum anderen.

Versanderwartungen: Kühlkette, Lieferfenster und Ehrlichkeit

Bei verderblichen und schmelzenden Produkten ist das Lieferversprechen Teil des Produkts und gehört auf die Storefront – und nicht erst in eine Bestellbestätigung.

Gib die Versandtage in der Buy Box an. Viele Brands mit verderblichen Waren versenden von Montag bis Mittwoch, damit Pakete nicht übers Wochenende in einem Depot liegen bleiben. „Bestellungen bis Sonntag werden am Montag verschickt“ neben dem Add-to-Cart-Button verwandelt eine Einschränkung in Kompetenz.

Erkläre die Verpackung einmal, nutze sie überall wieder. Eine kurze „Wie wir versenden“-Section – Isolierfolie, Kühlakkus, welcher Zustand bei der Ankunft zu erwarten ist – beantwortet die Angst vor geschmolzener Schokolade, bevor sie überhaupt aufkommt. Integriere dies als Shared Section auf jeder PDP für verderbliche Waren.

Saisonale Ehrlichkeit schlägt saisonales Schweigen. Wenn die Sommerhitze den Schokoladenversand in einige Regionen pausiert, sag es auf der Seite. Ein sichtbarer Hinweis kostet ein paar Verkäufe; eine geschmolzene Box kostet dich die Bewertung und den Kunden.

Lieferfenster, wo sie wichtig sind. Frische Lebensmittel und Kochboxen werden oft an festgelegten Tagen je Region geliefert. Setze das Liefertag-Versprechen also auf die Produktseite und einen Postleitzahlen-Checker in den Hero-Bereich, wenn der Katalog davon abhängt.

Für echt lokale Sortimente unterstützt die integrierte Local-Delivery-Funktion von Shopify einen Radius von bis zu 160 km (oder bestimmte Postleitzahlen), bis zu 10 Lieferzonen pro Standort sowie Preise pro Zone mit Mindestbestellwerten.⁵ Das deckt Modelle wie eine Bäckerei mit Stadtradius auch ohne Kurier-App ab.

Bewertungen und UGC für Produkte, die man schmeckt

Geschmack ist subjektiv, was in beide Richtungen geht: Keine Bewertung beweist, dass es dir schmecken wird, aber die Menge beweist, dass es den meisten schmeckt. Die F&B-spezifischen Muster:

• Stelle geschmacksspezifische Fragen im Bewertungsformular – „Wie würdest du den Geschmack beschreiben?“ – damit sich Bewertungen wie Verkostungsnotizen lesen und nicht wie Logistik-Feedback.
• Mache Bewertungen auf Geschmacksebene sichtbar bei Multi-Flavour-Produkten; „4,9 für Mango, 4,1 für Original“ ist eine wirklich nützliche Kaufentscheidungshilfe.
• Kundenfotos schlagen Studiofotos als Beweis. Der leicht unperfekte Schnappschuss aus der Küche vermittelt eine Glaubwürdigkeit, die man mit Studiofotografie nicht kaufen kann.
• Rezepte sind UGC mit Reichweite. Eine „Gemacht mit“-Section voller Kundenrezepte hält das Produkt in Gebrauch, was wiederum Nachbestellungen fördert.

Shopify hat keine integrierten Produktbewertungen, das läuft also über eine dedizierte Bewertungs-App (Review App). Wähle eine mit Foto-Bewertungen und Custom Questions und designe dann, wo dieser Social Proof angezeigt werden soll.

Startseite, Collection- und Produktseiten-Muster

Wie sich die obigen Sections Seite für Seite zusammensetzen.

Startseite (Homepage): Appetite-Hero (Produkt in Aktion, kein Slogan auf einem Stockfoto), Bestseller- oder Sampler-Grid, das Subscription-Wertversprechen als eigene Section, ein Sourcing-Strip, Review-Proof und das Probierpaket als Call-to-Action für Erstkäufer.

Collection Pages: Metafield-gesteuerte Filter für Ernährungsbedürfnisse und Geschmack; Zertifizierungs-Badges auf den Produktkarten; Packungsgröße in den Titeln („12er-Pack“, „250 g“), damit man die Karten auf einen Blick vergleichen kann.

Produktseiten (PDPs), von oben nach unten: Galerie mit Pack-, Appetite-, Context- und Scale-Shots; Bewertungssterne; Allergen-Badge-Reihe; Einmal- vs. Abo-Preise; Flavour-Tiles; Hinweis zu den Versandtagen; Add to Cart. Below the Fold: Akkordeons für Zutaten und Nährwerte, der „Wie wir versenden“-Block, Sourcing, Foto-Bewertungen und ein Cross-Sell in das Bundle.

Die Umsetzung: Theme, Metafields oder Custom Sections

Drei Ebenen tragen alles oben Genannte.

Das Theme trägt die Basis: Galerieverhalten, Varianten-Selektoren, Collection-Grids. Die meisten General-Purpose-Themes kommen gut mit Food-Fotografie zurecht, liefern aber keine der kategoriespezifischen Sections mit.

Metafields tragen die Daten: Zutaten, Allergene, Nährwerte, Zertifizierungen, Lagerung, Sourcing. Diese Ebene überdauert jedes Redesign, also baue sie zuerst und strukturiert auf.

Custom Sections tragen das, was den Store zu einem F&B-Store macht: Die Allergen-Badge-Reihe, die Nährwerttabelle, den Flavour-Selector, den „Wie wir versenden“-Block, den Bundle-Builder, die Abo-Erklärung (Subscription Explainer). Hierfür haben F&B-Brands früher meist einen Entwickler engagiert oder die Rendering-Ebene einer Page-Builder-App in Kauf genommen.

Fudge schließt diese Lücke aus einem Prompt heraus. Beschreibe die Section und Fudge schreibt Liquid, CSS und JavaScript in ein Draft-Theme. Dabei werden deine Produkte und Metafields ausgelesen, sodass das Ergebnis zu deinem Store passt; du schaust es dir in der Vorschau an und veröffentlichst es dann. Die Design-Richtung kommt von Lookbooks – kuratierte Design-Inspirationen von führenden E-Commerce-Brands (Inspiration statt Kopieren). Da das Ergebnis nativer Theme-Code ist, überlebt es auch eine Deinstallation und fügt keine Drittanbieter-Rendering-Skripte hinzu. Du verfeinerst die Ergebnisse im gleichen Shopify Store Editor und nicht in einem separaten Page Canvas.

FAQ