Batik – Theme-Dokumentation

Batik ist ein Shopify-Theme (Online Store 2.0) für Spezialitäten-Lebensmittelhändler: asiatische, afrikanische, lateinamerikanische, orientalische und andere Importeure, Feinkostläden und Gewürzhändler. Es verbindet warme Farbschemata, eine Bibliothek aus 15 handgezeichneten Weltmustern (Damast, Dayak, Kawung, Zellige, Paisley, Kente …), die jede Sektion nutzen kann, Produktkennzeichnungen aus Tags (Halal, vegan, bio, Schärfegrad, Bestseller) und alles, was ein Lebensmittelshop braucht: Grundpreise, Mindesthaltbarkeitsdaten, Allergen- und Nährwert-Blöcke, Schnellfilter, Schnellansicht, eine Schnelle Bestellliste, ein Glücksrad und einen Warenkorb-Drawer mit Versandkosten-Fortschritt – alles ohne Apps.

Version: 1.0.0 · Support: siehe Support · English version

1. Installation

1. Im Shopify-Admin Onlineshop → Themes öffnen.
2. Batik aus dem Theme Store hinzufügen (oder Theme hinzufügen → ZIP-Datei hochladen, wenn du ein Paket erhalten hast).
3. Anpassen öffnet den Theme-Editor. Die Startseite ist komplett vorbereitet (Hero-Slideshow, Vertrauensleiste, Kategorie-Kacheln, vorgestellte Kollektion, Vorteils-Spalten, Bild mit Text, vorgestelltes Produkt, zweite Kollektion, Teaser-Banner, Blog-Beiträge, FAQ, Newsletter). Alle Texte sind Platzhalter – ersetze sie durch eigene Inhalte und wähle deine Kollektionen.
4. Menüs unter Onlineshop → Navigation anlegen: Batik nutzt main-menu (bis zu drei Ebenen, auf dem Desktop als Mega-Menü) und footer; der Footer kann weitere Menüs anzeigen.
5. Veröffentlichen, sobald alles passt.

Batik benötigt keine App. Bewertungen, Abos, Treueprogramme oder Wunschlisten lassen sich über Apps mit App-Blöcken ergänzen (Abschnitt 8).

2. Theme-Einstellungen (Anpassen → Theme-Einstellungen)

3. Produkt-Tags und Kennzeichnungen

Batik liest Kennzeichnungen aus Produkt-Tags – ohne Metafelder oder Apps:

Groß-/Kleinschreibung spielt keine Rolle; die Tag-Namen lassen sich unter Theme-Einstellungen → Produktkennzeichnungen ändern. Ausverkauft, Sale, Restbestand und „Neu" werden aus Bestand, Vergleichspreis und Veröffentlichungsdatum berechnet – ganz ohne Tags.

Grundpreise (Preis pro kg/l) erscheinen überall automatisch, sobald sie in Shopify hinterlegt sind: Grundpreis an der Variante im Produkt-Admin setzen.

3a. Mindesthaltbarkeitsdatum (Metafeld)

Unter Einstellungen → Benutzerdefinierte Daten → Produkte (optional auch Varianten) eine Metafeld-Definition anlegen: Namespace batik, Schlüssel best_before, Typ Datum. Das Datum je Produkt oder Variante eintragen. Batik zeigt dann:

• ein Badge auf den Produktkarten – neutral, wenn das Datum weit weg ist (optional), in Akzentfarbe ab X Tagen vor dem Datum („MHD 2.10.2026“) und „MHD überschritten“ nach Ablauf (abschaltbar);
• den Block Mindesthaltbarkeitsdatum auf der Produktseite (Datum, Resttage, ein im Block editierbarer Hinweis bei kurzem MHD);
• eine Zeile im Warenkorb.

Metafeld-Schlüssel, Schwelle, „immer auf Karten zeigen“ und der Umgang mit abgelaufenen Daten stehen unter Theme-Einstellungen → Produktkennzeichnungen. Für eine Kollektion „Rette mich – reduziert“ die reduzierten Produkte taggen (z. B. reduziert) und den Tag als Regel der automatischen Kollektion und als Schnellfilter nutzen (Abschnitt 5a).

