How to Set Up the Frontend for Shopware 6

Setting up and installing the frontend for Shopware 6 can be a challenging task, especially without clear documentation. Many users encounter challenges when trying to create a custom storefront that aligns with their specific needs.

This article will guide you through the process of setting up the frontend for Shopware 6.

Solution: To set up frontend for Shopware 6

Shopware Composable Frontends is Shopware’s toolkit for creating platform-agnostic custom storefronts. The demo store implementation is based on Vue.js and Nuxt3, which provide a flexible and modern framework for development.

Installing the Frontend

Option 1: Install the CMS Base Package

Option 2: Set Up the Vue Demo Store Template Manually

Run the following commands in a new directory:

If you encounter a dependency conflict, you can use the –legacy-peer-deps flag:

Note: Using –legacy-peer-deps may lead to potential issues, so use it cautiously.

Connecting to Shopware API

Open demo-store/nuxt.config.ts and edit the configuration:

• The endpoint should be HTTPS and in the format: https://your-url/store-api
• Access token can be copied from the Shopware admin login (Sales channel > API section)

Note: Frontend typically doesn’t prefer headless for SEO URLs.

Using HTTPS for Localhost with Composable Frontends

Manual Setup with mkcert

• Install mkcert (follow instructions here)
• Create a valid certificate:

• Update the nuxt dev command in your package.json:

• Run your project:

Language Settings

• English Configuration: demo-store/i18n/en-GB/en-GB.ts

Default Layouts

• Default Page Layout: demo-store/layouts/default.vue
• My Account Page Layout: demo-store/layouts/account.vue
• Checkout Page Layout: demo-store/layouts/checkout.vue

Key Pages

• Listing Page (Frontend Navigation): demo-store/components/FrontendNavigationPage.vue
• Landing Page (Frontend Detail): demo-store/components/FrontendDetailPage.vue

Utility CSS

Supports multiple CSS frameworks, including:

• Tailwind CSS
• Windy CSS
• Bootstrap

npm install bootstrap or npm install bootstrap –legacy-peer-deps

CMS Block and Element

• Default CMS Blocks: Automatically added to the frontend. When added in the backend, default CMS block codes are automatically generated in the Nuxt module.
• Custom CMS Blocks: Need to be manually designed on the frontend Vue side. Ensure that you use the block name and element name specified in the backend along with the corresponding configuration values.

• Block will be added here – demo-store/components/cms/block eg: CmsBlockAccordion.vue
• Elements will be added here – demo-store/components/cms/element eg: CmsElementAccordiion.vue

Important Limitations

Frontend settings not synchronized from the backend include:

• Available fields for checkout and registration
• Multiple domains (separate project needed for separate domains)
• Translations and snippets (Additional language snippet needed in frontend)

Conclusion

This guide should help you effectively set up the frontend for your Shopware store using Vue.js and Nuxt3. If you encounter any issues, reach out to our Shopware agency for expert solutions.