Ein vollständiges Restaurant-Theme zum Kopieren

Alle Dateien eines kleinen, lauffähigen TacticTable-Themes: Layout, zwei Vorlagen, editierbare Abschnitte und Blöcke, Navigation, CSS und Sprachen.

Für Entwickler

Voraussetzungen

Recht: website:write
Plan mit Website

Dieses Beispiel ist ein vollständiger Text-Theme-Stand. Legen Sie die Dateien unter genau den Titeln der Codeblöcke an, verpacken Sie den Ordner als ZIP und laden Sie ihn unter Website → Theme hochladen ohne KI-Umwandlung hoch. Das Archiv darf einen gemeinsamen Wurzelordner haben. Lassen Sie AGENTS.md und agent.md beim Import weg; ein Export ergänzt sie später selbst.

Der Einstieg erfolgt über templates/index.json. Das Layout setzt die geordneten Body-Abschnitte bei content_for_layout ein und holt Header und Footer als feste Abschnitte. templates/page.json stellt den Inhalt einer Dashboard-Seite dar. Eine neue JSON-Vorlage erzeugt jedoch weder einen Seiten-Datensatz noch einen Menüpunkt; beide legen Sie im Dashboard an.

Das Beispiel bietet drei globale Designfelder, ein dynamisch auswählbares und verschachteltes Navigationsmenü, einen Bild-Aufmacher, zwei editierbare Blockkarten, aktuelle Öffnungszeiten/Produkte, eine Inhaltsseite und einen Footer. Es nutzt nur Textdateien; Bilddateien kommen aus der Mediathek und werden per image_picker als URL hinterlegt.

Nach dem Upload öffnen Sie das Theme Studio, prüfen Startseite und Inhaltsseite in der Vorschau, bearbeiten Texte/Bild/Menü und speichern. Veröffentlichen oder aktivieren Sie erst nach der Kontrolle. Der gespeicherte Entwurf und die veröffentlichte Revision können verschieden sein.

assets/theme.css.liquid verwendet Akzentfarbe und Inhaltsbreite aus den globalen Theme-Einstellungen. Der Browser lädt dieselbe Adresse theme.css, obwohl die Quelldatei auf .liquid endet. Ändern Sie die Werte im Theme-Editor und prüfen Sie die Vorschau.

Schritt für Schritt

Ordnerstruktur anlegen
theme.json im Wurzelordner, dazu config/, layout/, templates/, sections/, assets/ und locales/. Alle Dateinamen aus den Codeblöcken übernehmen.
Als ZIP hochladen
Website → Theme hochladen; ein fertiges TacticTable-Theme ohne KI-Umwandlung importieren. Binärdateien separat in die Mediathek laden.
Inhalte verbinden
Website → Navigations-Menüs: main-menu erstellen oder im Header auswählen. Website → Seiten: eine Seite veröffentlichen und die Vorlage page zuweisen.
Vorschau prüfen
Startseite und Inhaltsseite auf Mobil und Desktop testen; leere Bilder, Menülinks, Blockreihenfolge und Reservierungslink prüfen.

Codebeispiele

Starter · theme.json

AusschnittJSON

1{2  "id": "restaurant-starter",3  "name": "Restaurant Starter",4  "version": "1.0.0",5  "category": "restaurant",6  "default_locale": "de",7  "supported_locales": ["de", "en"]8}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Das Manifest benennt das Theme. Der Dateiname ist genau theme.json.

Starter · config/settings_schema.json

AusschnittJSON

1[2  {3    "name": "Design",4    "settings": [5      { "type": "color", "id": "accent", "label": "Akzentfarbe", "default": "#7b3f2a" },6      { "type": "image_picker", "id": "logo", "label": "Logo" },7      { "type": "range", "id": "content_width", "label": "Inhaltsbreite", "min": 800, "max": 1400, "step": 20, "unit": "px", "default": 1120 }8    ]9  }10]

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Nur die hier definierten Feldtypen erscheinen als Eingaben im Theme-Editor. Die Feld-IDs werden in Liquid zu settings.accent, settings.logo und settings.content_width.

Starter · config/settings_data.json

