Dokumentation

Inhalte anpassen

Backend Inhalte

  • Produkte
  • Kategorien
  • Medien

Frontend Inhale

  • Text
  • UI Komponenten

Nuxt Content

Um Texte und UI Komponenten zu verwalten verwenden wir Nuxt Content. Offizielle Nuxt Content Dokumentation

Strucute

Das sind die Standard CMS seiten die bereits vorhanden sind:

content/
├── index.yaml
├── navigation.yaml
├── impressum.md
└── unternehmen/
    ├── agb.md
    ├── datenschutz.md
    └── zahlung-und-versand.md

Du kannst natürlich weitere erstellen und/oder diese überschreiben. Du willst bestimmt den Inhalt deiner Startseite überschreiben. Dafür gehst du wie folgt for:

  1. Erstelle die obligatoische content.config.ts Datei mit dem Inhalt:
export { default } from '@shopbite-de/storefront/content.config'
export * from '@shopbite-de/storefront/content.config'
  1. Erstelle eine neue Datei in deinem Content Ordner. Zum Beispiel /content/index.yml
  2. Schau dir die orginial Datei an.
  3. Kopiere den Inhalt in deine neue Datei und überschreibe die Inhalte

Du kannst natürlich auch die komplette content Konfiguration mit samt der Datenobjekten überschreiben und ganz eigene Inhalte und Strukturen erstellen, falls du deine Startseite von grundauf neu designend möchtest.

Möchtest du weitrere landingpages erstellen, kannst du auch tun. Indem du eine Markdown Datei in deinem content Ordner erstellst. Die Datei kann sich irgendwo im Ordner befinden. Die Dateistrukutr wird auch im URL Pfard widergespiegelt.

Zum Beispiel:

  • content/meine-landing-page.md --> https://shop.de/meine-landing-page
  • content/unterseite/landing-page-2.md --> https://shop.de/unterseite/unterseiten-landing-page-2

UI Komponenten (Nuxt UI)

Du kannst in den Markdown Dateien auch UI Komponenten verwenden. Du kannst grundsätzlich alle UI Komponent von Nuxt UI verwenden.

Weitere Informationen, auch bezüglich von Styling, findest du in der Offiziellen Doku

Medien und Performance

Die Startseite lädt als erstes das Hero-Video und die Bilder aus content/index.yml. Zu große Dateien machen den größten Unterschied bei Lighthouse (Kategorie „Performance“, Kennzahl LCP), besonders auf dem Handy.

Hero-Video und Poster

  • Legen Sie zum Video ein Poster ab (hero.poster): das erste Bild des Videos als WebP, 1280 px breit, bereits weichgezeichnet (boxblur, das Video wird per CSS ebenso weichgezeichnet), etwa 20 bis 30 KB. Die Storefront rendert das Poster als erstes Bild der Seite und lädt es vorab. Auf Handys (unter 768 px) wird das Video gar nicht geladen, nur das Poster.
  • Das Video selbst: 720p, ohne Ton, 5 bis 10 Sekunden, unter 1 MB. Ein 1080p-Video mit 3 MB verdoppelt die Ladezeit der Startseite.

Beides erzeugen Sie mit ffmpeg:

ffmpeg -ss 1 -i hero.mp4 -frames:v 1 -vf "scale=1280:-2,boxblur=4:2" -c:v libwebp -quality 70 hero-poster.webp
ffmpeg -i hero.mp4 -vf "scale=1280:-2" -r 25 -c:v libx264 -crf 28 -preset medium -an -movflags +faststart hero-720p.mp4

hero:
  backgroundVideo: https://shop.example.com/media/.../hero-720p.mp4
  poster: /hero-poster.webp

Das Poster kann im public/-Ordner des Shop-Projekts liegen, das Video gehört in die Shopware-Medien.

Hero-Text und Buttons

Der Hero zeigt unten links die USPs (hero.usps) als kompakte Zeile, darüber die Überschrift, die Beschreibung, eine Statuszeile und die Buttons:

  • hero.title (optional): die Überschrift, z. B. „Italienisch, frisch geliefert.“ Fehlt der Wert, steht dort der Shopname (title).
  • hero.headline (optional): kleine Zeile über der Überschrift, z. B. der Restaurantname in Großbuchstaben.
  • Die Statuszeile („Geöffnet bis 23:00 · Lieferung ca. 30 Min“) kommt automatisch aus den Öffnungszeiten und der Lieferzeit des Plugins.
  • Der erste Eintrag in hero.links ist der eine Bestell-Button, alle weiteren werden als dezente Textbuttons dargestellt.

