Wichtige Erkenntnisse

Custom Templates ermöglichen es dir, bestimmten Seiten, Produkten oder Collections ein völlig anderes Layout zu geben.

Erstelle sie im Code-Editor: Ordner templates → neue Datei (z. B. page.custom.json oder product.feature.json).

JSON-Templates definieren, welche Sections auf der Seite erscheinen — kein HTML erforderlich.

Weise einer Seite, einem Produkt oder einer Collection über das Dropdown-Menü „Theme-Template“ im Editor ein Template zu.

Ein Standard-Layout passt nicht für jede Seite. Deine „Über uns“-Seite braucht ein anderes Layout als deine Kontaktseite. Ein Featured Product verdient ein anderes Layout als dein Standard-Produkt-Template. Das Custom-Template-System von Shopify macht dies möglich, ohne separate Themes erstellen zu müssen.

Wie erstelle ich ein Custom Template in Shopify?

Eigene Templates befinden sich im templates/-Ordner deines Themes. Jedes Template ist eine JSON-Datei, die festlegt, welche Sections auf diesem Seitentyp erscheinen.

Benennungskonvention:

page.custom.json — ein eigenes Seiten-Template (im Template-Selector als „page.custom“ auswählbar)
product.feature.json — ein eigenes Produkt-Template
collection.seasonal.json — ein eigenes Kategorie-Template
article.long-form.json — ein eigenes Blogpost-Template

Der Teil vor dem Punkt ist der Seitentyp. Der Teil danach ist dein individueller Name. Du kannst den Custom-Teil beliebig benennen (keine Leerzeichen, Kleinschreibung, nur Bindestriche).

Passend dazu: Fudge Page Builder.

Passend dazu: Eine neue Seite in Shopify erstellen.

Schritt für Schritt — ein Custom Page Template erstellen

Schritt 1 - Dupliziere dein Theme. Online-Shop → Themes → Drei-Punkt-Menü → Duplizieren.

Schritt 2 - Öffne den Code-Editor im duplizierten Theme. Online-Shop → Themes → Aktionen → Code bearbeiten.

Schritt 3 - Navigiere zum Ordner templates/.

Schritt 4 - Klicke auf „Neues Template hinzufügen“ (das Plus-Symbol neben dem Ordner oder die Option „Template hinzufügen“).

Schritt 5 - Wähle den Template-Typ aus (Seite, Produkt, Kategorie etc.) und gib ihm einen Namen (z. B. „landing“).

Schritt 6 - Shopify erstellt eine neue JSON-Datei: page.landing.json.

Schritt 7 - Der Standardinhalt sieht etwa so aus:

{
  "sections": {
    "main": {
      "type": "main-page",
      "disabled": false,
      "settings": {}
    }
  },
  "order": ["main"]
}

Dieses Template verwendet derzeit dieselbe Hauptinhalts-Section wie das Standard-Seiten-Template. Du kannst hier zusätzliche Sections hinzufügen.

Passend dazu: Blöcke zu einer Shopify Section hinzufügen.

Sections zu deinem Custom Template hinzufügen

So fügst du eine Hero-Image-Section zu deinem Landingpage-Template hinzu:

{
  "sections": {
    "hero": {
      "type": "image-banner",
      "settings": {
        "image_height": "large",
        "show_text_below": false
      }
    },
    "main": {
      "type": "main-page",
      "settings": {}
    },
    "testimonials": {
      "type": "testimonials",
      "settings": {
        "title": "Was unsere Kunden sagen"
      }
    }
  },
  "order": ["hero", "main", "testimonials"]
}

Wichtig: Der Wert für "type" muss exakt mit dem Dateinamen einer Section in deinem sections/-Ordner übereinstimmen (ohne die Endung .liquid). Achte auf die exakte Schreibweise.

Das "order"-Array steuert die Reihenfolge, in der die Sections auf der Seite erscheinen.

Passend dazu: Eine eigene Section in Shopify bauen.

Wie weise ich einer Seite ein Template zu?

Für Seiten:

Gehe zu Online-Shop → Seiten → wähle die Seite aus
Schau in die rechte Seitenleiste — suche nach „Theme-Template“
Wähle dein neues Template aus dem Dropdown-Menü aus (z. B. „page.landing“)
Speichern

Für Produkte:

Produkte → wähle das Produkt aus
Rechte Seitenleiste → „Theme-Template“
Wähle dein Template aus (z. B. „product.feature“)
Speichern

Für Collections:

Produkte → Collections → wähle die Collection aus
Rechte Seitenleiste → „Theme-Template“
Wähle dein Template aus

Das Template-Dropdown zeigt nur Templates an, die zum aktuellen Content-Typ passen — also Page-Templates für Seiten, Product-Templates für Produkte usw.

Template-Inhalte im Theme-Editor bearbeiten

Sobald einer Seite ein Custom Template zugewiesen wurde, kannst du es im Theme-Editor anpassen:

Online-Shop → Themes → Customizen
Nutze den Seiten-Selector oben, um zu der Seite zu navigieren, die dein Custom Template verwendet
Die in deinem JSON-Template definierten Sections erscheinen in der linken Seitenleiste
Bearbeite die Section-Settings, füge neue Sections hinzu (innerhalb des Scopes des Templates) und ordne sie nach Bedarf neu an

Änderungen, die im Theme-Editor vorgenommen werden, aktualisieren automatisch die JSON-Template-Datei.

Erstelle Custom Shopify Templates, indem du Fudge einfach beschreibst, was du willst.

Try Fudge for Free

Wie lade ich ein Template hoch?

Du kannst eine fertige Template-Datei nicht direkt über die Shopify-Admin-Oberfläche hochladen. Stattdessen:

Templates erstellen, indem du neue JSON-Dateien im Code-Editor hinzufügst (wie oben beschrieben)
Templates kopieren von einem anderen Theme, indem du den JSON-Inhalt aus dem Code-Editor des einen Themes kopierst und in eine neue Datei im Code-Editor deines Themes einfügst
Import via Shopify CLI (für Entwickler) — ermöglicht das Pushing von Theme-Dateien einschließlich Templates von einem lokalen Rechner aus

Für Händler ist das Erstellen von Templates über den Code-Editor der Standardweg.

Gängige Anwendungsfälle für Custom Templates

Landingpage-Template. Ohne Header-Navigation, ohne Footer, Full-Width-Hero, einzelner CTA. Für Kampagnenseiten von Anzeigen verwenden.

Feature-Produkt-Template. Intensivere Produktseite mit einer dedicated Video-Section, erweiterten Details zu Inhaltsstoffen/Materialien und einer Vergleichstabelle. Für Hero-Produkte verwenden.

Brand-Story-Seite. Große Typografie, Full-Width-Bilder, Team-Sektion. Für die „Über uns“-Seite verwenden.

Wholesale-Seite. Andere Preisanzeige, ein Formular-Bereich, B2B-spezifischer Content. Für versteckte Großhandelsseiten verwenden.