TOGE einrichten

TOGE ist ein Theme für kleine Maker-Marken: eine Story pro Produkt, Stoffnotizen, Field-Fotos und Drops. Ein Theme kann nur sein Layout und Beispieltexte mitbringen. Ihre Produkte, Fotos, Menüs und Metafelder liegen in Ihrem Shop, deshalb wirkt eine frische Installation leer. Dieser Leitfaden zeigt, was Sie anlegen sollten, in der Reihenfolge, die den größten Unterschied macht.

Alles Folgende geschieht im Shopify-Adminbereich. Code ist nicht nötig. Wo ein Schritt gewöhnliche Shopify-Arbeit ist, verlinkt dieser Leitfaden auf die Shopify-Hilfe, statt sie zu wiederholen.

1. Begriffe in diesem Leitfaden

Begriff	Bedeutung
Theme-Editor	Die Ansicht, in der Sie Einstellungen und Inhalte des Themes ändern: Onlineshop → Themes → Anpassen.
Abschnitt	Ein Streifen einer Seite im Theme-Editor (Hero, Neuheiten, Fußzeile …). Jeder hat eigene Einstellungen.
Template	Das Layout, das eine Seite verwendet. TOGE bringt Templates für die Über-uns-, Support-, Kontakt- und Richtlinienseiten mit. Das Template einer Seite wählen Sie im Seiteneditor unter „Theme-Vorlage“.
Handle	Der letzte Teil der URL einer Seite oder Kollektion, etwa `about-us`. Shopify bildet ihn aus dem Titel; Sie können ihn im Feld „Suchmaschineneintrag“ des Seiteneditors ändern. Das Theme findet manche Seiten über den Handle.
Metafeld	Ein zusätzliches Feld, das Sie Produkten, Kollektionen oder Blogbeiträgen unter Einstellungen → Benutzerdefinierte Daten hinzufügen. Das Theme liest einige davon.
Metaobjekt	Ein Datensatz, den Sie selbst definieren, mit eigenen Feldern, auf den Produkte verweisen können. TOGE verwendet eines für Stoffe.
Drop	Die Veröffentlichung eines Produkts an einem festen Datum. Davor zeigt die Produktseite statt eines Warenkorb-Buttons das Datum.

2. Die ersten zehn Minuten

Theme hochladen: Onlineshop → Themes → Theme hinzufügen → ZIP-Datei hochladen. Lassen Sie es unveröffentlicht, bis die Startseite stimmt; mit „Anpassen“ können Sie ein unveröffentlichtes Theme in der Vorschau ansehen.
Logo: Theme-Editor → Header. Laden Sie Ihr Logobild hoch oder lassen Sie das Feld leer, damit der Shopname als Text erscheint. (Das Bergzeichen auf der Startseite ist das Logo von TOGE selbst. Um es zu ersetzen, bearbeiten Sie snippets/logo.liquid oder schalten „Logo auf dem Bild“ im Hero-Abschnitt aus.)
Hauptmenü: Inhalte → Menüs → Hauptmenü. Der Header zeigt das Menü, das Sie im Header-Abschnitt auswählen (Standard: main-menu). Verschachtelte Menüs öffnen sich als Dropdowns, bis zu drei Ebenen.
Hero der Startseite: Theme-Editor → Hero. Fügen Sie ein breites Foto hinzu (2:1, 2400 px Breite reichen völlig). Fügen Sie ein separates 4:5-Foto für Smartphones hinzu, falls der Ausschnitt nicht passt. Bei einem hellen Foto stellen Sie „Textfarbe auf dem Foto“ auf Dunkel.

Damit haben Sie bereits einen Shop, der fertig aussieht.

3. Theme-Einstellungen

Theme-Editor → Theme-Einstellungen. Diese gelten überall.