Direkt unter dem Hero folgen zwei Bereiche, die sich aus Shopware füllen:

  • Speisekarte-Kacheln (menu): jede Kategorie der Speisekarte als Kachel mit Foto und Name. Das Foto ist das Medium der Kategorie in Shopware (Kataloge → Kategorien → Kategorie öffnen → Medium). Ohne Medium zeigt die Kachel das Kategorie-Icon auf der Markenfarbe. Bis zu acht Kacheln, danach eine Kachel „Alle Kategorien“.
  • Beliebte Gerichte (highlights): die Produkte mit „Als Topseller markieren“ in Shopware (bis zu acht) als Raster mit den normalen Produktkarten; ein Tipp öffnet die Produktoptionen.

Beide Bereiche haben eigene Überschriften in index.yml, alle Werte sind optional:

menu:
  headline: ALTE SCHMIEDE
  title: Unsere Speisekarte
  description: Pizza, Pasta, Fleisch und Fisch, frisch aus der Küche.
highlights:
  headline: ALTE SCHMIEDE
  title: Beliebt bei unseren Gästen
  description: Die Gerichte, die am häufigsten bestellt werden.

hero:
  title: Italienisch, frisch geliefert.
  headline: ALTE SCHMIEDE

Informationskarten

Die Sektion „Alle Informationen auf einen Blick“ zeigt die Einträge aus features.features als Karten: Icon, kleine Kategorie (title), eine fette Kernaussage, Detailtext (description) und optional eine Aktion.

  • kind (optional): hours setzt als Kernaussage die heutigen Öffnungszeiten („Heute 11:30–14:30 und 17:30–23:00“, „Heute Ruhetag“) samt Öffnungsstatus, delivery die Lieferzeit aus dem Plugin („In ca. 30 Minuten bei dir“). Beides kommt live, der Text muss nicht gepflegt werden.
  • lead (optional): die Kernaussage für alle anderen Karten, z. B. „Tisch nur telefonisch“.
  • link (optional): label und to. Ein tel:-Ziel wird zum Anruf-Button, alles andere zum Textlink. Die Öffnungszeiten im Footer erreichen Sie mit #oeffnungszeiten.
features:
  features:
    - title: Öffnungszeiten
      kind: hours
      description: Samstags 17:30 - 23:30 Uhr, Dienstag ist Ruhetag.
      icon: i-lucide-clock
      link:
        label: Alle Öffnungszeiten
        to: "#oeffnungszeiten"
    - title: Reservierung
      kind: reservation
      lead: Tisch nur telefonisch
      description: Bestellungen nehmen wir gerne online oder telefonisch entgegen.
      icon: i-lucide-phone
      link:
        label: 06104 71427 anrufen
        to: "tel:+49610471427"

Startseite mit Stil-Preset

Mit einem Stil-Preset liest die Startseite dieselbe index.yml, ordnet sie aber anders an:

  1. Hero: hero.headline, hero.title (ein Teil in [...]{.text-primary} steht in der Akzentfarbe), die description, die Buttons aus hero.links, der Öffnungsstatus und eine Karte mit der Google-Bewertung aus hero.usps. Das Foto erscheint erst ab Tablet-Breite im Hochformat 4:5, Handys laden es nicht. Es kommt aus hero.image: ein scharfes Foto, etwa 1200 × 1500 px als WebP. Ohne hero.image nimmt die Storefront hero.poster, das aber absichtlich weichgezeichnet und quer ist und deshalb unscharf wirkt. Mit hero.imagePosition legen Sie fest, welcher Teil des Fotos im Ausschnitt bleibt (CSS object-position, z. B. "60% 40%", Standard: Mitte).
  2. Fakten: die Einträge aus features.features als Zeile.
  3. Speisekarte (dunkles Band): die Kategorien als Wortliste. Ein Foto erscheint nur, wenn die Kategorie in Shopware ein Bild hat. Ist das erste Kategoriebild breiter als hoch (z. B. ein Banner), stehen die Fotos in voller Breite unter der Wortliste, sonst im Hochformat daneben.
  4. Beliebt bei unseren Gästen: die Topseller als Bon-Karten.
  5. Restaurant: das erste Bild aus gallery mit Text, Buttons und den Öffnungszeiten.
  6. Häufige Fragen in zwei Spalten.

