Alle Artikel
Shopware 64 min

Shopware 6 Theme anpassen – Performance & SEO

Wer einen Shopware 6 Shop betreibt, merkt schnell: Das Standard-Theme ist solide, aber für optimale Performance und SEO reicht es nicht immer aus. In diesem Artikel zeige ich dir, wie du dein Shopware 6 Theme anpassen kannst – technisch fundiert, mit Fokus auf Ladezeiten und Suchmaschinenoptimierung.

Warum du dein Shopware 6 Theme anpassen solltest

Shopware 6 liefert mit dem Storefront-Theme eine gute Basis. Doch jeder Shop hat individuelle Anforderungen:

  • Performance: Unnötige CSS/JS-Dateien belasten die Ladezeit
  • SEO: Strukturierte Daten und semantisches HTML sind oft nicht optimal
  • Conversion: Standard-Layouts passen selten zur eigenen Marke
  • Core Web Vitals: Google bewertet UX-Metriken wie LCP und CLS

Ein angepasstes Theme kann den Unterschied zwischen Seite 1 und Seite 3 bei Google ausmachen – besonders im E-Commerce.

Theme-Grundlagen: Vererbung verstehen

Shopware 6 nutzt Theme-Vererbung. Du erstellst ein Child-Theme, das vom Storefront-Theme erbt:

# Theme erstellen
bin/console theme:create

# Nach Eingabe der Details:
# Name: CustomTheme
# Author: Dein Name
# Technical Name: custom-theme

Die Struktur deines Themes:

custom/plugins/CustomTheme/
├── src/
│   └── Resources/
│       ├── theme.json
│       ├── app/
│       │   └── storefront/
│       │       ├── src/
│       │       │   ├── scss/
│       │       │   └── main.js
│       │       └── dist/
│       └── views/
│           └── storefront/

In theme.json definierst du die Vererbung:

{
  "name": "CustomTheme",
  "author": "Long Huynh",
  "views": [
    "@Storefront",
    "@Plugins",
    "@CustomTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss"
  ],
  "script": [
    "app/storefront/dist/storefront/js/custom-theme.js"
  ]
}

Performance-Optimierung beim Theme anpassen

1. Kritisches CSS inline laden

Für bessere LCP-Werte (Largest Contentful Paint) solltest du kritisches CSS inline im <head> laden. Erstelle dazu views/storefront/layout/meta.html.twig:

{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}

{% block layout_head_stylesheet %}
    {{ parent() }}
    
    <style>
        /* Kritisches CSS für Above-the-Fold Content */
        .header-main { display: flex; }
        .logo-main { width: 180px; }
        /* ... weitere kritische Styles */
    </style>
{% endblock %}

2. JavaScript optimieren

Beim Shopware 6 Theme anpassen solltest du unnötiges JavaScript entfernen. In src/Resources/theme.json kannst du Scripts deaktivieren:

{
  "script": [
    "app/storefront/dist/storefront/js/custom-theme.js"
  ],
  "asset": [
    "app/storefront/src/assets"
  ],
  "configInheritance": [
    "@Storefront"
  ],
  "excludedPlugins": [
    "SwagPayPal"
  ]
}

Eigene Scripts mit Vanilla JS statt jQuery schreiben spart Bytes:

// src/Resources/app/storefront/src/main.js
import CustomPlugin from './plugin/custom-plugin.plugin';

const PluginManager = window.PluginManager;
PluginManager.register('CustomPlugin', CustomPlugin, '[data-custom-plugin]');

3. Lazy Loading für Bilder

Erweitere das Produktlisting-Template views/storefront/component/product/card/box-standard.html.twig:

{% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}

{% block component_product_box_image %}
    <img src="{{ product.cover.media.thumbnails|first.url }}"
         loading="lazy"
         decoding="async"
         alt="{{ product.translated.name }}"
         width="300"
         height="300">
{% endblock %}

SEO-Optimierungen im Theme

Strukturierte Daten erweitern

Shopware 6 bietet Basis-Schema.org-Markup. Du kannst es erweitern in views/storefront/page/product-detail/index.html.twig:

{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}