3b. Zutaten, Nährwerte, Allergene (Metafelder)

Drei Produktblöcke lesen Metafelder, die du unter Einstellungen → Benutzerdefinierte Daten → Produkte anlegst (Namespace batik; die Schlüssel sind je Block änderbar):

Blöcke ohne Wert bleiben im Shop unsichtbar und zeigen nur im Editor einen Hinweis.

4. Sektionen

Startseite und alle JSON-Templates können diese Sektionen nutzen (Sektion hinzufügen im Editor):

• Slideshow – Hero über die volle Breite mit mehreren Slides, Inhaltsbox, optionalem Muster-Overlay, Wellenkante, Autoplay mit Pause-Steuerung, ein oder zwei Buttons je Slide. Auf der Startseite Als H1 verwenden für den ersten Slide aktivieren.
• Vertrauensleiste – drei bis fünf Icon-Einträge (Versand, Verpackung, Fragen …).
• Kategorie-Kacheln – Kollektionskarten mit Bild-Overlay oder Bildunterschrift; genutzt wird das Kollektionsbild oder das erste Produktbild.
• Vorgestellte Kollektion – Raster oder scrollbares Regal mit Produktkarten (Schnellkauf, Kennzeichen, Grundpreise).
• Vorgestelltes Produkt – ein Produkt mit Blöcken: Kennzeichen, Marke, Titel, Preis, Text, Beschreibung, Variantenauswahl, Kauf-Buttons (Dynamic Checkout), Link. Unterstützt App-Blöcke.
• Bild mit Text, Rich Text, Mehrspaltig (Icons, Bilder oder Karten), Teaser-Banner, Trenner (Linie mit optionalem Text, Welle, Ornament oder Musterstreifen; Linienart, Stärke, Wellenhöhe und -anzahl, Muster und Mustergröße, Breite, Ausrichtung, Höhe, Abstände, eigene Farbe und Deckkraft einstellbar), Laufschrift (durchlaufende Botschaften, Tempo, Richtung, Trennzeichen), Bildergalerie (Kachelraster mit Bildern und Videos, Kacheln in Standard/Breit/Hoch/Groß, Großansicht), Zahlen und Fakten (Kennzahlen mit Hochzähl-Animation), Zeitstrahl (Meilensteine mit Jahr, Text und Bild, abwechselnd oder einseitig), Kollektions-Tabs (mehrere Kollektionen per Tab in einer Sektion).
• Blog-Beiträge, Kundenstimmen, Logo-Liste, Video (Shopify-Video oder YouTube/Vimeo – erst nach Klick geladen), Ladengeschäft (Adresse, Öffnungszeiten, Anfahrt – ohne externe Karten-Skripte), FAQ (Akkordeon mit FAQ-Strukturdaten), Newsletter, Kontaktformular, Custom Liquid.
• Glücksrad – Rabatt-Gamification ohne App: bis zu 12 Segmente (Beschriftung, Rabattcode aus Rabatte, Niete, Gewichtung, Farbe), im Seitenfluss oder als Popup (Auslöser: Verzögerung, Scrollen oder Exit-Intent – wenn die Maus die Seite nach oben verlässt; auf Touch-Geräten gilt die Verzögerung), optionale E-Mail-Pflicht (trägt in den Newsletter ein), ein Versuch je Besucher, Ergebnis mit „Code kopieren“ und „Code anwenden“.
• Vorher/Nachher – zwei Bilder mit verschiebbarem Vergleichsregler (Tastatur und Touch), Beschriftungen und Seitenverhältnis.
• Bild mit Produkt-Punkten – Punkte auf einem Bild (Position in Prozent) öffnen eine kleine Produktkarte mit Preis und Schnellansicht oder einen freien Text mit Link.
• Zuletzt angesehen – Produkte, die der Besucher zuletzt aufgerufen hat (im Browser gespeichert); erscheint erst, wenn es etwas zu zeigen gibt.
• Schnelle Bestellliste – Tabelle aller Varianten einer Kollektion mit Mengenfeldern und einem Button „Alles in den Warenkorb“, mit Suchfeld für lange Listen; auch als Template collection.order-list (einer Kollektion unter Theme-Vorlage zuweisen).
• Promo-Popup und Altersverifizierung liegen in der Footer-Gruppe und sind damit auf jeder Seite da: Das Popup öffnet einmal je Besucher (Verzögerung, Scrollen oder Exit-Intent) mit Bild, Text und Newsletter-Formular oder Button; die Altersabfrage sperrt den Shop, bis der Besucher sein Alter bestätigt (X Tage gemerkt; standardmäßig aus).
• Header (Logo und separates Mobil-Logo, Logo links oder mittig, Menü unter dem Logo, Beschriftungen neben den Icons, transparenter Header über der ersten Startseiten-Sektion, Menü, Mega-Menü mit Kollektionsbildern und Menü-Promo-Blöcken, Sticky-Option, Welle, Länder-/Sprachauswahl im mobilen Menü), Ankündigungsleiste (Meldungen mit optionalen Links, Countdown-Block, Länder- und Sprachauswahl – einzeln abschaltbar), Footer (Text-, Menü-, Social-, Newsletter-Blöcke, Zahlungs-Icons, Richtlinien-Links, Länder- und Sprachauswahl – einzeln abschaltbar), Kollektions-Banner (Bild, vollständige Beschreibung oder Kurzauszug).

