Storefront Konfiguration

Feature Flags

Feature Flags werden über Umgebungsvariablen gesetzt und steuern optionale Funktionen der Storefront.

Beispiel .env:

NUXT_PUBLIC_SHOP_BITE_FEATURE_MULTI_CHANNEL=false
NUXT_PUBLIC_SHOP_BITE_FEATURE_SECURE_KEY=
NUXT_PUBLIC_SHOP_BITE_FEATURE_CONTACT_FORM=false
NUXT_PUBLIC_SHOP_BITE_FEATURE_DEMO_BANNER=false
# optional, sonst Plugin-Konfiguration
NUXT_PUBLIC_SHOP_BITE_MENU_CATEGORY_ID=
NUXT_PUBLIC_SHOP_BITE_ADDRESS_AUTOCOMPLETE_BOUNDING_BOX="8.822251,50.055026,8.899077,50.104327"

SEO

Die Storefront gibt Sitemap, Canonical-URLs, Vorschaubilder für geteilte Links und Seitentitel automatisch aus. Gesteuert wird das über Umgebungsvariablen.

Beispiel .env:

NUXT_PUBLIC_STORE_URL="https://www.mein-shop.de"
NUXT_PUBLIC_SITE_NAME="Pizzeria Mustermann"
NUXT_PUBLIC_SITE_TITLE_TEMPLATE="%s | %siteName – Online bestellen"
NUXT_PUBLIC_SITE_OG_IMAGE="/card.png"
NUXT_PUBLIC_SITE_ADDRESS_CITY="Obertshausen"
NUXT_PUBLIC_SITE_CUISINE="Italienisch-deutsche Küche"

Seitentitel und Beschreibung

• Unterseiten und Kategorien erhalten die Titelvorlage, z. B. Pizza | Pizzeria Mustermann – Online bestellen. Kategorien verwenden Meta-Titel und Meta-Beschreibung aus Shopware, sonst Name und Beschreibung der Kategorie.
• Die Startseite verwendet keine Vorlage. Standardtitel ist <Shopname> <Ort> | Online bestellen & liefern lassen, die Beschreibung wird aus Küche, Ort und Shopname gebildet.
• Eigene Werte für die Startseite setzen Sie in content/index.yml unter seo. Sie haben Vorrang vor den Standardwerten, aber nur, wenn sie sich von title und description der Seite unterscheiden: Nuxt Content füllt seo sonst automatisch mit diesen Werten.

seo:
  title: Pizzeria Mustermann Obertshausen | Pizza online bestellen
  description: Pizza, Pasta und Salate in Obertshausen online bestellen, liefern lassen oder abholen.
  image: /card.png

Vorschaubild (og:image)

Kategorieseiten verwenden das Kategoriebild aus Shopware, die Startseite seo.image aus content/index.yml. Alle anderen Seiten fallen auf NUXT_PUBLIC_SITE_OG_IMAGE zurück. twitter:card ist summary_large_image.

Das Standardbild /card.png zeigt die ShopBite-Demo. Legen Sie im Shop-Projekt eine eigene public/card.png ab (empfohlen 1200 × 630 px), sie ersetzt das Standardbild. Die Vorschau prüfen Sie mit dem Facebook Sharing Debugger. WhatsApp speichert Vorschauen eine Weile zwischen.

Sitemap

Unter /sitemap.xml stehen:

• die Startseite
• Content-Seiten aus content/ (z. B. Zahlung und Versand)
• alle Kategorien der Hauptnavigation und des Speisekarten-Baums (Kategorie der Speisekarte) mit ihrer SEO-URL, Änderungsdatum und Kategoriebild
• /kontakt, wenn das Kontaktformular aktiv ist

robots.txt verweist automatisch auf die Sitemap. Pfade, die per robots.disallow gesperrt sind, erscheinen nicht in der Sitemap. Eine einzelne Content-Seite schließen Sie mit sitemap: false im Frontmatter aus. Die Sitemap wird zehn Minuten zwischengespeichert.