Einstellung	Was sie bewirkt
Farben	Zwei Farbschemata: Schema 1 ist hell, Schema 2 ist dunkel. Abschnitte wie das Newsletter-Band wählen eines davon. Jedes Schema hat Farben für Hintergrund, Text, Rahmen, Fläche, Akzent, Link und Buttons.
Typografie	Schrift für Fließtext und für Überschriften. Jede kommt mit normalem, mittlerem und fettem Schnitt. Jede Shopify-Schrift funktioniert.
Layout	Maximale Seitenbreite und der Rand an den Seiten.
Eckenradius der Eingabefelder	Eckenradius von Feldern und Buttons.
Favicon	Das kleine Symbol im Browser-Tab. Quadratisch, 32 px oder größer.

4. Menüs und Seiten, nach denen das Theme sucht

Fußzeile und Support-Seiten finden ihre Inhalte über den Handle. Legen Sie sie mit diesen Handles an, und sie erscheinen von selbst. Lassen Sie sie weg, wird der jeweilige Teil einfach nicht angezeigt.

Was	Wo	Handle
Menüspalten in der Fußzeile	Inhalte → Menüs	beliebige Menüs; Auswahl unter Fußzeile → Blöcke
Journal	Blogbeiträge	Blog `news`
Über-uns-Seite	Seiten, Template `page.about`	`about-us`
Support-Seite	Seiten, Template `page.support`	`support`
Kontaktseite	Seiten, Template `page.contact`	`contact`
Rechtliche Seiten in der Fußzeile	Einstellungen → Richtlinien	Datenschutz, AGB, Rückerstattung, Versand
Zusätzliche rechtliche Seiten (Japan)	Seiten, Template `page.policy`	`tokushoho`, `cancellation`

Um eine Seite anzulegen, gehen Sie zu Onlineshop → Seiten → Seite hinzufügen. Geben Sie einen Titel ein, wählen Sie rechts unter „Theme-Vorlage“ das Template und prüfen Sie den Handle unter „Suchmaschineneintrag“.

Die rechtlichen Seiten kommen aus Einstellungen → Richtlinien; die Fußzeile verlinkt auf alle, die Sie ausgefüllt haben.

tokushoho und cancellation sind Seiten, die das japanische Recht von Onlineshops verlangt. Wenn Sie nicht in Japan verkaufen, überspringen Sie sie. Das Template page.policy zeigt jede Seite im selben Stil wie die Richtlinien.

Die Über-uns-, Support- und Kontaktseite sind aus Abschnitten aufgebaut, daher bearbeiten Sie ihre Texte und Fotos im Theme-Editor, nicht in der Seite selbst. Das Kontaktformular sendet an die Absender-E-Mail-Adresse des Shops. Das Newsletter-Band fügt Abonnenten unter Kunden mit dem Tag newsletter hinzu.

5. Startseite

Abschnitt	Was er braucht
Hero	Ein Foto (siehe oben). Überschrift, Einleitungstext und Link sind Abschnittseinstellungen.
Feature-Band	Kollektionen, bei denen das Metafeld Auf der Startseite hervorheben aktiviert ist (siehe §8). Mit einer Kollektion ist es ein stehendes Band; mit zwei bis fünf wird es zum Karussell. Ohne Kollektion verwendet der Abschnitt seine eigenen Text- und Fotoeinstellungen.
Neuheiten	Wählen Sie im Abschnitt eine Kollektion. Drei Produkte auf dem Desktop, vier auf Smartphones.
Story	Ein Foto oder ein kurzes Video in Schleife (mp4, hochgeladen unter Inhalte → Dateien; es läuft stumm). Der Text liegt über dem Bild; schalten Sie „Text über dem Bild“ aus, um ihn darunter zu setzen.
Journal	Wählen Sie den Blog. Die drei neuesten Beiträge.
Zuletzt angesehen	Füllt sich selbst aus dem Browser des Besuchers. Nichts einzustellen.