4a. Sektionshintergründe

Jede Sektion – auch Vertrauensleiste, Newsletter und Kollektions-Banner – hat eine Gruppe Hintergrund: Transparent (der Seitenhintergrund mit seinem Muster läuft ohne Unterbrechung durch), Deckend, Muster oder Bild – jeweils volle Breite. Nur Header, Footer und Ankündigungsleiste sind immer farbige Bänder. Bei Muster wählst du eine Familie aus der Bibliothek (oder „wie Theme-Einstellung“), die Deckkraft und optional eine Farbe, die die Musterfarbe des Farbschemas überschreibt; bei Bild ein Hintergrundbild und wie stark es mit der Hintergrundfarbe des Schemas abgedunkelt wird. Slideshow, Newsletter und Teaser-Banner haben zusätzlich eine eigene Musterwahl.

4b. Countdown

Ein Countdown-Block gibt es in der Ankündigungsleiste, in Rich Text und auf der Produktseite; Teaser-Banner und jeder Slideshow-Slide haben Countdown-Einstellungen. Ende als JJJJ-MM-TT HH:MM in der Zeitzone des Shops eingeben (z. B. 2026-12-24 18:00), optional Beschriftung und ein Text nach Ablauf. Der Block auf der Produktseite kann zusätzlich ein Metafeld Datum und Uhrzeit batik.offer_ends je Produkt lesen.

Produktseiten-Blöcke (Produktinformationen): Kennzeichen, Marke, Titel, Preis (Steuerhinweis, Shop-Pay-Raten), Artikelnummer, Bestandsstatus mit optionalem Bestandsbalken, Text, Variantenauswahl (Buttons/Swatches oder Dropdown), Kauf-Buttons (Menge, Mengenregeln und Staffelpreis-Tabelle, Dynamic Checkout, Abholverfügbarkeit, Gutschein-Empfängerformular), Lieferzeit-Hinweis („Bestell innerhalb von 2 Std. – Lieferung Di–Do“: Bestellschluss, Bearbeitungstage, Versanddauer, Samstag als Werktag), Schnelle Bestellliste (alle Varianten als Tabelle), Mindesthaltbarkeitsdatum, Beschreibung, Zutaten-/Nährwert-/Allergen-Blöcke (3b), aufklappbare Zeilen (eigener Text oder eine Seite), Countdown, Teilen, ergänzende Produkte, Custom Liquid und App-Blöcke. Eine Sticky-Kaufleiste mit Preis und „In den Warenkorb“ erscheint am unteren Rand, sobald der Kauf-Button aus dem Bild gescrollt ist (Sektionseinstellung). Medien-Einstellungen: Galerie-Layout auf dem Desktop (Karussell mit Thumbnails, gestapelt oder Raster mit zwei Spalten – mobil scrollt die Galerie immer), Thumbnails unten oder links, Bildformat, Zoom (Lightbox oder Vergrößern beim Überfahren mit Lightbox per Klick) und welche Spalte beim Scrollen stehen bleibt (Medien, Produktinformationen oder beide – dann bleibt die kürzere Spalte stehen). Ein Block Produktbewertung zeigt die Bewertung aus dem Standard-Metafeld reviews.rating. Die Sektion Ähnliche Produkte nutzt Shopifys Produktempfehlungen.