Die Kategorie-URLs kommen aus den SEO-URL-Templates in Shopware. Ein abschließender Schrägstrich (z. B. /c/Pizza/) bleibt in Sitemap und Canonical-URL erhalten.

Produkt-Links

Gerichte haben keine eigene Seite. Ein Gericht öffnet sich als Schnellansicht über seiner Kategorie, und genau diese Adresse ist seine URL, z. B. /Speisekarte/Pizza/?produkt=LF-21. Diese Links stehen in den Produktkarten (für Suchmaschinen sichtbar, ein Klick öffnet weiter die Schnellansicht ohne Seitenwechsel), im strukturierten MenuItem jeder Kategorie und in /llms.txt. So können Google und KI-Assistenten direkt auf ein Gericht verlinken.

Die URL kommt aus der SEO-URL des Produkts in Shopware. Das ShopBite-Plugin setzt das SEO-URL-Template für Produkte passend dazu. Sie können die URL eines Produkts in Shopware ändern, solange sie den Parameter ?produkt=<Produktnummer> behält. Fehlt die SEO-URL oder hat sie eine andere Form, bildet die Storefront den Link aus der Kategorie und der Produktnummer. Links auf Varianten (z. B. ?produkt=LF-21-groß) öffnen die Schnellansicht mit der Variante vorausgewählt. Die Canonical-URL bleibt die Kategorie, Produkte erscheinen nicht einzeln in der Sitemap.

Kunden können ein Gericht auch fertig konfiguriert teilen. Die Schnellansicht schreibt jede Änderung in die Adresse: die gewählte Variante, abgewählte Zutaten (ohne, per Name) und gewählte Extras (extras, per Produktnummer), z. B. /Speisekarte/Pizza/?produkt=LF-21-groß&ohne=Zwiebeln&extras=EXTRA-900. Wer den Link öffnet, sieht das Gericht genau so ausgewählt, inklusive Preis. Der Teilen-Button im Kopf der Schnellansicht öffnet auf dem Handy das Teilen-Menü (WhatsApp, Nachrichten …) und kopiert den Link am Desktop. Umbenannte Zutaten oder entfernte Extras in einem alten Link werden ignoriert.

llms.txt für KI-Assistenten

Unter /llms.txt liefert der Shop eine Zusammenfassung im Markdown-Format nach llmstxt.org: Name, Kontakt, Öffnungszeiten und kommende Schließtage, Bestellinfos (Liefergebiet, Lieferzeit, Abholung) und die komplette Speisekarte mit Preisen, Zutaten (Hauptzutaten) und vegetarisch/vegan. KI-Assistenten wie ChatGPT, Claude oder Perplexity finden dort alle Fakten an einer Stelle.

Die Datei wird automatisch aus denselben Daten erzeugt wie der Shop (Shopware, ShopBite-Plugin, NUXT_PUBLIC_SITE_*) und höchstens stündlich neu aufgebaut, es gibt nichts zu pflegen. Content-Seiten erscheinen unter „Weitere Informationen“, außer sie sind per robots.disallow gesperrt. Ist der Shop nicht indexierbar (NUXT_SITE_INDEXABLE=false, z. B. Demo-Shops), wird die Datei mit X-Robots-Tag: noindex ausgeliefert.

KI-Crawler in robots.txt

robots.txt nennt die bekannten KI-Crawler ausdrücklich, in zwei Gruppen:

• KI-Suche und Assistenten (OAI-SearchBot, ChatGPT-User, Claude-SearchBot, Claude-User, PerplexityBot, Perplexity-User, MistralAI-User): Sie rufen Seiten ab, um eine Frage zu beantworten, und verlinken den Shop als Quelle. Standardmäßig erlaubt.
• KI-Training (GPTBot, ClaudeBot, Google-Extended, Applebot-Extended, CCBot, meta-externalagent): Sie sammeln Inhalte, um Modelle zu trainieren. Standardmäßig erlaubt.

Beide Gruppen übernehmen die gesperrten Pfade aus robots.disallow.