Mit „Abschnitt hinzufügen“ können Sie der Startseite weitere Abschnitte hinzufügen: Hervorgehobenes Produkt (ein Produkt mit seinen Fotos, Optionen und dem Warenkorb-Button), FAQ, Support-Leitfaden, Kontaktformular sowie eine weitere Story, ein weiteres Kollektions-Feature, Neuheiten oder Journal. Das Newsletter-Band gehört zur Fußzeile und erscheint daher auf jeder Seite.

6. Produkte

Die Produktseite funktioniert mit einem einfachen Produkt: Titel, Preis, Fotos, Optionen. Jeder Punkt unten ergänzt einen weiteren Teil der Seite. Alles ist optional, und die Seite blendet aus, was leer ist.

Was auf der Seite steht

Von oben: Hauptfoto und Slogan → Name, Optionen, Preis, Warenkorb und das Details-Akkordeon → Passt gut dazu → Produktfotos → Story → Stoffkapitel → Hinweis → Field-Fotos → Ähnliche Produkte → Zuletzt angesehen. Alles ab „Passt gut dazu“ ist im Theme-Editor ein eigener Abschnitt, den Sie umsortieren oder entfernen können.

Der Abschnitt Produktseite hat Einstellungen für den oberen Teil:

Block Farbe und Größe: welche Option die Farbe und welche die Größe ist (siehe unten), die Schwelle für „Nur noch wenige“, die Beschriftung für Größe und eine Seite mit Größentabelle.
Block Menge: Höchstmenge pro Bestellung (0 bedeutet keine Grenze) und ein Hinweis unter dem Feld.
Block Warenkorb: dynamische Checkout-Buttons (Shop Pay und Ähnliches) und das Empfängerformular für Geschenkgutscheine.
Blöcke Akkordeon: Jeder ist eine Zeile in den Details. Eine Zeile kann eine Shop-Richtlinie, die Produktbeschreibung, die Pflegehinweise, die Größentabelle oder Material und Herkunft zeigen.

Optionen und Fotos

Farbe und Größe werden über die Position ausgewählt, nicht über den Namen, die Option darf also Farbe, Color oder カラー heißen. Stellen Sie „Position der Farboption“ und „Position der Größenoption“ (1 bis 3) im Abschnitt Produktseite ein, falls Ihre von 1 und 2 abweichen.
Eine dritte Option (Länge, Passform …) wird ebenfalls als Buttons angezeigt. Nichts einzustellen.
Farbkacheln verwenden das Foto der ersten Variante jeder Farbe (Hochformat 4:5, 1080 × 1350 funktioniert gut). Geben Sie allen Varianten einer Farbe dasselbe Foto.
Hauptfoto: Das große Bild oben ist das Metafeld custom.hero_image, sonst das erste Produktfoto. Es ist als „Welt“-Bild gedacht, nicht als Produktaufnahme.
Galerie: Produktfotos, die nicht als Farbkacheln verwendet werden, erscheinen unter der Story. Videos, YouTube- und Vimeo-Links sowie 3D-Modelle, die Sie dem Produkt hinzufügen, erscheinen dort ebenfalls.

Metafelder, die die Produktseite liest

Legen Sie diese unter Einstellungen → Benutzerdefinierte Daten → Produkte → Definition hinzufügen an. Der Name der Definition ist frei wählbar; übereinstimmen müssen Namespace und Key (im Definitionsformular als namespace.key eingeben) sowie der Typ. Sobald eine Definition existiert, bekommt jedes Produkt unten auf seiner Bearbeitungsseite ein Feld dafür.