Blogartikel können mit dem Block Zutaten kaufen enden: Ein Metafeld Produktliste batik.recipe_products an Blogartikeln anlegen (Einstellungen → Benutzerdefinierte Daten → Blogbeiträge), je Rezept die Zutaten wählen – Leser bekommen eine Bestellliste mit Mengen und einem Button.

5. Templates

Templates für Produkte, Kollektionen, Kollektionsliste, Warenkorb, Suche, Blog, Artikel, Seite, 404, Passwort und Geschenkgutschein sind enthalten. Zusätzliche Seiten-Templates:

• page.contact – Kontaktseite mit Kontaktformular.
• page.faq – FAQ-Seite mit Akkordeon und Kontaktformular darunter.

Das Template wird im Seiten-Admin unter Theme-Vorlage zugewiesen. Weitere Templates: collection.order-list (Schnelle Bestellliste für eine ganze Kollektion) und product.quick (intern für die Schnellansicht – muss nicht zugewiesen werden).

5a. Kollektionsseite für große Kataloge

• Filtergruppen aus Tags (das, wonach Lebensmittelkunden wirklich filtern – Ernährung und Lebensstil wie vegan, vegetarisch, halal, bio, glutenfrei, laktosefrei; Schärfe; Herkunft; Marke): Blöcke der Kollektionssektion mit Überschrift und je einer Zeile tag | Beschriftung, als Kästchenliste oder Chips ganz oben im Filterbereich. Werte lassen sich kombinieren (UND), es erscheinen nur Tags, die in der Kollektion vorkommen, keine App nötig.
• Schnellfilter: Blöcke mit Beschriftung und Produkt-Tag (z. B. Bestseller → bestseller) als Chips über dem Produktraster.
• Filter aus Shopifys App Search & Discovery (Verfügbarkeit, Preis, Marke, Tags, Optionen, Metafelder): aktive Filter als Chips über dem Raster, Preisregler, Suchfeld in langen Filterlisten, „Mehr anzeigen“, Sidebar oder Drawer.
• Seitennavigation: Seitenzahlen, „Mehr laden“-Button oder unbegrenztes Scrollen (Sektionseinstellung; auch für Suchergebnisse).
• Listenansicht und das Template Schnelle Bestellliste für Großabnehmer.

6. Warenkorb

Der Warenkorb-Drawer öffnet sich nach dem Hinzufügen eines Produkts und unterstützt Mengenänderung, Entfernen, Rabatte auf Positions- und Warenkorbebene, Grundpreise, Kaufpläne, ein Notizfeld und einen Versandkosten-Fortschrittsbalken: Schwelle (in Shop-Währung) in den Einstellungen der Sektionen Warenkorb-Drawer und Warenkorb setzen. 0 blendet den Balken aus. Er erscheint nur in der Standardwährung des Shops.

Produktvorschläge im Warenkorb (beide Sektionen): Quelle Kollektion (z. B. Bestseller), Gleiche Kategorie wie der erste Artikel (seine speziellste Kollektion), Ähnliche Produkte (Shopify wählt automatisch passend zum ersten Artikel) oder Ergänzende Produkte (je Produkt in der App Search & Discovery gepflegt); die Kollektion dient bei den beiden Empfehlungsquellen als Ersatz. Produkte, die schon im Warenkorb liegen, werden übersprungen; Produkte ohne Varianten haben einen „+“-Button, andere führen zur Produktseite. Optional erscheinen die Vorschläge auch bei leerem Warenkorb („Unsere Bestseller“).

