Documentation

Storefront Configuration

Feature Flags

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

Variable	Type	Default	Description
`NUXT_PUBLIC_SHOP_BITE_FEATURE_MULTI_CHANNEL`	`boolean`	`false`	Enables the sales channel switcher in the header. Use this when you operate multiple locations under one storefront.
`NUXT_PUBLIC_SHOP_BITE_FEATURE_SECURE_KEY`	`string`	(empty)	When set, the entire storefront is locked behind this key. Visitors must provide `?secureKey=<value>` in the URL once; the key is then persisted in a cookie for 30 days. Without a valid cookie, all pages redirect to `/maintenance`. Leave empty to disable.
`NUXT_PUBLIC_SHOP_BITE_FEATURE_CONTACT_FORM`	`boolean`	`false`	Enables the `/kontakt` contact page. When `false`, the page returns a 404.
`NUXT_PUBLIC_SHOP_BITE_MENU_CATEGORY_ID`	`string`	`"main-navigation"`	The Shopware category ID used as the root of the navigation menu.

.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_MENU_CATEGORY_ID=main-navigation

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: "",
            },
        },
    },
    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",
                }
            ],
        },
    },
})