Namespace.key	Typ	Erscheint als
`descriptors.subtitle`	Einzeiliger Text (Standard)	Der einzeilige Slogan unter dem Hauptfoto
`descriptors.care_guide`	Mehrzeiliger Text (Standard)	„Pflege“ im Details-Akkordeon
`custom.hero_image`	Datei (Bild)	Hauptfoto oben; außerdem das Hover-Foto auf Produktkarten
`custom.hero_video`	Datei (Video)	Läuft anstelle des Hauptfotos, stumm, in Schleife
`custom.gender`	Einzeiliger Text	Kleine Beschriftung neben dem Produktnamen. Sie verlinkt auf die Kollektion mit demselben Handle, wenn diese Kollektion Produkte enthält
`custom.gender_collection`	Kollektionsreferenz	Wohin die Beschriftung stattdessen verlinkt, wenn die Handles abweichen
`spec.material`	Einzeiliger Text	„Material“ in den Details
`spec.origin`	Einzeiliger Text	„Hergestellt in“ in den Details
`spec.size_table`	Mehrzeiliger Text	Größentabelle. Eine Zeile pro Reihe, Zellen getrennt durch `\|`. Die erste Zeile ist die Kopfzeile: `Größe \| Länge \| Brust \| Ärmel`, dann `S \| 66 \| 50 \| 20`. Wird so ausgegeben, wie eingegeben, nicht transponiert
`color.names`	Einzeiliger Text	Anzeigenamen der Farben als Paare `CODE:Name`, getrennt durch `\|`: `SUMI:Tusche\|SAND:Sand`. Der Code ist der Optionswert
`drop.mode`	Einzeiliger Text	`pre` für einen Drop, der noch nicht gestartet ist: Der Warenkorb ist ausgeblendet, stattdessen erscheint das Panel „Benachrichtigen“
`drop.next_at`	Datum	Datum des nächsten Drops, angezeigt im Panel „Benachrichtigen“
`drop.label`, `drop.qty`, `drop.note`	Einzeiliger Text	Button-Beschriftung und die kurze Zeile darunter vor einem Drop
`drop.end_variants`	Einzeiliger Text	Eingestellte Kombinationen als `Color / Size`, getrennt durch `\|`: `SAND / XS\|SAND / XL`
`nav.parent`	Einzeiliger Text	Handle der Kollektion, die in den Brotkrumen erscheinen soll (siehe unten)
`story.gallery`	Liste von Dateien (Bilder)	„Field“-Fotos: der horizontale Streifen mit Lifestyle-Aufnahmen
`story.fabric`	Metaobjekt-Referenz → Fabric	Das Stoffkapitel (siehe §7)

Die meisten davon gibt es auch als Einstellungen des Abschnitts Produktseite (Hauptbild, Slogan, Geschlecht, Material, Hergestellt in, Farbnamen, Eingestellte Kombinationen, Verkaufsstatus). Die Abschnittseinstellung gilt für alle Produkte, und das Metafeld hat Vorrang. Ein Shop mit ein oder zwei Produkten kann Metafelder also ganz weglassen.

Brotkrumen über dem Produktnamen werden in dieser Reihenfolge bestimmt: Tags bread1-apparel, bread2-tops (das Theme sucht nach Kollektionen mit den Handles apparel und tops; ohne sie werden die Wörter ohne Links angezeigt) → das Metafeld nav.parent → die erste Kollektion, zu der das Produkt gehört. Der Tag bread1- bestimmt außerdem, welche Produkte unter „Ähnliche Produkte“ erscheinen.

Die Story selbst ist die Produktbeschreibung. Überschriften (h3), Absätze und Bilder sind alles, was sie braucht; das Theme erzeugt aus den Überschriften das Inhaltsverzeichnis auf der rechten Seite.

7. Stoffkapitel (Metaobjekte)

Das Stoffkapitel ist ein Teil der Produktseite, der die Geschichte eines Stoffs erzählt: Name und Einleitung, eine Reihe großer Zahlen (Gewicht, Dicke …), Fotos von Vorder- und Rückseite, drei Schritte „So funktioniert es“ und Vergleichsdiagramme. Es ist ein Metaobjekt pro Stoff, das sich mehrere Produkte teilen. Nur der Name ist Pflicht; jeder andere Teil erscheint, sobald sein Feld ausgefüllt ist.