Geschenkverpackung: Ein Produkt „Geschenkverpackung“ mit Preis anlegen und in den Warenkorb-Sektionen auswählen – Kunden setzen im Warenkorb ein Häkchen, das Produkt wird hinzugefügt bzw. entfernt.

Vorbestellen – zwei Varianten (Theme-Einstellungen → Produktkennzeichnungen → Badges, je abschaltbar): (1) Vorbestell-Anfrage: Ist eine Variante ausverkauft (Bestand 0, kein Weiterverkauf), heißt der Button auf Karte, Produktseite und Sticky-Leiste „Benachrichtigen“ (Beschriftung, Fenstertitel und -text in den Theme-Einstellungen anpassbar) und öffnet ein kurzes Formular – der Kunde hinterlässt E-Mail, Menge und optional eine Nachricht, du erhältst die Anfrage als Kontaktformular-E-Mail (Absender unter Einstellungen → Benachrichtigungen) und entscheidest, ob du den Artikel besorgen kannst; es wird nichts verkauft; Name und E-Mail merkt sich der Browser, bei weiteren Artikeln sind sie vorausgefüllt. Erscheint nach dem Absenden ein Captcha, ist das Shopifys Spam-Schutz für Kontakt- und Newsletter-Formulare (Onlineshop → Einstellungen → Spam-Schutz) – dort abschaltbar, dann geht die Anfrage ohne Zwischenschritt raus. (2) Weiterverkaufen: Ist bei Bestand 0 „Weiterverkaufen, wenn ausverkauft“ aktiv, zeigen Kauf-Button und Badge „Vorbestellen“ und der Artikel wird ganz normal bestellt.

Wohin die Anfragen gehen, bestimmt die Einstellung Wohin gehen die Anfragen?:

• E-Mail (Kontaktformular) – du erhältst jede Anfrage als Kontaktformular-E-Mail an die Absenderadresse des Shops. Den Betreff dieser E-Mail vergibt Shopify („Neue Kundennachricht …“) und er lässt sich nicht ändern; deshalb steht als erste Zeile der Nachricht „Betreff: Vorbestellung – “. Eine Regel in Gmail/Outlook („Nachricht enthält: Vorbestellung –“) sortiert die Anfragen in einen Ordner.
• Kundenliste mit Tags (+ Shopify Flow) – der Kunde wird über Shopifys Kundenformular gespeichert und bekommt die Tags vorbestellung, vb:<Varianten-ID> und vb-menge:<Menge>. Alle Anfragen findest du unter Kunden mit dem Filter Tag vorbestellung. Hinweis: Das Kundenformular ist technisch Shopifys Newsletter-Anmeldung. Mit aktiviertem Double-Opt-in (Einstellungen → Kundenbenachrichtigungen) bleibt der Kunde auf „Marketing: ausstehend“ und ist erst abonniert, wenn er die Bestätigungsmail anklickt – das ist die empfohlene Einstellung; ohne Double-Opt-in wird er direkt abonniert und der erste Flow-Workflow sollte ihn wieder abmelden (Aktion „Kunden von E-Mail-Marketing abmelden“).

Zwei Workflows in Shopify Flow (kostenlos in jedem Plan, Apps → Flow) machen daraus die Automatik:

1. Vorbestellung eingegangen – Auslöser Customer tags added → Bedingung: eine der hinzugefügten Tags beginnt mit vb: → Aktion Get product variant data mit der Varianten-ID aus dem Tag ({{ tag | remove: "vb:" }}) → Aktion Send internal email an dich mit Betreff z. B. Vorbestellung: {{ productVariant.product.title }} und Text mit {{ customer.email }}, Menge aus dem Tag vb-menge: und Link zum Produkt. Optional: Unsubscribe customer from email marketing.
2. Wieder auf Lager – Auslöser Product variant back in stock → Aktion Get customer data mit der Abfrage tag:vb:{{ productVariant.legacyResourceId }} → For each Kunde → Aktion Send email an {{ customer.email }} („ ist wieder da – jetzt bestellen: “) → Aktion Remove customer tags (vb:<ID>, vb-menge:…).

