Shopware 6.7 represents a significant evolution in the Shopware e-commerce ecosystem, emphasizing enhanced performance, refined developer experiences, and robust headless capabilities. As developers and merchants navigate this release, understanding the distinct roles and architectures of the Storefront and Administration is paramount. While they share the same kernel, database, and core logic, their interaction patterns, technology stacks, and optimization strategies diverge significantly.

This post explores the key differences between these two pillars in the context of Shopware 6.7, helping you choose the right approach for your development tasks.

1. Core Purpose and User Experience

The fundamental difference lies in the audience and objectives:

  • Storefront: Designed for end-users (customers). It prioritizes conversion rates, SEO, accessibility, and blazing-fast page loads. In Shopware 6.7, the Storefront benefits from improved Twig compilation optimizations and faster API response times, ensuring a seamless shopping experience with reduced Time to Interactive (TTI).
  • Administration: Built for merchants and administrators. It focuses on data management, workflow efficiency, and real-time updates. The Admin is a Single Page Application (SPA) that mimics a native desktop app, managing complex relationships between products, customers, orders, and media with high responsiveness.

2. Technology Stack in Shopware 6.7

Shopware 6.7 continues to leverage the mature separation of concerns inherent in Symfony, but each side utilizes specific frameworks optimized for its task.

Storefront Architecture

The Storefront follows a server-side rendering (SSR) approach blended with modern client-side interactions.

  • Templates: Twig-based templates allow easy customization via overrides and block inheritance.
  • Assets: Compiled via bin/build-storefront.sh. Uses SCSS and modern ES6+ JavaScript modules, often integrated via Symfony UX Stimulus for targeted interactivity without the overhead of a full SPA.
  • API Interaction: The Storefront consumes data from the Storefront API (JSON) or GraphQL endpoints defined in the core/Framework/Storefront namespace.

Administration Architecture

The Administration is entirely Vue.js-driven, providing a reactive management interface.

  • Framework: Built with Vue.js (stabilized on Vue 3 composition API patterns). Uses TypeScript for robust typing and Vuex/Pinia for state management.
  • Components: Highly modular Vue components that communicate with the backend via the Administration API.
  • Build Process: Managed through distinct Webpack/Vite configurations within src/Administration, separate from storefront asset pipelines.

3. Coding Examples: Extending in Shopware 6.7

Extending functionality requires different patterns depending on the target. Below are relevant examples for Shopware 6.7+.

Extending the Storefront

In Shopware 6.7, extending templates remains the most efficient method for layout changes. The structure ensures high compatibility and leverages Twig's caching mechanisms.

{# themes/Frontend/SwagExampleTheme/storefront/layout/base.html.twig #}

{% sw_extends '@ storefront/storefront/base.html.twig' %}

{% block 'base_meta_tags' %}
    {{ parent() }}
    <meta name="shopware-67-feature" content="optimized-storefront">
{% endblock %}

{% block 'layout_footer_fixed_bar' %}
    {{ parent() }}
    <div class="custom-promo-bar">
        Shopware 6.7 Performance Boost Active!
    </div>
{% endblock %}

Injecting Logic in Administration (JavaScript)

For the Admin, custom logic often involves registering components or services. In Shopware 6.7, ensure you utilize the latest registration patterns compatible with the Vue 3 base.

// src/Administration/CustomModule/Resources/app/administration/src/module/custom-dashboard/component/sw-custom-widget.html5

import { Component } from 'src/core/shopware';
import template from './sw-custom-widget.html.twig';

/**
 * In Shopware 6.7, use the standard registration syntax.
 * Ensure compatibility with the Vue 3 composition API where applicable.
 */
Component.register('sw-custom-widget', {
    template,

    inject: ['repositoryFactory'],

    computed: {
        customRepository() {
            return this.repositoryFactory.create('custom_entity');
        }
    },

    methods: {
        fetchData() {
            return this.customRepository.getListing();
        }
    }
});

4. Theming and Styling Differences

  • Storefront: Theming involves SCSS variables, asset compilation, and responsive design. Shopware 6.7 introduces better CSS isolation to prevent theme conflicts and improves build speed. You work with shopware.vars.scss to customize design tokens (colors, spacing, fonts) across the site.
  • Administration: Admin theming is less about visual overhaul and more about component customization using CSS variables defined in the Admin's UI library. Modifying Admin styles usually requires overriding specific component CSS or injecting custom themes via configuration, as the layout is rigidly controlled by Vue components to maintain usability.

5. Performance and Optimization in Shopware 6.7

Shopware 6.7 brings notable performance gains to both sides, but the strategies differ:

  • Storefront: Focuses on entity loadouts (using loadout parameters efficiently to reduce payload sizes), improved Twig caching, and faster asset delivery via CDN integration. The "Storefront Performance" metrics have been a primary focus, optimizing render trees and JavaScript hydration.
  • Administration: Enhances grid performance for large datasets, optimizes API response parsing in state management stores (Vuex/Pinia), and reduces bundle sizes through tree-shaking. The Admin loads data more intelligently based on context, reducing initial payload weight and improving navigation speed between entities.

6. API and Headless Considerations

Both systems rely on the underlying API structure, but Shopware 6.7 strengthens headless capabilities:

  • GraphQL Support: Both endpoints support GraphQL, allowing developers to fetch data without strict serialization overheads. This is vital for decoupled architectures where custom frontends or apps consume Shopware data.
  • Permissions and Contexts: The Storefront API uses public tokens, anonymous contexts, and customer groups appropriate for web browsing. The Administration API requires strict admin credentials with granular permissions defined in administration/Service/Rule and entity access controls, ensuring merchants only see what they are authorized to manage.

Conclusion

In Shopware 6.7, the divide between Storefront and Administration is not just functional but deeply architectural. The Storefront remains the performance-critical face of your store, optimized for Twig and asset pipelines, while the Administration provides a reactive, component-based management interface via Vue.js.

Developers must master both ecosystems to build fully featured plugins, themes, or headless integrations that leverage the full power of Shopware 6.7. Whether you are customizing a storefront template to improve conversion or building a complex admin module to streamline workflows, always keep in mind the specific build processes, security contexts, and performance targets unique to each half of the platform.