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 dezente SVG-Muster-Engine (Kawung, Damast, Diagonal, Raster), Produktkennzeichnungen aus Tags (Halal, vegan, bio, Schärfegrad, Bestseller) und alles, was ein Lebensmittelshop braucht: Grundpreise, Restbestands- und Ausverkauft-Badges, Schnellkauf, Abholverfügbarkeit, Geschenkgutscheine mit Empfängerformular, Facettensuche und einen Warenkorb-Drawer mit Versandkosten-Fortschritt.

Version: 1.0.0 · Support: siehe Abschnitt 10 · English version

1. Installation

Im Shopify-Admin Onlineshop → Themes öffnen.
Batik aus dem Theme Store hinzufügen (oder Theme hinzufügen → ZIP-Datei hochladen, wenn du ein Paket erhalten hast).
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.
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.
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)

Gruppe	Funktion
Farben	Vier Farbschemata: Batik (hell, Erdtöne – Standard), Kawung (dunkel, Goldakzent), Pasar (kräftig, warmes Rot) und Neutral (weiß/grau, für Shops ohne Muster-Wunsch). Jedes Schema definiert Hintergrund, Text, Akzent, Akzent-Text, Muster und Rahmen. Jede Sektion hat eine eigene Farbschema-Einstellung, Schemata lassen sich auf einer Seite mischen.
Typografie	Überschrift- und Fließtextschrift aus der Shopify-Schriftbibliothek plus Skalierung (Prozent).
Muster	Musterfamilie (Kawung, Damast, Diagonal, Raster), Größe, Deckkraft und ob das Hintergrundmuster beim Scrollen fixiert bleibt. Dasselbe Muster erscheint im Seitenhintergrund, in Drawer-Overlays, an Wellenkanten und im Versandkosten-Fortschrittsbalken. Deckkraft 0 schaltet das Hintergrundmuster ab.
Produktkennzeichnungen	Welche Produkt-Tags die Kennzeichen auslösen: Halal, vegan, bio, Bestseller sowie das Präfix für Schärfegrade (Standard `spicy` → Tags `spicy-1`, `spicy-2`, `spicy-3`). Außerdem die Restbestandsschwelle (Badge „Nur noch X") und wie viele Tage ein Produkt als „Neu" gilt.
Produktkarten	Bildformat, Marke anzeigen, Zweitbild bei Hover, Schnellkauf-Button.
Layout	Maximale Seitenbreite, Seitenrand, Sektionsabstand, Eckenradius für Karten, Buttons und Eingabefelder, Wellenhöhe.
Warenkorb	Warenkorb-Typ: Drawer (Standard) oder Seite.
Social Media	Links für Instagram, Facebook, TikTok, YouTube, Pinterest, X und WhatsApp – angezeigt vom Social-Block im Footer.
Favicon	Quadratisches Bild, mindestens 96 × 96 px.

3. Produkt-Tags und Kennzeichnungen

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

Tag (Standard)	Ergebnis
`halal`	Halal-Chip auf Karten und Produktseite
`vegan`	Vegan-Chip
`organic`	Bio-Chip
`bestseller`	Badge „Bestseller"
`spicy-1` / `spicy-2` / `spicy-3`	Ein bis drei Chili-Symbole (mild – mittel – scharf)

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.

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.
Header (Logo, Menü, Mega-Menü mit Kollektionsbildern, Sticky-Option, Welle), Ankündigungsleiste (eine oder mehrere Meldungen mit optionalen Links, Länder-/Sprachauswahl), Footer (Text-, Menü-, Social-, Newsletter-Blöcke, Zahlungs-Icons, Richtlinien-Links, Lokalisierung).

Produktseiten-Blöcke (Produktinformationen): Kennzeichen, Marke, Titel, Preis (Steuerhinweis, Shop-Pay-Raten), Artikelnummer, Bestandsstatus, Text, Variantenauswahl (Buttons/Swatches oder Dropdown), Kauf-Buttons (Menge, Dynamic Checkout, Abholverfügbarkeit, Gutschein-Empfängerformular), Beschreibung, aufklappbare Zeilen (eigener Text oder eine Seite), Teilen, ergänzende Produkte, Custom Liquid und App-Blöcke. Die Sektion Ähnliche Produkte nutzt Shopifys Produktempfehlungen.

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.

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 Storefront-Übersetzungen für Deutsch, Englisch und Indonesisch mit. 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 das Farbschema Neutral wählen; Wellenkanten lassen sich je Sektion deaktivieren.

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

Support-Formular: https://javamarkt.com/pages/batik-support – bitte Store-URL (.myshopify.com), Theme-Version und Problembeschreibung angeben; Screenshots können als Antwort auf unsere Mail geschickt werden.
Antwortzeit: innerhalb von zwei Werktagen; kritische Fehler sofort.