Google-Extended steuert nur die Nutzung für Gemini, nicht die KI-Übersichten in der Google-Suche: Diese kommen vom normalen Googlebot. Ist der Shop nicht indexierbar (NUXT_SITE_INDEXABLE=false), bleibt es bei Disallow: / für alle.

Cache und Backoffice

Die Storefront hält Gerichte, Listen und Kategorien aus Shopware bis zu 24 Stunden im Cache, damit der Shop schnell lädt. Damit Änderungen aus dem ShopBite Backoffice (Preis, Gericht von der Karte nehmen, Abschnitt umbenennen) sofort sichtbar sind, leert das Backoffice den Cache nach jedem Speichern über POST /api/_cache/purge.

Die Route erwartet den Header Authorization: Bearer <Schlüssel>, ohne gültigen Schlüssel antwortet sie mit 401. Ohne Body leert sie alles, mit {"products": ["<id>"], "categories": ["<id>"]} gezielt diese Gerichte und Kategorien samt allen Listen und Extras.

curl -X POST -H "Authorization: Bearer $NUXT_CACHE_PURGE_SECRET" https://www.mein-shop.de/api/_cache/purge

Kontaktdaten und Öffnungszeiten im Footer

Der Footer zeigt Adresse, Telefon, einen Link zum Google Business Profil und die Öffnungszeiten auf jeder Seite als Text im HTML. Suchmaschinen lesen so Name, Adresse und Telefon (NAP) direkt aus dem Shop, das stärkt das lokale Ranking. Die Angaben sollten exakt mit dem Google Business Profil und dem Impressum übereinstimmen.

Der Shopname kommt aus NUXT_PUBLIC_SITE_NAME. Leere Werte blendet der Footer aus. Ohne Kontaktdaten und ohne Öffnungszeiten bleibt der Footer wie bisher.

Die Öffnungszeiten stammen aus den Geschäftszeiten des ShopBite-Plugins in Shopware. Aufeinanderfolgende Tage mit gleichen Zeiten werden zusammengefasst (z. B. Mi–Fr), Tage ohne Zeiten erscheinen als „Ruhetag“.

Beispiel .env:

NUXT_PUBLIC_SITE_ADDRESS_STREET="Kantstr. 6"
NUXT_PUBLIC_SITE_ADDRESS_POSTAL_CODE="63179"
NUXT_PUBLIC_SITE_ADDRESS_CITY="Obertshausen"
NUXT_PUBLIC_SITE_TELEPHONE="+49 6104 71427"
NUXT_PUBLIC_SITE_GOOGLE_BUSINESS_PROFILE_URL="https://maps.app.goo.gl/..."

Pflegen Sie Adresse und Telefon nicht zusätzlich als Link-Kategorien in der Shopware-Footer-Navigation, sonst erscheinen sie doppelt.

Stil-Presets

Ein Stil-Preset gibt der Storefront ihr Aussehen: Farben, Schriften, Eckenradien, hell oder dunkel und die Darstellung der Speisekarte. Es gibt drei Presets:

Das Preset wird in der nuxt.config.ts des Shops gesetzt. Einzelne Farben lassen sich überschreiben, zum Beispiel die Primärfarbe für Knöpfe:

export default defineNuxtConfig({
  extends: ["@shopbite-de/storefront"],
  shopBite: {
    preset: "trattoria",
    colors: { primary: "#3F7D20" },
  },
})

Alternativ setzt die Umgebungsvariable NUXT_SHOPBITE_PRESET das Preset beim Build. Ohne Preset bleibt das bisherige Aussehen erhalten.

Die Schriften des Presets werden beim Build heruntergeladen und von der Storefront selbst ausgeliefert. Jedes Preset ist auf Kontrast nach WCAG AA geprüft. Verschlechtert eine überschriebene Farbe einen Kontrast unter den Mindestwert, warnt der Build mit dem betroffenen Farbpaar. Rot als Primärfarbe für Knöpfe wird nicht empfohlen, weil es als Warnung gelesen wird.

Markenfarbe und Kontrast