AusschnittJSON

1{2  "current": {3    "accent": "#7b3f2a",4    "logo": "",5    "content_width": 11206  }7}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die Werte liegen unter current; der Renderer stellt sie als settings.* bereit. Ein leeres Logo lässt das Betriebslogo als Rückfall zu.

Starter · layout/theme.liquid

AusschnittLiquid

1<!doctype html>2<html lang="{{ locale | escape }}">3<head>4  <meta charset="utf-8">5  <meta name="viewport" content="width=device-width,initial-scale=1">6  <title>{{ page_meta.title | default: page_title | default: restaurant.name | escape }}</title>7  {% if page_meta.description %}<meta name="description" content="{{ page_meta.description | escape }}">{% endif %}8  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">9</head>10<body>11  <a class="skip" href="#inhalt">{{ 'accessibility.skip' | t | escape }}</a>12  {% section 'header' %}13  <main id="inhalt">{{ content_for_layout }}</main>14  {% section 'footer' %}15</body>16</html>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.content_for_layout ist der unverzichtbare Platzhalter für die geordneten Abschnitte. Header und Footer werden einmal im Layout gerendert.

Starter · templates/index.json

AusschnittJSON

1{2  "name": "Startseite",3  "sections": {4    "header": { "type": "header", "settings": { "menu_id": "" } },5    "hero": { "type": "hero", "settings": { "title": "{{ restaurant.name }}", "subtitle": "Willkommen bei uns", "button_label": "Tisch reservieren", "image": "" } },6    "highlights": {7      "type": "highlights",8      "settings": { "heading": "Darauf freuen wir uns" },9      "blocks": {10        "kitchen": { "type": "highlight", "settings": { "title": "Unsere Küche", "text": "Frisch und saisonal." } },11        "service": { "type": "highlight", "settings": { "title": "Unser Service", "text": "Gastfreundschaft jeden Tag." } }12      },13      "block_order": ["kitchen", "service"]14    },15    "restaurant_data": { "type": "restaurant-data", "settings": { "heading": "Gut zu wissen" } },16    "footer": { "type": "footer", "settings": {} }17  },18  "order": ["header", "hero", "highlights", "restaurant_data", "footer"]19}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.order steuert die sichtbare Reihenfolge. Die Layout-Abschnitte header und footer stehen hier für ihre Einstellungen, werden im Seiteninhalt aber nicht doppelt ausgegeben. Block-IDs sind lokale Kennungen; block_order bestimmt ihre Reihenfolge.

Starter · templates/page.json

AusschnittJSON

1{2  "name": "Inhaltsseite",3  "sections": {4    "header": { "type": "header", "settings": { "menu_id": "" } },5    "content": { "type": "page-content", "settings": {} },6    "footer": { "type": "footer", "settings": {} }7  },8  "order": ["header", "content", "footer"]9}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Diese Vorlage liest veröffentlichte Dashboard-Seiten über das Objekt page. Eine Template-Datei allein erstellt noch keine Seite oder URL.

Starter · sections/header.liquid

AusschnittLiquid

1<header class="site-header">2  {% assign logo = settings.logo | default: restaurant.logo_url | safe_url %}3  <a class="brand" href="/">4    {% if logo != blank %}<img src="{{ logo }}" alt="{{ restaurant.name | escape }}" width="160" height="64">{% else %}{{ restaurant.name | escape }}{% endif %}5  </a>6  {% assign menu = navigation_menus_by_id[section.settings.menu_id] %}7  {% if menu == nil %}{% assign menu = navigation_menus_by_handle['main-menu'] %}{% endif %}8  <nav aria-label="Hauptnavigation">9    {% render 'nav-items', items: menu.items %}10  </nav>11  <a class="button" href="{{ restaurant.booking_url | safe_href }}">{{ 'nav.book' | t | escape }}</a>12</header>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Der Menüwert ist eine ID und wird gegen navigation_menus_by_id nachgeschlagen. Ein leeres Feld nutzt den Handle main-menu. Das nav-items-Teilstück rendert auch verschachtelte children.

Starter · snippets/nav-items.liquid

AusschnittLiquid