Legen Sie die Definitionen unter Einstellungen → Benutzerdefinierte Daten → Metaobjekte mit diesen Feld-Keys an. Die Namen und der Name der Definition selbst sind beliebig; das Theme folgt der story.fabric-Referenz des Produkts und liest die Felder über den Key. Legen Sie zuerst die kleinen Definitionen an, da die größeren auf sie verweisen: Fabric row → Fabric chart, Fabric step, Fabric stat → Fabric.

Fabric (das Sie an Produkte anhängen)

Key	Typ
`name`, `eyebrow`, `headline`	Einzeiliger Text
`lead`	Rich Text
`stats`	Liste von Fabric stat
`views_heading`, `views_note`, `face_title`, `face_tag`, `back_title`, `back_tag`	Einzeiliger Text
`views_body`, `face_body`, `back_body`	Rich Text
`face_image`, `back_image`	Datei (Bild)
`how_heading`	Einzeiliger Text
`how_body`	Rich Text
`steps`	Liste von Fabric step
`charts`	Liste von Fabric chart
`note`	Mehrzeiliger Text

Fabric stat: value, unit, label, prefix (alle einzeilig). Wird als Reihe großer Zahlen angezeigt, z. B. value 90, unit g/㎡, label Gewicht.

Fabric step: image (Datei), title (einzeilig), body (Rich Text). Drei Schritte ergeben den Streifen „So funktioniert es“.

Fabric chart: title (einzeilig), body (Rich Text), axes (Liste einzeiliger Texte), rows (Liste von Fabric row), note (einzeilig). Ist axes ausgefüllt, ist das Diagramm eine Bewertungstabelle mit fünf Punkten; sonst sind es horizontale Balken.

Fabric row: label (einzeilig), value (Dezimalzahl), display (einzeilig; was statt des Rohwerts ausgegeben wird, z. B. ca. 30 Min.), scores (Liste ganzer Zahlen, eine pro Achse, 1 bis 5), highlight (Boolesch, markiert Ihren eigenen Stoff).

Diagramme werden animiert, sobald sie in den sichtbaren Bereich scrollen. Zahlen zählen von null hoch.

8. Kollektionen

Unter Einstellungen → Benutzerdefinierte Daten → Kollektionen:

Namespace.key	Typ	Erscheint als
`toge.home_feature`	Wahr/falsch	Zeigt diese Kollektion auf dem Feature-Band der Startseite
`toge.feature_heading`	Einzeiliger Text	Die große Zeile auf dem Band und oben auf der Kollektionsseite
`toge.feature_image`	Datei (Bild)	Foto des Bands, falls es vom Kollektionsbild abweicht
`toge.feature_video`	Datei (Video)	Läuft auf dem Band anstelle des Fotos
`nav.parent`	Einzeiliger Text	Handle der übergeordneten Kollektion, für die Brotkrumen (`all` für „alle Produkte“)

Die Kollektionsbeschreibung ist der kurze Text unter der Überschrift. Filter, Sortierung und die Anzahl der Produkte pro Seite sind Einstellungen des Abschnitts Kollektion.

9. Ankündigungsleiste

Die Leiste ganz oben wird über Blogbeiträge gesteuert, sodass Sie Ankündigungen wie jeden Beitrag schreiben, planen und zurückziehen können.

Legen Sie unter Einstellungen → Benutzerdefinierte Daten → Blogbeiträge toge.announce (wahr/falsch) und toge.announce_text (einzeiliger Text) an.
Aktivieren Sie im Beitrag announce. Die Leiste zeigt announce_text oder den Beitragstitel und verlinkt auf den Beitrag.
Der neueste Beitrag mit dem Kennzeichen gewinnt. Gibt es keinen, gibt es keine Leiste.

Besucher können die Leiste schließen. Sie bleibt sieben Tage geschlossen oder bis sich der Text ändert.

10. Was von selbst erscheint

Diese Teile des Themes folgen Ihren Shop-Einstellungen. Im Theme ist nichts einzustellen.