cta und mittagstisch werden mit Preset nicht angezeigt.

Häufige Fragen

Mit faq in index.yml zeigt die Startseite über dem Abschluss-Banner einen Bereich mit Fragen und Antworten. Die Antworten stehen im HTML der Seite, auch wenn sie zugeklappt sind. Google und KI-Assistenten wie ChatGPT oder Perplexity lesen sie deshalb mit. Zusätzlich gibt die Seite die Fragen als FAQPage (schema.org) aus und übernimmt sie in /llms.txt.

Gut geeignet sind die Fragen, die Gäste am Telefon stellen: Liefergebiet, Liefergebühr und Mindestbestellwert, Lieferzeit, Abholung, Zahlungsarten, vegetarische Gerichte, Reservierung. Antworten sind reiner Text ohne Links. Ohne faq erscheint der Bereich nicht.

faq:
  headline: ALTE SCHMIEDE
  title: Häufige Fragen
  items:
    - question: Wohin liefern Sie?
      answer: Wir liefern nach 63179 Obertshausen und nach 63165 Mühlheim-Lämmerspiel.
    - question: Wie kann ich bezahlen?
      answer: Bei Lieferung bar, bei Abholung bar oder mit EC-Karte.

Bilder

  • Kategorie- und Produktbilder aus Shopware brauchen keine Nacharbeit: Shopware erzeugt Thumbnails (400, 800 und 1920 px), die Storefront liefert sie als srcset aus, der Browser lädt die passende Größe.
  • Bilder aus content/index.yml (CTA-Hintergrund, Galerie, Kundenbilder) werden unverändert geladen. Verwenden Sie WebP mit höchstens 1920 px Breite, unter 200 KB. Liegt das Bild in den Shopware-Medien, nehmen Sie die Thumbnail-URL (/thumbnail/.../name_1920x545.webp) statt des Originals.
  • Die Galerie zeigt Bilder im Format 4:3 und lädt sie erst beim Scrollen.

Cache-Header auf dem Object Storage

Liegen die Shopware-Medien auf einem S3-Speicher (z. B. Hetzner Object Storage), sendet der Speicher standardmäßig keinen Cache-Control-Header. Jeder Besuch lädt alle Bilder und das Video neu. Die Medien-URLs von Shopware enthalten einen Zeitstempel, deshalb dürfen sie lange gecacht werden:

# alle vorhandenen Objekte nachträglich (AWS CLI mit Hetzner-Endpoint)
aws --endpoint-url https://nbg1.your-objectstorage.com s3 cp s3://mein-bucket/ s3://mein-bucket/ \
  --recursive --metadata-directive REPLACE --cache-control "public, max-age=31536000, immutable"

Für neue Uploads setzen Sie den Header in Shopware: shopware.filesystem.public.config.options.CacheControl: "public, max-age=31536000, immutable" in config/packages/shopware.yaml. Prüfen Sie das Ergebnis mit curl -I <Medien-URL>: Die Antwort muss eine cache-control-Zeile enthalten.

Dateien im public/-Ordner

Die Storefront sendet für jede Datei im public/-Ordner des Shop-Projekts (Logo, Poster, Favicon) und für die von der Storefront skalierten Logos Cache-Control: public, max-age=2592000 (30 Tage). Wiederkehrende Besucher laden sie nicht erneut. Die Dateinamen tragen keine Version, deshalb eine Datei unter neuem Namen austauschen (logo-2026.png statt logo.png zu überschreiben) und den Verweis anpassen; sonst sehen wiederkehrende Besucher bis zu 30 Tage die alte Datei.

Prüfen

npx lighthouse@12 https://www.mein-shop.de/ --only-categories=performance --view

Ziel: Performance über 90 und LCP unter 2,5 Sekunden auf dem Handy.