1<ul>2{% for item in items %}3  <li>4    <a href="{{ item.url | safe_href }}"{% if item.open_in_new %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ item.label | escape }}</a>5    {% if item.children != blank %}{% render 'nav-items', items: item.children %}{% endif %}6  </li>7{% endfor %}8</ul>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Jeder Menüeintrag liefert children als Liste. render kapselt den Geltungsbereich; die Unterliste wird deshalb ausdrücklich als Parameter weitergereicht. TacticTable begrenzt Menübäume serverseitig.

Starter · sections/header.schema.json

AusschnittJSON

1{2  "name": "Kopfbereich",3  "settings": [4    { "type": "select", "id": "menu_id", "label": "Navigationsmenü", "dynamic_options": "navigation_menus", "options": [], "default": "" }5  ],6  "default": { "settings": { "menu_id": "" } }7}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Das Auswahlfeld wird mit echten Dashboard-Menüs gefüllt. default.settings ist wichtig, weil der Header vom Layout über das section-Tag geholt wird.

Starter · sections/hero.liquid

AusschnittLiquid

1<section class="hero" aria-labelledby="hero-title">2  {% assign image = section.settings.image | safe_url %}3  {% if image != blank %}<img class="hero-image" src="{{ image }}" alt="" fetchpriority="high">{% endif %}4  <div class="wrap hero-copy">5    <h1 id="hero-title">{{ section.settings.title | escape }}</h1>6    <p>{{ section.settings.subtitle | escape }}</p>7    <a class="button" href="{{ restaurant.booking_url | safe_href }}">{{ section.settings.button_label | escape }}</a>8  </div>9</section>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Das Bild kommt als URL aus der Mediathek. Freier Text wird maskiert, die Bild- und Linkadressen werden geprüft.

Starter · sections/hero.schema.json

AusschnittJSON

1{2  "name": "Aufmacher",3  "settings": [4    { "type": "text", "id": "title", "label": "Überschrift", "default": "Willkommen" },5    { "type": "textarea", "id": "subtitle", "label": "Untertitel", "default": "" },6    { "type": "text", "id": "button_label", "label": "Knopftext", "default": "Tisch reservieren" },7    { "type": "image_picker", "id": "image", "label": "Titelbild" }8  ]9}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die IDs entsprechen exakt den section.settings-Zugriffen im Liquid.

Starter · sections/highlights.liquid

AusschnittLiquid

1<section class="wrap highlights" aria-labelledby="highlights-title">2  <h2 id="highlights-title">{{ section.settings.heading | escape }}</h2>3  <div class="cards">4    {% for block in section.blocks %}5      <article class="card">6        <h3>{{ block.settings.title | escape }}</h3>7        <p>{{ block.settings.text | escape }}</p>8      </article>9    {% else %}10      <p>Hier können Sie im Theme-Editor Einträge hinzufügen.</p>11    {% endfor %}12  </div>13</section>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Blocks werden in block_order geliefert. Jeder Block hat type, id und eigene settings. Der else-Zweig macht ein leeres Theme verständlich.

Starter · sections/highlights.schema.json

AusschnittJSON

1{2  "name": "Besonderheiten",3  "settings": [4    { "type": "text", "id": "heading", "label": "Überschrift", "default": "Besonderheiten" }5  ],6  "blocks": [7    { "type": "highlight", "name": "Eintrag", "settings": [8      { "type": "text", "id": "title", "label": "Titel", "default": "Neuer Eintrag" },9      { "type": "textarea", "id": "text", "label": "Beschreibung", "default": "" }10    ] }11  ]12}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die Blockart highlight und beide Feld-IDs müssen zum Template und zur Liquid-Datei passen.

Starter · sections/page-content.liquid

AusschnittLiquid

1<article class="wrap page-content">2  <h1>{{ page.title | escape }}</h1>3  {% if page.eyebrow != blank %}<p class="eyebrow">{{ page.eyebrow | escape }}</p>{% endif %}4  <div class="page-body">{{ page.body | escape | newline_to_br }}</div>5</article>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.page stammt von einer angelegten und veröffentlichten Website-Seite. Der Text wird vor Zeilenumbrüchen maskiert; er wird nicht als HTML ausgeführt.

