Theme-Dateistruktur und Upload als ZIP

Verzeichnisstruktur

mein-theme/
├── layout/
│   └── theme.liquid              # Pflicht: <html>, <head>, <body>
├── sections/
│   ├── header.liquid
│   ├── footer.liquid
│   ├── hero.liquid
│   ├── cookie-declaration.liquid
│   └── hero.placeholder.json     # optional: Daten für Thumbnails
├── snippets/
│   ├── icon.liquid
│   ├── consent-banner.liquid
│   └── consent-placeholder.liquid
├── assets/
│   ├── css/main.min.css
│   ├── js/scripts.min.js
│   └── images/icons/sprite.svg
├── config/
│   ├── settings_schema.json      # Definition der Theme-Einstellungen
│   ├── settings_data.json        # aktuelle Werte
│   ├── section_groups.json       # Start-Header/-Footer
│   └── homepage_preview.json     # Demo-Daten für die Theme-Karte
├── locales/
│   └── de.default.json
├── templates/
│   ├── index.json                # Startseite
│   ├── page.json                 # Standardseite
│   ├── page.funnel.json          # optional: weitere Seiten-Templates
│   ├── 404.liquid
│   └── data.blog.liquid          # Detailseite je Datentyp
└── _meta.json                    # Name und Beschreibung

layout/theme.liquid ist Pflicht – fehlt es, bricht der Build ab. Für ein nutzbares Theme brauchst du praktisch immer auch sections/, config/settings_schema.json und templates/index.json.

Quell-Dateien

Nur assets/ wird ausgeliefert. Arbeitest du mit SCSS oder TypeScript, kompilierst du lokal (das Starter-Theme nutzt Gulp und esbuild) und lädst die fertigen Dateien in assets/ hoch.

Theme importieren

1. Packe das Theme so, dass layout/, sections/ usw. direkt im Wurzelverzeichnis der ZIP liegen.

2. Öffne Website → Themes und klicke auf Importieren.

3. Vergib einen Namen und wähle die ZIP (max. 50 MB). Das Theme wird als Entwurf angelegt.

Theme aktualisieren

Mit Dateien aktualisieren an der Theme-Karte ersetzt du alle Dateien durch eine neue ZIP. Einstellungen, Header/Footer und Seiteninhalte bleiben erhalten. Einzelne Dateien änderst du direkt im Code-Editor.

_meta.json

{
  "name": "Mein Theme",
  "description": "Kurze Beschreibung für die Theme-Auswahl.",
  "preview_url": null
}