Storefront Configuration

Feature Flags

Feature flags are set via environment variables and control optional storefront behaviour.

.env example:

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

The storefront outputs a sitemap, canonical URLs, share previews and page titles automatically. Environment variables control the values.

.env example:

NUXT_PUBLIC_STORE_URL="https://www.my-shop.com"
NUXT_PUBLIC_SITE_NAME="Pizzeria Example"
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"

Page titles and descriptions

• Subpages and categories get the title template, e.g. Pizza | Pizzeria Example – Online bestellen. Categories use the meta title and meta description from Shopware, otherwise the category name and description.
• The home page does not use the template. Its default title is <shop name> <city> | Online bestellen & liefern lassen; the description is built from cuisine, city and shop name.
• Set custom home page values in content/index.yml under seo. They take precedence over the defaults, but only if they differ from the page's title and description: Nuxt Content otherwise fills seo with those values automatically.

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

Share preview (og:image)

Category pages use the category image from Shopware, the home page uses seo.image from content/index.yml. All other pages fall back to NUXT_PUBLIC_SITE_OG_IMAGE. twitter:card is summary_large_image.

The default /card.png shows the ShopBite demo. Put your own public/card.png into the shop project (1200 × 630 px recommended) to replace it. Check the preview with the Facebook Sharing Debugger. WhatsApp caches previews for a while.

Sitemap

/sitemap.xml contains:

• the home page
• content pages from content/ (e.g. payment and shipping)
• all categories of the main navigation and the menu category tree (NUXT_PUBLIC_SHOP_BITE_MENU_CATEGORY_ID) with their SEO URL, modification date and category image
• /kontakt if the contact form is enabled

robots.txt references the sitemap automatically. Paths blocked via robots.disallow are left out of the sitemap. Exclude a single content page with sitemap: false in its frontmatter. The sitemap is cached for ten minutes.

Category URLs come from the SEO URL templates in Shopware. A trailing slash (e.g. /c/Pizza/) is kept in both the sitemap and the canonical URL.

Contact details and opening hours in the footer

The footer shows the address, phone number, a link to the Google Business Profile and the opening hours on every page as text in the HTML. Search engines read name, address and phone (NAP) straight from the shop, which strengthens local ranking. Keep the values identical to the Google Business Profile and the imprint.

The shop name comes from NUXT_PUBLIC_SITE_NAME. Empty values are hidden. Without contact details and opening hours the footer stays as before.

Opening hours come from the business hours of the ShopBite plugin in Shopware. Consecutive days with the same hours are grouped (e.g. Mi–Fr); days without hours show as "Ruhetag".

.env example:

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/..."

Do not also maintain address and phone as link categories in the Shopware footer navigation, or they show up twice.

Brand colour and contrast

The brand colour is set in app/assets/css/main.css as a colour scale --color-brand-50 to --color-brand-950, either mapped to a Tailwind scale or as custom hex values. The storefront derives the primary colour from it: brand-600 in light mode, brand-400 in dark mode (the Nuxt UI convention).

@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 the primary colour (headlines, links, product numbers) and text on primary buttons need a contrast ratio of at least 4.5:1 (WCAG AA), otherwise Lighthouse reports a contrast failure under "Accessibility". Subtle buttons and badges (variant: subtle) put the colour on a light tint of itself, so the light step should reach 5:1 on white. Check two values, e.g. with the Contrast Checker:

If the customer's colour misses that, pick darker or lighter values for the 600 and 400 steps; the 500 step stays free for accents without 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: "en",
            },
            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: "Italian cuisine",
                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",
                }
            ],
        },
    },
})

Structured data (schema.org)

The storefront emits JSON-LD so Google understands the shop as a restaurant with opening hours and a menu:

• Home page: Restaurant (a LocalBusiness) with name, address, phone, cuisine, price range, image, link to the Google Business Profile, the weekly opening hours (openingHoursSpecification) and closing days (specialOpeningHoursSpecification) from the ShopBite plugin, plus hasMenu with one MenuSection per menu category.
• Category pages: MenuSection with the category's products as MenuItem including the price (offers), next to the existing CollectionPage and BreadcrumbList.

The values come from the same variables as the 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). Two variables exist for the schema only:

Empty values are left out. Check the result with the Rich Results Test or the Schema Markup Validator: both should detect a Restaurant with opening hours on the home page.