Starter · sections/restaurant-data.liquid

AusschnittLiquid

1<section class="wrap restaurant-data" aria-labelledby="data-title">2  <h2 id="data-title">{{ section.settings.heading | escape }}</h2>3  <div class="data-grid">4    <div><h3>Öffnungszeiten</h3><ul>5      {% for day in restaurant.opening_hours %}6        <li>{{ day.label | escape }}: {% if day.closed %}Geschlossen{% else %}{{ day.times | escape }}{% endif %}</li>7      {% else %}<li>Zeiten folgen.</li>{% endfor %}8    </ul></div>9    <div><h3>Aus der Speisekarte</h3><ul>10      {% for product in products limit: 4 %}11        <li>{{ product.title | escape }} · {{ product.price | escape }}</li>12      {% else %}<li>Die Karte folgt.</li>{% endfor %}13    </ul></div>14  </div>15</section>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Öffnungszeiten und aktive Produkte kommen aus Betriebsdaten, nicht aus dem Theme-ZIP. Die Vorschau zeigt Rückfalltexte, solange der Betrieb diese Daten nicht gepflegt hat.

Starter · sections/restaurant-data.schema.json

AusschnittJSON

1{2  "name": "Betriebsdaten",3  "settings": [4    { "type": "text", "id": "heading", "label": "Überschrift", "default": "Gut zu wissen" }5  ]6}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die Überschrift ist editierbar; Öffnungszeiten und Produkte bleiben mit den tatsächlichen Dashboard-Daten verbunden.

Starter · sections/footer.liquid

AusschnittLiquid

1<footer class="site-footer">2  <div class="wrap">3    <p>{{ restaurant.name | escape }}</p>4    {% if restaurant.address_full %}<p>{{ restaurant.address_full | escape }}</p>{% endif %}5    {% if restaurant.email %}{% assign mail = restaurant.email | prepend: 'mailto:' %}<a href="{{ mail | safe_href }}">{{ restaurant.email | escape }}</a>{% endif %}6    {% if rechtsseiten.impressum %}<a href="/impressum">Impressum</a>{% endif %}7    {% if rechtsseiten.datenschutz %}<a href="/datenschutz">Datenschutz</a>{% endif %}8  </div>9</footer>

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Rechtliche Seiten werden nur verlinkt, wenn sie wirklich veröffentlicht sind. Die Zielpfade müssen zum Dashboard-Eintrag passen.

Starter · assets/theme.css.liquid

AusschnittCSS