Damit bekommst du E-Mails mit eigenem Betreff, siehst alle offenen Anfragen unter Kunden und die Kunden werden automatisch benachrichtigt, sobald du den Bestand aufgefüllt hast.

Produktvergleich (Theme-Einstellungen → Produktkarten): Ein Vergleichen-Symbol auf jeder Karte sammelt bis zu vier Produkte in einer Leiste am unteren Rand; „Vergleichen“ öffnet die Tabelle mit Bild, Preis, Verfügbarkeit, Kennzeichnungen, Nutri-Score, MHD, Gewicht, Grundpreis, Allergenen, Nährwerten und Beschreibung. Die Auswahl bleibt im Browser gespeichert.

7. Sprachen und Märkte

Das Theme bringt Übersetzungen für Deutsch, Englisch, Französisch, Italienisch, Spanisch und Indonesisch mit – für den Shop und für den Theme-Editor. Sprachen unter Einstellungen → Sprachen veröffentlichen; Ankündigungsleiste und Footer zeigen dann automatisch eine Sprach- und Länderauswahl. Produktinhalte werden mit Shopifys App Translate & Adapt übersetzt.

8. Apps

App-Blöcke lassen sich auf der Produktseite, in der Sektion „Vorgestelltes Produkt" und in allen App-Block-fähigen Sektionen einfügen. Bewertungen, Abos, Wunschlisten und Treueprogramme funktionieren über ihre App-Blöcke bzw. App-Embeds.

9. Häufige Fragen

Das Mega-Menü zeigt keine Bilder. Kollektionsbilder im Mega-Menü anzeigen in den Header-Einstellungen aktivieren und sicherstellen, dass die verlinkten Kollektionen ein Bild haben (oder mindestens ein Produkt mit Bild). Nur Kollektions-Links zeigen Bilder.

Kennzeichen erscheinen nicht. Tag-Schreibweise mit Theme-Einstellungen → Produktkennzeichnungen vergleichen (Groß-/Kleinschreibung egal).

Wie schalte ich das Muster ab? Muster → Deckkraft auf 0 setzen oder Keins wählen; Wellenkanten lassen sich je Sektion deaktivieren.

Glücksrad / Popup öffnet sich im Editor nicht. Die Sektion in der Seitenleiste des Editors auswählen – Popups öffnen dort nur bei Auswahl. Im Shop öffnen sie nach der Verzögerung und werden je Besucher gemerkt (zum erneuten Testen den Browser-Speicher leeren).

MHD-/Nährwert-Blöcke sind leer. Prüfen, ob die Metafeld-Definition Namespace und Schlüssel aus den Block-Einstellungen nutzt (Standard batik.…) und das Produkt einen Wert hat.

Sprachen von rechts nach links werden unterstützt: Das Theme folgt der Schreibrichtung der Sprache automatisch.

Woher kommen die Zahlungs-Icons? Von den unter Einstellungen → Zahlungen aktivierten Zahlungsanbietern.

Kann ich eigene Schriften nutzen? Batik verwendet ausschließlich die Shopify-Schriftbibliothek (Theme-Store-Vorgabe). Schriften unter Typografie wählen.

10. Support

• Dokumentation: https://illerlabs.com/de/batik/docs/ (English: https://illerlabs.com/batik/docs/)
• Support-Formular: https://illerlabs.com/de/batik/support/ (bitte Store-URL, Theme-Version und Problembeschreibung angeben; ein Screenshot oder eine Datei kann angehängt werden)
• Antwortzeit: innerhalb von zwei Werktagen; kritische Fehler sofort.

11. Änderungen

Version 1.0.0 – erste Version.