{% block page_product_detail_structured_data %}
    {{ parent() }}
    
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "{{ page.product.translated.name }}",
        "image": "{{ page.product.cover.media.url }}",
        "description": "{{ page.product.translated.description|striptags|slice(0, 160) }}",
        "brand": {
            "@type": "Brand",
            "name": "{{ page.product.manufacturer.translated.name }}"
        },
        "offers": {
            "@type": "Offer",
            "price": "{{ page.product.calculatedPrice.unitPrice }}",
            "priceCurrency": "EUR",
            "availability": "https://schema.org/InStock"
        }
    }
    </script>
{% endblock %}

Semantisches HTML

Verwende semantische Tags für bessere Zugänglichkeit und SEO:

{# views/storefront/page/content/index.html.twig #}
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}

{% block page_content %}
    <main role="main">
        <article itemscope itemtype="https://schema.org/Article">
            <h1 itemprop="headline">{{ page.cmsPage.translated.name }}</h1>
            <div itemprop="articleBody">
                {{ parent() }}
            </div>
        </article>
    </main>
{% endblock %}

Breadcrumbs optimieren

{% sw_extends '@Storefront/storefront/layout/breadcrumb.html.twig' %}

{% block layout_breadcrumb_list %}
    <nav aria-label="Breadcrumb">
        <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
            {% for breadcrumb in breadcrumbList %}
                <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a itemprop="item" href="{{ breadcrumb.url }}">
                        <span itemprop="name">{{ breadcrumb.name }}</span>
                    </a>
                    <meta itemprop="position" content="{{ loop.index }}" />
                </li>
            {% endfor %}
        </ol>
    </nav>
{% endblock %}

Theme kompilieren und aktivieren

Nach dem Shopware 6 Theme anpassen musst du es kompilieren:

# Theme kompilieren
bin/console theme:compile

# Cache leeren
bin/console cache:clear

# Theme aktivieren (falls noch nicht geschehen)
bin/console theme:change --all CustomTheme

Für Entwicklung mit Watch-Mode:

# Im Theme-Verzeichnis
npm run watch

Performance messen

Tools zum Überprüfen deiner Optimierungen:

  1. Google PageSpeed Insights: Misst Core Web Vitals
  2. Lighthouse: Integriert in Chrome DevTools
  3. WebPageTest: Detaillierte Waterfall-Analysen

Zielwerte nach dem Shopware 6 Theme anpassen:

  • LCP < 2.5s
  • FID < 100ms
  • CLS < 0.1
  • PageSpeed Score > 90

Häufige Stolpersteine

Problem: Theme-Änderungen werden nicht sichtbar

# Vollständiger Rebuild
rm -rf var/cache/*
bin/console theme:compile --active-only
bin/console cache:clear

Problem: SCSS-Variablen überschreiben nicht

Die Reihenfolge in theme.json ist entscheidend. Deine overrides.scss muss nach den Storefront-Styles geladen werden:

{
  "style": [
    "@Storefront",
    "app/storefront/src/scss/overrides.scss"
  ]
}

Problem: JavaScript-Plugins werden nicht initialisiert

Prüfe die Browser-Konsole und stelle sicher, dass das Data-Attribut korrekt gesetzt ist:

<div data-custom-plugin="true">
    <!-- Content -->
</div>

Fazit

Ein professionell angepasstes Shopware 6 Theme ist mehr als Kosmetik. Es beeinflusst direkt deine Rankings, Conversion-Rate und User Experience. Die wichtigsten Punkte:

  • Vererbung nutzen statt Core-Dateien ändern
  • Performance durch kritisches CSS und optimiertes JavaScript
  • SEO durch strukturierte Daten und semantisches HTML
  • Regelmäßig mit echten Tools messen

Die Investition in ein optimiertes Theme zahlt sich durch bessere Rankings und höhere Umsätze aus.

Du arbeitest an einem Shopware 6 Projekt und möchtest dein Theme professionell anpassen? Ich helfe dir gerne bei Performance-Optimierung, SEO-Integration und individuellen Shop-Anpassungen.

Shopware 6 Theme anpassenShopware 6FreelancerWebentwicklungDüsseldorf
Anfrage senden