1:root{font-family:system-ui,sans-serif;color:#201b18;background:#fff;--accent:{{ settings.accent | default: '#7b3f2a' }};--width:{{ settings.content_width | default: 1120 }}px}2*{box-sizing:border-box}body{margin:0}a{color:inherit}3.wrap{width:min(100% - 2rem,var(--width));margin-inline:auto}4.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.6rem}5.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem max(1rem,calc((100vw - var(--width))/2))}6.site-header ul{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;padding:0}7.brand img{display:block;max-width:160px;object-fit:contain}8.button{display:inline-block;padding:.8rem 1rem;background:var(--accent);color:#fff;text-decoration:none;border-radius:.25rem}9.hero{position:relative;min-height:30rem;display:grid;align-items:center;background:#f5eee9}10.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}11.hero-copy{position:relative;padding-block:5rem}.hero h1{font-size:clamp(2.5rem,7vw,5rem)}12.highlights,.restaurant-data,.page-content{padding-block:4rem}.cards,.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}13.card{padding:1.5rem;border:1px solid #ddd}.site-footer{padding:3rem 0;background:#201b18;color:#fff}14@media(max-width:700px){.site-header{flex-wrap:wrap}.site-header nav{order:3;width:100%}.site-header ul{gap:.75rem}}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die Datei endet auf .liquid, wird aber unter der Adresse theme.css geliefert. accent und content_width kommen live aus den globalen Theme-Einstellungen.

Starter · locales/de.default.json

AusschnittJSON

{"accessibility":{"skip":"Zum Inhalt springen"},"nav":{"book":"Tisch reservieren"}}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die Datei wird zum Locale-Code de. Der t-Filter liest die Punktpfade aus der aktiven Sprachdatei.

Starter · locales/en.json

AusschnittJSON

{"accessibility":{"skip":"Skip to content"},"nav":{"book":"Book a table"}}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die zweite Sprachdatei ist vorbereitet; die öffentliche Seitenauswahl verwendet derzeit die Theme-Standardsprache.

Wo im Dashboard

/restaurant/[slug]/website

Im Dashboard öffnen

Siehe auch

← Zurück zu Theme-Entwicklung

Schritt für Schritt

Ordnerstruktur anlegen

theme.json im Wurzelordner, dazu config/, layout/, templates/, sections/, assets/ und locales/. Alle Dateinamen aus den Codeblöcken übernehmen.

Als ZIP hochladen

Website → Theme hochladen; ein fertiges TacticTable-Theme ohne KI-Umwandlung importieren. Binärdateien separat in die Mediathek laden.

Inhalte verbinden

Website → Navigations-Menüs: main-menu erstellen oder im Header auswählen. Website → Seiten: eine Seite veröffentlichen und die Vorlage page zuweisen.

Vorschau prüfen

Startseite und Inhaltsseite auf Mobil und Desktop testen; leere Bilder, Menülinks, Blockreihenfolge und Reservierungslink prüfen.

Codebeispiele

Starter · theme.json

AusschnittJSON

1{2  "id": "restaurant-starter",3  "name": "Restaurant Starter",4  "version": "1.0.0",5  "category": "restaurant",6  "default_locale": "de",7  "supported_locales": ["de", "en"]8}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Das Manifest benennt das Theme. Der Dateiname ist genau theme.json.

Starter · config/settings_schema.json

AusschnittJSON

1[2  {3    "name": "Design",4    "settings": [5      { "type": "color", "id": "accent", "label": "Akzentfarbe", "default": "#7b3f2a" },6      { "type": "image_picker", "id": "logo", "label": "Logo" },7      { "type": "range", "id": "content_width", "label": "Inhaltsbreite", "min": 800, "max": 1400, "step": 20, "unit": "px", "default": 1120 }8    ]9  }10]

Starter · config/settings_data.json

AusschnittJSON

1{2  "current": {3    "accent": "#7b3f2a",4    "logo": "",5    "content_width": 11206  }7}

Starter · layout/theme.liquid

AusschnittLiquid

1<!doctype html>2<html lang="{{ locale | escape }}">3<head>4  <meta charset="utf-8">5  <meta name="viewport" content="width=device-width,initial-scale=1">6  <title>{{ page_meta.title | default: page_title | default: restaurant.name | escape }}</title>7  {% if page_meta.description %}<meta name="description" content="{{ page_meta.description | escape }}">{% endif %}8  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">9</head>10<body>11  <a class="skip" href="#inhalt">{{ 'accessibility.skip' | t | escape }}</a>12  {% section 'header' %}13  <main id="inhalt">{{ content_for_layout }}</main>14  {% section 'footer' %}15</body>16</html>

Starter · templates/index.json

AusschnittJSON

1{2  "name": "Startseite",3  "sections": {4    "header": { "type": "header", "settings": { "menu_id": "" } },5    "hero": { "type": "hero", "settings": { "title": "{{ restaurant.name }}", "subtitle": "Willkommen bei uns", "button_label": "Tisch reservieren", "image": "" } },6    "highlights": {7      "type": "highlights",8      "settings": { "heading": "Darauf freuen wir uns" },9      "blocks": {10        "kitchen": { "type": "highlight", "settings": { "title": "Unsere Küche", "text": "Frisch und saisonal." } },11        "service": { "type": "highlight", "settings": { "title": "Unser Service", "text": "Gastfreundschaft jeden Tag." } }12      },13      "block_order": ["kitchen", "service"]14    },15    "restaurant_data": { "type": "restaurant-data", "settings": { "heading": "Gut zu wissen" } },16    "footer": { "type": "footer", "settings": {} }17  },18  "order": ["header", "hero", "highlights", "restaurant_data", "footer"]19}

Starter · templates/page.json

AusschnittJSON

1{2  "name": "Inhaltsseite",3  "sections": {4    "header": { "type": "header", "settings": { "menu_id": "" } },5    "content": { "type": "page-content", "settings": {} },6    "footer": { "type": "footer", "settings": {} }7  },8  "order": ["header", "content", "footer"]9}

Starter · sections/header.liquid

AusschnittLiquid

1<header class="site-header">2  {% assign logo = settings.logo | default: restaurant.logo_url | safe_url %}3  <a class="brand" href="/">4    {% if logo != blank %}<img src="{{ logo }}" alt="{{ restaurant.name | escape }}" width="160" height="64">{% else %}{{ restaurant.name | escape }}{% endif %}5  </a>6  {% assign menu = navigation_menus_by_id[section.settings.menu_id] %}7  {% if menu == nil %}{% assign menu = navigation_menus_by_handle['main-menu'] %}{% endif %}8  <nav aria-label="Hauptnavigation">9    {% render 'nav-items', items: menu.items %}10  </nav>11  <a class="button" href="{{ restaurant.booking_url | safe_href }}">{{ 'nav.book' | t | escape }}</a>12</header>

Starter · snippets/nav-items.liquid

AusschnittLiquid

1<ul>2{% for item in items %}3  <li>4    <a href="{{ item.url | safe_href }}"{% if item.open_in_new %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ item.label | escape }}</a>5    {% if item.children != blank %}{% render 'nav-items', items: item.children %}{% endif %}6  </li>7{% endfor %}8</ul>

