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
NUXT_PUBLIC_SHOP_BITE_MENU_CATEGORY_ID=main-navigation
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 (NUXT_PUBLIC_SHOP_BITE_MENU_CATEGORY_ID) 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.

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.

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.

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.
• 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). Zwei Variablen gibt es nur für das Schema:

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.