Teil	Erscheint, wenn
Länder- und Sprachauswahl (Fußzeile)	Der Shop mehr als einen Markt oder mehr als eine Sprache hat
„Inkl. MwSt.“ neben den Preisen	Die Preise Steuern enthalten (Einstellungen → Steuern und Zölle).
Versandhinweis unter dem Preis	Der Markt ein Metafeld `custom.shipping_note` (Text oder Geldbetrag) hat
Abholung auf der Produktseite	Ein Standort lokale Abholung anbietet und das Produkt dort vorrätig ist.
Shop Pay Ratenzahlung	Der Shop für Shop Pay Installments berechtigt ist
Empfängerformular für Geschenkgutscheine	Das Produkt ein Geschenkgutschein ist.
Follow on Shop (Fußzeile)	Shop Pay aktiviert ist und die Einstellung dafür im Abschnitt Fußzeile aktiviert ist
Kontosymbol im Header	Kundenkonten aktiviert sind (Einstellungen → Kundenkonten)
Suchvorschläge beim Tippen	Die Shopsprache von der vorausschauenden Suche von Shopify unterstützt wird (Japanisch noch nicht)

11. Bildgrößen

Wo	Größe
Hero der Startseite	2:1, 2400 px breit. Smartphones schneiden auf 4:5 zu, oder Sie verwenden das separate Bild für Mobilgeräte
Story der Startseite	2:1, 2400 px breit. Smartphones schneiden auf 4:5 zu
Feature-Band der Kollektionen	16:9, 1600 px breit oder mehr. Smartphones schneiden auf 4:3 zu
Hauptfoto des Produkts (`custom.hero_image`)	3:2, 2000 px breit. Smartphones schneiden auf 4:5 zu
Variantenfotos (Farbkacheln)	4:5, 1080 × 1350. Produktkarten und Galerie zeigen 4:5; die Farbkachel schneidet ein Quadrat aus der Mitte
Produktfotos (Galerie)	4:5
Field-Fotos (`story.gallery`)	2:3, Hochformat
Stoff Vorder- und Rückseite	Beliebig, aber für beide dasselbe Format; 1200 px breit
Stoffschritte	Zeichnungen auf weißem Hintergrund; das Weiß geht in die Seite über
Bild des Blogbeitrags	4:3 in der Journal-Liste, 1600 px breit oder mehr
Favicon	Quadratisch, 32 px oder größer

Shopify skaliert alles für jeden Bildschirm, größer ist also kein Problem.

12. Sprachen

Alle Beispieltexte im Theme sind Englisch. Die eigenen Beschriftungen des Themes (Buttons, Warenkorb, Suche) und der Theme-Editor werden auf Englisch, Japanisch, Deutsch, Französisch, Spanisch, Portugiesisch (Brasilien), Italienisch, traditionellem Chinesisch, vereinfachtem Chinesisch und Koreanisch ausgeliefert; der Shop folgt der Sprache des Stores.

Ihre eigenen Inhalte, etwa Abschnittstexte, Produkte und Seiten, übersetzen Sie mit Shopifys kostenloser App Translate & Adapt. App

13. Das Theme aktualisieren

Wenn eine neue Version erscheint, zeigt Onlineshop → Themes beim Theme einen Update-Hinweis an. Beim Update bleiben Ihre Einstellungen im Theme-Editor und Ihre Inhalte erhalten. Änderungen am Theme-Code werden nicht übernommen; notieren Sie sich deshalb vor dem Update alle Änderungen, die Sie vorgenommen haben.

14. Was das Theme nicht mitbringt

Fotos und Videos. Shopify-Themes können keine Medien enthalten, und die Demofotos sind für die Demo lizenziert. Wo ein Foto fehlt, sehen Sie eine graue Platzhalterzeichnung.
Produkte, Beiträge, Seiten, Metafeld-Definitionen. Das sind Shopdaten. Dieser Leitfaden listet alles auf, was das Theme verwenden kann.
Apps. Es sind keine nötig. Translate & Adapt brauchen Sie nur für weitere Sprachen, eine Abo-App nur, wenn Sie Abonnements verkaufen.