Starter · sections/header.schema.json

AusschnittJSON

1{2  "name": "Kopfbereich",3  "settings": [4    { "type": "select", "id": "menu_id", "label": "Navigationsmenü", "dynamic_options": "navigation_menus", "options": [], "default": "" }5  ],6  "default": { "settings": { "menu_id": "" } }7}

Starter · sections/hero.liquid

AusschnittLiquid

1<section class="hero" aria-labelledby="hero-title">2  {% assign image = section.settings.image | safe_url %}3  {% if image != blank %}<img class="hero-image" src="{{ image }}" alt="" fetchpriority="high">{% endif %}4  <div class="wrap hero-copy">5    <h1 id="hero-title">{{ section.settings.title | escape }}</h1>6    <p>{{ section.settings.subtitle | escape }}</p>7    <a class="button" href="{{ restaurant.booking_url | safe_href }}">{{ section.settings.button_label | escape }}</a>8  </div>9</section>

Starter · sections/hero.schema.json

AusschnittJSON

1{2  "name": "Aufmacher",3  "settings": [4    { "type": "text", "id": "title", "label": "Überschrift", "default": "Willkommen" },5    { "type": "textarea", "id": "subtitle", "label": "Untertitel", "default": "" },6    { "type": "text", "id": "button_label", "label": "Knopftext", "default": "Tisch reservieren" },7    { "type": "image_picker", "id": "image", "label": "Titelbild" }8  ]9}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die IDs entsprechen exakt den section.settings-Zugriffen im Liquid.

Starter · sections/highlights.liquid

AusschnittLiquid

1<section class="wrap highlights" aria-labelledby="highlights-title">2  <h2 id="highlights-title">{{ section.settings.heading | escape }}</h2>3  <div class="cards">4    {% for block in section.blocks %}5      <article class="card">6        <h3>{{ block.settings.title | escape }}</h3>7        <p>{{ block.settings.text | escape }}</p>8      </article>9    {% else %}10      <p>Hier können Sie im Theme-Editor Einträge hinzufügen.</p>11    {% endfor %}12  </div>13</section>

Starter · sections/highlights.schema.json

AusschnittJSON

1{2  "name": "Besonderheiten",3  "settings": [4    { "type": "text", "id": "heading", "label": "Überschrift", "default": "Besonderheiten" }5  ],6  "blocks": [7    { "type": "highlight", "name": "Eintrag", "settings": [8      { "type": "text", "id": "title", "label": "Titel", "default": "Neuer Eintrag" },9      { "type": "textarea", "id": "text", "label": "Beschreibung", "default": "" }10    ] }11  ]12}

Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Die Blockart highlight und beide Feld-IDs müssen zum Template und zur Liquid-Datei passen.

