Das brauchst du
Administratorrechte und ein eigenes, abgeleitetes Theme. Für selbst gehostete Shops brauchst du Zugriff auf Dateisystem und Konsole. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Lege ein eigenes Theme an, etwa mit
bin/console theme:create. Installiere und aktiviere es unter Erweiterungen → Meine Erweiterungen und weise es im Verkaufskanal zu. - Erstelle im Theme die Datei
src/Resources/views/storefront/base.html.twig. Erweitere darin die Vorlage mit{% sw_extends '@Storefront/storefront/base.html.twig' %}. - Überschreibe den Block
base_body_script. Gib zuerst{{ parent() }}aus und füge danach den unveränderten Einbaucode ein. Der Block steht direkt vor dem schließenden body-Tag. - Leere den Cache unter Einstellungen → System → Caches & Indizes oder mit
bin/console cache:clear. - Prüfe Startseite, Kategorie, Produkt, Warenkorb und Kasse in einem privaten Fenster und in der mobilen Ansicht.
So sieht die Einbindung aus
Verwende den fertigen Code aus deinem Projekt. Das Beispiel benötigt deine echte Projekt-ID und die öffentlich erreichbare Service-Adresse.
<script src="https://accessonaut.com/widget.js"
data-project-id="DEINE_PROJEKT_ID"
data-language="de" defer></script>Das Design an deine Website anpassen
Öffne im Accessonaut-Projekt „Lesehilfen-Widget“. Fünf Vorlagen und eine Live-Vorschau helfen dir beim Gestalten: Farben, Schriften, Menübreite, Ecken, Schatten, Symbol oder beschrifteter Öffner sowie eigene Texte. Position und Randabstände lassen sich für Desktop und Smartphone abstimmen. Nach dem Speichern übernimmt dein vorhandener Einbaucode das Projektdesign automatisch; die öffentliche Konfiguration wird bis zu einer Minute zwischengespeichert.
Im WordPress-Plugin kannst du stattdessen lokale Einstellungen wählen. Diese haben Vorrang vor dem Projektdesign. Die Gestaltung ist in allen Tarifen verfügbar. Im Free-Tarif bleibt der Accessonaut-Hinweis sichtbar. Persönliche Leseeinstellungen deiner Besuchenden haben Vorrang vor Designvorgaben.
Darauf achten
Ändere nie das Standard-Theme oder Dateien unter vendor/. Ein im Admin dupliziertes Theme ersetzt kein abgeleitetes Theme. Der Einbau gilt nur in Verkaufskanälen mit deinem Theme. In Shopware SaaS lädst du ein Theme als ZIP unter Meine Erweiterungen hoch; Konsole und Cache-Modul für selbst gehostete Shops stehen dort nicht so zur Verfügung. Eingebettete Zahlungsfelder prüfst du separat.
Häufige Fragen zu Shopware 6
Was gilt bei mehreren Verkaufskanälen oder Domains?
Das Theme weist du je Verkaufskanal im Reiter Themes zu. Der Einbau gilt deshalb nur in Kanälen mit deinem Theme. Nutzen Kanäle eigene Domains, braucht jede Domain ein eigenes Accessonaut-Projekt. Dann brauchst du je Kanal ein abgeleitetes Theme mit dem passenden Einbaucode.
Muss das Widget in den Cookie-Einstellungen von Shopware stehen?
Shopware sammelt Cookies von Core, Plugins und Apps in seiner Einwilligungsverwaltung. Das Widget setzt keine Cookies und erscheint dort nicht von selbst. Es speichert Leseeinstellungen im lokalen Speicher des Browsers. Soll es erst nach einer Einwilligung laden, brauchst du eine eigene Anpassung.
Was tun, wenn mein Theme nicht angewendet wird?
Shopware nennt dafür bin/console theme:change und anschließend bin/console theme:compile. Zeigen sich Änderungen dann noch nicht, folgt bin/console cache:clear.
Was ist bei einer Content Security Policy zu tun?
Shopware legt Standardrichtlinien über den Container-Parameter shopware.security.csp_templates fest. Passt du sie an, erlaube deine Service-Adresse in script-src und connect-src. Das Widget fügt style-Elemente ohne Nonce ein; style-src muss eingebettete Styles erlauben.
Wenn etwas nicht klappt
In einem Verkaufskanal fehlt das Widget.
Ursache: Dem Kanal ist ein anderes Theme zugewiesen.
Lösung: Öffne den Verkaufskanal, wähle im Reiter Themes dein Theme und leere den Cache.
Die Template-Änderung zeigt keine Wirkung.
Ursache: Der Cache liefert noch alte Seiten aus.
Lösung: Wähle unter Einstellungen → System → Caches & Indizes „Cache löschen“ oder nutze bin/console cache:clear.
Du willst das Widget entfernen.
Ursache: Der Block base_body_script in deinem Theme gibt den Code weiter aus.
Lösung: Entferne den Einbaucode aus dem Block, lass {{ parent() }} stehen und leere den Cache.
Einbau prüfen
- Öffne die öffentliche Website in einem privaten Fenster. Das Widget wird genau einmal angezeigt.
- Erreiche den Button mit der Tastatur. Öffne das Panel, ändere die Textgröße und schließe es wieder.
- Prüfe Startseite, Unterseite, Formular und mobile Ansicht. Das Widget darf keine wichtigen Bedienelemente verdecken.
- Prüfe im Netzwerk-Tab, dass widget.js und die Projektkonfiguration von deiner Service-Adresse geladen werden. Bei Fehlern kontrolliere Domain, Projekt-ID und CSP.
- Bei Free-Projekten bleibt der sichtbare Accessonaut-Hinweis Bestandteil des Widgets. Berechtigungen kommen aus deinem Projekt.
Datenschutz und Grenzen
Beim Laden ruft der Besucherbrowser das Script und die Projektkonfiguration vom Accessonaut-Dienst ab. Dabei fallen IP-Adresse, Browser-Anfragedaten und Website-Hostname an. Darstellungswünsche werden lokal im Browser gespeichert. Berücksichtige die Einbindung in deinen Datenschutzhinweisen und prüfe deine konkrete Konfiguration.
Die Lesehilfen erzeugen keine Konformitätsgarantie. Prüfe Barrieren im Quellcode und vollständige Nutzerabläufe zusätzlich automatisch und manuell.