Die Markenfarbe wird in app/assets/css/main.css als Farbskala --color-brand-50 bis --color-brand-950 gesetzt, entweder auf eine Tailwind-Skala gemappt oder als eigene Hex-Werte. Die Storefront leitet daraus die Primärfarbe ab: im hellen Modus brand-600, im dunklen Modus brand-400 (die Konvention von Nuxt UI).

@import "@shopbite-de/storefront/app/assets/css/main.css";

@theme {
    --color-brand-50:  var(--color-rose-50);
    /* ... */
    --color-brand-400: var(--color-rose-400);
    --color-brand-500: var(--color-rose-500);
    --color-brand-600: var(--color-rose-600);
    /* ... */
    --color-brand-950: var(--color-rose-950);
}

Text in der Primärfarbe (Überschriften, Links, Produktnummern) und Text auf Buttons in der Primärfarbe brauchen ein Kontrastverhältnis von mindestens 4,5:1 (WCAG AA), sonst meldet Lighthouse unter „Accessibility“ einen Kontrastfehler. Dezente Buttons und Badges (variant: subtle) legen die Farbe auf einen hellen Farbton ihrer selbst, deshalb sollte die helle Stufe 5:1 auf Weiß erreichen. Prüfen Sie daher zwei Werte, z. B. mit dem Contrast Checker:

Erreicht die Farbe des Kunden das nicht, wählen Sie für die Stufen 600 und 400 dunklere bzw. hellere Werte; die Stufe 500 bleibt frei für Akzente ohne Text.

Eigene Schrift

Legen Sie die Schrift des Shops als woff2 in public/fonts/ ab, eine Datei pro Schriftschnitt, benannt als <Familie>-<Schnitt>.woff2 (Kalam-Regular.woff2, Kalam-Bold.woff2), zusammen mit der Lizenzdatei. Für Deutsch reicht das Latin-Subset (Umlaute und ß sind enthalten); ein Schnitt hat damit etwa 20–30 KB. Bei Google Fonts laden Sie die Dateien herunter, die unter https://fonts.googleapis.com/css2?family=<Familie>:wght@400;700 als latin verlinkt sind.

Schreiben Sie kein @font-face in die main.css, sondern setzen Sie nur die Schriftliste:

@theme {
    --font-sans: 'Kalam', sans-serif;
}

Danach binden Sie die Dateien in der nuxt.config.ts über @nuxt/fonts ein und laden die Schnitte vor, die oberhalb des sichtbaren Bereichs vorkommen (Hero, Überschriften):

export default defineNuxtConfig({
    app: {
        head: {
            link: ["Regular", "Bold"].map((face) => ({
                rel: "preload",
                as: "font",
                type: "font/woff2",
                href: `/fonts/Kalam-${face}.woff2`,
                crossorigin: "",
                media: "(min-width: 640px)",
            })),
        },
    },
    fonts: {
        families: [
            { name: "Kalam", provider: "local", weights: [400, 700], preload: false },
        ],
    },
})

• Geben Sie jeden Schnitt an, den der Shop nutzt (400 für Text, 700 für fetten Text und Überschriften), sonst erzeugt der Browser den fetten Schnitt künstlich.
• @nuxt/fonts erzeugt Ersatzschriften mit angepassten Maßen, damit der Text beim Laden ungefähr seine Größe behält. Eine Schrift mit anderen Breiten kann trotzdem Zeilen anders umbrechen, wenn sie erst nach dem ersten Zeichnen ankommt; das verhindern die Preloads. Das Modul lädt pro Schriftfamilie nur einen Schnitt vor, deshalb die eigenen Links.
• media: "(min-width: 640px)" nimmt Handys aus: Bei langsamer mobiler Verbindung konkurrieren die Preloads mit dem Stylesheet und haben in unseren Messungen das erste Zeichnen um etwa 100 ms verzögert. Lassen Sie es weg, wenn die Schrift das mobile Layout merklich verändert.
• Messen Sie nach dem Einbinden den Layout Shift (CLS) auf Desktop und Mobile, z. B. mit PageSpeed Insights. Die Ersatzschriften unterscheiden sich je System (Roboto auf Android, Helvetica Neue auf iOS, keine von beiden unter Windows), daher kann ein Sprung nur auf dem Desktop auftreten.

