So fügst du ein Custom Template in Shopify hinzu (2026)

Das Wichtigste in Kürze

• Mit benutzerdefinierten Vorlagen (Custom Templates) kannst du bestimmten Seiten, Produkten oder Kategorien ein völlig anderes Layout geben.
• Erstelle sie im Theme-Editor (Vorlagen-Dropdown → Vorlage erstellen) oder im Code-Editor: Ordner templates → neue Datei (z. B. page.custom.json oder product.feature.json).
• JSON-Vorlagen definieren, welche Abschnitte (Sections) auf der Seite erscheinen – kein HTML erforderlich.
• Weise einer Seite, einem Produkt oder einer Kategorie über das Dropdown-Menü „Theme-Vorlage“ im Editor eine Vorlage zu.

Um in Shopify eine benutzerdefinierte Vorlage hinzuzufügen, öffne den Theme-Editor, wähle den Seitentyp aus dem Vorlagen-Dropdown oben aus und klicke auf Vorlage erstellen. Für die volle Kontrolle fügst du eine neue JSON-Datei in den Ordner templates/ im Code-Editor ein. So oder so erhalten bestimmte Seiten, Produkte oder Kategorien ihr eigenes Layout ohne ein separates Theme.

Wie erstelle ich ein Custom Template in Shopify?

Benutzerdefinierte Vorlagen befinden sich im Ordner templates/ deines Themes. Jede Vorlage ist eine JSON-Datei, die definiert, welche Abschnitte auf diesem Seitentyp erscheinen.

Namenskonvention:

• page.custom.json — eine benutzerdefinierte Seitenvorlage (im Vorlagenwähler als “page.custom” verfügbar)
• product.feature.json — eine benutzerdefinierte Produktvorlage
• collection.seasonal.json — eine benutzerdefinierte Kategorie-Vorlage (Collection)
• article.long-form.json — eine benutzerdefinierte Blogpost-Vorlage

Der Teil vor dem Punkt ist der Seitentyp. Der Teil danach ist dein benutzerdefinierter Name. Benenne den benutzerdefinierten Teil in Kleinbuchstaben, mit Bindestrichen statt Leerzeichen.

Für die Seite selbst, siehe Neue Seite in Shopify erstellen.

Eine Vorlage im Theme-Editor erstellen (ohne Code)

Mit jedem Online Store 2.0-Theme kannst du eine Vorlage ohne den Code-Editor erstellen.

Schritt 1 - Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2 - Öffne das Vorlagen-Dropdown-Menü oben im Editor und wähle den Seitentyp aus (zum Beispiel Seiten oder Produkte).

Schritt 3 - Klicke auf Vorlage erstellen, gib ihr einen Namen und wähle die bestehende Vorlage aus, auf der sie basieren soll.

Schritt 4 - Füge Abschnitte hinzu, entferne sie oder ändere ihre Reihenfolge und speichere dann. Shopify schreibt die JSON-Datei für dich.

Eine Vorlage im Code-Editor erstellen

Schritt 1 - Dupliziere dein Theme. Onlineshop → Themes → Drei-Punkte-Menü → Duplizieren.

Schritt 2 - Öffne den Code-Editor im duplizierten Theme. Gehe zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben dem duplizierten Theme und dann auf Code bearbeiten.

Schritt 3 - Navigiere zum Ordner templates/.

Schritt 4 - Klicke auf „Neue Vorlage hinzufügen“ (die +-Taste neben dem Ordner oder suche nach der Option „Vorlage hinzufügen“).

Schritt 5 - Wähle den Vorlagentyp (Seite, Produkt, Kategorie usw.) und gib ihr einen Namen (z. B. “landing”).

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

Schritt 7 - Der Standardinhalt sieht in etwa so aus:

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

Diese Vorlage verwendet derzeit denselben Hauptinhaltsabschnitt wie die Standard-Seitenvorlage. Hier kannst du zusätzliche Abschnitte (Sections) hinzufügen.

Um Blöcke in diese Abschnitte einzufügen, siehe Blöcke zu einer Shopify-Section hinzufügen.

Abschnitte zu deiner benutzerdefinierten Vorlage hinzufügen

