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, Welle oder Muster).
• 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 nach 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 oder Scrollen) 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, Menü, Mega-Menü mit Kollektionsbildern und Menü-Promo-Blöcken, Sticky-Option, Welle), Ankündigungsleiste (Meldungen mit optionalen Links, Countdown-Block, Länder-/Sprachauswahl), Footer (Text-, Menü-, Social-, Newsletter-Blöcke, Zahlungs-Icons, Richtlinien-Links, Lokalisierung).

4a. Sektionshintergründe

Jede Inhalts-Sektion hat eine Gruppe Hintergrund: Transparent (Seitenmuster scheint durch), Deckend, Muster oder Bild – jeweils volle Breite. 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). 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.

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://javamarkt.com/pages/batik-dokumentation (English: https://javamarkt.com/pages/batik-documentation)
• Support-Formular: https://javamarkt.com/pages/batik-support (bitte Store-URL, Theme-Version und Problembeschreibung angeben; Anhänge als Antwort auf unsere Mail)
• Antwortzeit: innerhalb von zwei Werktagen; kritische Fehler sofort.

11. Änderungen

Version 1.0.0 – erste Version.