Starter · sections/page-content.liquid

AusschnittLiquid

1<article class="wrap page-content">2  <h1>{{ page.title | escape }}</h1>3  {% if page.eyebrow != blank %}<p class="eyebrow">{{ page.eyebrow | escape }}</p>{% endif %}4  <div class="page-body">{{ page.body | escape | newline_to_br }}</div>5</article>

Starter · sections/restaurant-data.liquid

AusschnittLiquid

1<section class="wrap restaurant-data" aria-labelledby="data-title">2  <h2 id="data-title">{{ section.settings.heading | escape }}</h2>3  <div class="data-grid">4    <div><h3>Öffnungszeiten</h3><ul>5      {% for day in restaurant.opening_hours %}6        <li>{{ day.label | escape }}: {% if day.closed %}Geschlossen{% else %}{{ day.times | escape }}{% endif %}</li>7      {% else %}<li>Zeiten folgen.</li>{% endfor %}8    </ul></div>9    <div><h3>Aus der Speisekarte</h3><ul>10      {% for product in products limit: 4 %}11        <li>{{ product.title | escape }} · {{ product.price | escape }}</li>12      {% else %}<li>Die Karte folgt.</li>{% endfor %}13    </ul></div>14  </div>15</section>

Starter · sections/restaurant-data.schema.json

AusschnittJSON

1{2  "name": "Betriebsdaten",3  "settings": [4    { "type": "text", "id": "heading", "label": "Überschrift", "default": "Gut zu wissen" }5  ]6}

Starter · sections/footer.liquid

AusschnittLiquid

1<footer class="site-footer">2  <div class="wrap">3    <p>{{ restaurant.name | escape }}</p>4    {% if restaurant.address_full %}<p>{{ restaurant.address_full | escape }}</p>{% endif %}5    {% if restaurant.email %}{% assign mail = restaurant.email | prepend: 'mailto:' %}<a href="{{ mail | safe_href }}">{{ restaurant.email | escape }}</a>{% endif %}6    {% if rechtsseiten.impressum %}<a href="/impressum">Impressum</a>{% endif %}7    {% if rechtsseiten.datenschutz %}<a href="/datenschutz">Datenschutz</a>{% endif %}8  </div>9</footer>

Starter · assets/theme.css.liquid

AusschnittCSS

1:root{font-family:system-ui,sans-serif;color:#201b18;background:#fff;--accent:{{ settings.accent | default: '#7b3f2a' }};--width:{{ settings.content_width | default: 1120 }}px}2*{box-sizing:border-box}body{margin:0}a{color:inherit}3.wrap{width:min(100% - 2rem,var(--width));margin-inline:auto}4.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.6rem}5.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem max(1rem,calc((100vw - var(--width))/2))}6.site-header ul{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;padding:0}7.brand img{display:block;max-width:160px;object-fit:contain}8.button{display:inline-block;padding:.8rem 1rem;background:var(--accent);color:#fff;text-decoration:none;border-radius:.25rem}9.hero{position:relative;min-height:30rem;display:grid;align-items:center;background:#f5eee9}10.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}11.hero-copy{position:relative;padding-block:5rem}.hero h1{font-size:clamp(2.5rem,7vw,5rem)}12.highlights,.restaurant-data,.page-content{padding-block:4rem}.cards,.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}13.card{padding:1.5rem;border:1px solid #ddd}.site-footer{padding:3rem 0;background:#201b18;color:#fff}14@media(max-width:700px){.site-header{flex-wrap:wrap}.site-header nav{order:3;width:100%}.site-header ul{gap:.75rem}}

Starter · locales/de.default.json

AusschnittJSON

{"accessibility":{"skip":"Zum Inhalt springen"},"nav":{"book":"Tisch reservieren"}}

Starter · locales/en.json

AusschnittJSON

{"accessibility":{"skip":"Skip to content"},"nav":{"book":"Book a table"}}