Um einen Hero-Bild-Abschnitt zu deiner Landingpage-Vorlage hinzuzufügen:

{
    "sections": {
        "hero": {
            "type": "image-banner",
            "settings": {
                "image_height": "large",
                "show_text_below": false
            }
        },
        "main": {
            "type": "main-page",
            "settings": {}
        },
        "testimonials": {
            "type": "multicolumn",
            "settings": {
                "title": "What our customers say"
            }
        }
    },
    "order": ["hero", "main", "testimonials"]
}

Wichtig: Der Wert "type" muss mit einem tatsächlichen Dateinamen eines Abschnitts in deinem Ordner sections/ übereinstimmen (ohne die Endung .liquid). Verwende exakte Namen.

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

Um eine eigene Abschnitts-Datei zu schreiben, siehe Eine benutzerdefinierte Section in Shopify erstellen.

Wie weise ich einer Seite eine Vorlage zu?

Für Seiten:

1. Gehe zu Onlineshop → Seiten → wähle die Seite aus
2. Schau in die rechte Seitenleiste – suche nach „Theme-Vorlage“
3. Wähle deine neue Vorlage aus dem Dropdown aus (z. B. “page.landing”)
4. Speichern

Für Produkte:

1. Produkte → wähle das Produkt aus
2. Rechte Seitenleiste → „Theme-Vorlage“
3. Wähle deine Vorlage (z. B. “product.feature”)
4. Speichern

Für Kategorien (Collections):

1. Produkte → Kategorien → wähle die Kategorie aus
2. Rechte Seitenleiste → „Theme-Vorlage“
3. Wähle deine Vorlage

Das Vorlagen-Dropdown zeigt nur Vorlagen, die zum aktuellen Inhaltstyp passen – Seitenvorlagen für Seiten, Produktvorlagen für Produkte usw.

Vorlageninhalt im Theme-Editor bearbeiten

Sobald eine benutzerdefinierte Vorlage einer Seite zugewiesen ist, kannst du sie im Theme-Editor anpassen:

1. Onlineshop → Themes → Anpassen
2. Verwende die Seitenauswahl oben, um zu der Seite mit deiner benutzerdefinierten Vorlage zu navigieren
3. Die in deiner JSON-Vorlage definierten Abschnitte (Sections) erscheinen in der linken Seitenleiste
4. Bearbeite die Abschnittseinstellungen, füge neue Abschnitte hinzu (innerhalb des Bereichs der Vorlage) und ordne sie nach Bedarf neu an

Änderungen im Theme-Editor aktualisieren die JSON-Vorlagendatei automatisch.

Wie lade ich eine Vorlage hoch?

Du kannst eine vorgefertigte Vorlagendatei nicht direkt über die Shopify-Admin-Benutzeroberfläche hochladen. Stattdessen:

• Erstelle Vorlagen im Theme-Editor oder durch das Hinzufügen neuer JSON-Dateien im Code-Editor (wie oben beschrieben)
• Kopiere Vorlagen aus 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 Pushen von Theme-Dateien einschließlich Vorlagen von einem lokalen Rechner

Für Händler ist die Option Vorlage erstellen im Theme-Editor der einfachere Ansatz.

Häufige Anwendungsfälle für Custom Templates

Landingpage-Vorlage. Keine Header-Navigation, kein Footer, Hero-Bereich in voller Breite, ein einziger CTA (setze "layout" auf ein Layout ohne Header und Footer). Weise dies Kampagnenseiten von Anzeigen zu.

Highlight-Produkt-Vorlage. Immersivere Produktseite mit eigenem Video-Abschnitt, erweiterten Inhaltsstoff-/Materialdetails und einer Vergleichstabelle. Weise dies Hero-Produkten zu.

Brand-Story-Seite. Große Typografie, Bilder in voller Breite, Team-Abschnitt. Weise dies der Über-uns-Seite zu.

Großhandelsseite (Wholesale). Andere Anzeige der Produktpreise, ein Formularabschnitt, B2B-spezifische Inhalte. Weise dies versteckten Großhandelsseiten zu.

Für Layouts von Produktseiten siehe Deine Shopify-Produktseite anpassen.

FAQ