Nuxt Config

Some examples how to configure the storefront. Checkout the Nuxt Config for more information.

export default defineNuxtConfig({
    app: {
        head: {
            title: "My Store",
            htmlAttrs: {
                lang: "de",
            },
            meta: [
                {charset: "utf-8"},
                {name: "viewport", content: "width=device-width, initial-scale=1"},
                {name: "description", content: "My Store description"},
                {property: "og:title", content: "My Store"},
                {property: "og:description", content: "My Store description",},
            ],
            link: [{rel: "icon", href: "/favicon.ico"}],
        },
    },
    runtimeConfig: {
        public: {
            site: {
                name: "My Store",
                description: "My Store description",
                countryId: "",
                titleTemplate: "%s | %siteName – Online bestellen",
                ogImage: "/card.png",
                cuisine: "Italienische Küche",
                address: {
                    street: "Kantstr. 6",
                    postalCode: "63179",
                    city: "Obertshausen",
                },
                telephone: "+49 6104 71427",
                googleBusinessProfileUrl: "https://maps.app.goo.gl/...",
            },
        },
    },
    colorMode: {
        preference: "light",
    },
    pwa: {
        manifest: {
            name: "My Store",
            short_name: "mystore",
            theme_color: "#4d7c0f",
            icons: [
                {
                    src: "log192x192.png",
                    sizes: "192x192",
                    type: "image/png",
                    purpose: "any maskable",
                }
            ],
        },
    },
})

Strukturierte Daten (schema.org)

Die Storefront gibt JSON-LD aus, damit Google den Shop als Restaurant mit Öffnungszeiten und Speisekarte versteht:

• Startseite: Restaurant (ein LocalBusiness) mit Name, Adresse, Telefon, Küche, Preisklasse, Bild, Link zum Google Business Profil, den wöchentlichen Öffnungszeiten (openingHoursSpecification) und Schließtagen (specialOpeningHoursSpecification) aus dem ShopBite-Plugin sowie hasMenu mit einer MenuSection je Kategorie der Speisekarte. Ist die Online-Bestellung aktiv, kommt eine OrderAction (Bestellen über die Speisekarte, Abholung bei gesetzter Adresse, eigene Lieferung bei gesetztem Liefergebiet) dazu, außerdem die aktiven Zahlungsarten aus Shopware (paymentAccepted) und die Währung. Diese Angaben helfen KI-Assistenten wie ChatGPT oder Perplexity, Fragen wie „Wer liefert zu mir?“ mit Ihrem Shop zu beantworten.
• Kategorieseiten: MenuSection mit den Produkten der Kategorie als MenuItem inklusive Preis (offers), dazu wie bisher CollectionPage und BreadcrumbList.

Die Werte kommen aus denselben Variablen wie der Footer (NUXT_PUBLIC_SITE_NAME, NUXT_PUBLIC_SITE_ADDRESS_*, NUXT_PUBLIC_SITE_TELEPHONE, NUXT_PUBLIC_SITE_CUISINE, NUXT_PUBLIC_SITE_GOOGLE_BUSINESS_PROFILE_URL, NUXT_PUBLIC_SITE_OG_IMAGE). Diese Variablen gibt es nur für das Schema:

Beispiel .env:

NUXT_PUBLIC_SITE_DELIVERY_AREAS="63179 Obertshausen, 63165 Lämmerspiel"
NUXT_PUBLIC_SITE_GEO_LATITUDE=50.0716
NUXT_PUBLIC_SITE_GEO_LONGITUDE=8.8483
NUXT_PUBLIC_SITE_ACCEPTS_RESERVATIONS="Nur telefonisch"

Leere Werte werden weggelassen. Prüfen Sie das Ergebnis mit dem Rich Results Test oder dem Schema Markup Validator: Beide sollten auf der Startseite ein Restaurant mit Öffnungszeiten erkennen.