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 zeigt die Startseite die Topseller (Produkte mit „Als Topseller markieren“ in Shopware, bis zu acht) als horizontale Reihe; ein Tipp öffnet die Produktoptionen.

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"

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.

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.