Das brauchst du
Zugriff auf den Code deines Online-Store-Themes. Erstelle vor der Änderung eine Theme-Kopie. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Öffne Onlineshop → Themes und erstelle eine Kopie des verwendeten Themes.
- Öffne im kopierten Theme „Code bearbeiten“ und die gemeinsame Layout-Datei, gewöhnlich layout/theme.liquid.
- Füge den unveränderten Einbaucode einmal unmittelbar vor dem schließenden body-Tag ein und speichere.
- Prüfe die Theme-Vorschau. Veröffentliche nach erfolgreicher Prüfung das Theme und teste die öffentliche Domain erneut.
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
Der Theme-Code deckt den Online-Store ab. Shopify-Checkout, Kundenkonten und eingebettete Drittanbieter-Apps können eigene technische Grenzen und Einbauwege haben. Prüfe diese Abläufe separat. Theme-Wechsel können deinen Einbau entfernen.
Häufige Fragen zu Shopify
Funktioniert das Widget im Shopify-Checkout?
Nein. Layout-Dateien wie theme.liquid gelten für alle Seiten außer dem Checkout. Eigene Scripts lässt Shopify im Checkout nicht mehr zu: checkout.liquid wird nicht mehr unterstützt, und die früheren zusätzlichen Scripts auf Danke- und Bestellstatusseite hat Shopify eingestellt. Checkout-Erweiterungen laufen isoliert ohne Zugriff auf die Seite. Prüfe den Checkout deshalb gesondert auf Barrieren.
Erscheint das Widget in den Kundenkonten?
Die neuen Kundenkonten passt du über den Checkout- und Konto-Editor und App-Erweiterungen an, nicht über den Theme-Code. Diese Erweiterungen haben laut Shopify keinen Zugriff auf die Kontoseite selbst. Rechne dort deshalb nicht mit dem Widget.
Bleibt mein Einbau bei einem Theme-Update erhalten?
Shopify übernimmt Code-Änderungen in die aktualisierte Theme-Kopie, wenn sie nicht mit dem Update kollidieren. Auf der Theme-Karte siehst du, ob das geklappt hat. Wenn nicht, setze den Einbaucode in der neuen Kopie vor dem schließenden body-Tag erneut ein. Sichere deinen Code vor dem Update.
Brauche ich für mehrere Sprachen oder Märkte einen eigenen Einbau?
Nein. Es ist immer nur ein Theme veröffentlicht, und alle Sprachen nutzen es. Mit data-language="auto" folgt das Widget dem lang-Attribut der Seite; das Theme Dawn setzt es über {{ request.locale.iso_code }}. Nutzt ein Markt eine eigene Domain, braucht diese Domain ein eigenes Accessonaut-Projekt.
Kann ich das Widget in der Theme-Vorschau testen?
Ja, die Vorschau rendert das Theme samt Einbau. Geteilte Vorschau-Links laufen aber über shopifypreview.com. Dort lädt das Widget deine Projektkonfiguration nicht und zeigt das Standarddesign mit Accessonaut-Hinweis. Das endgültige Design prüfst du auf deiner Shop-Domain.
Wenn etwas nicht klappt
Nach einem Theme-Wechsel fehlt das Widget.
Ursache: Der Einbaucode steckt im alten Theme. Jedes Theme hat seine eigene theme.liquid.
Lösung: Füge den Code in das neue Theme ein, bevor du es veröffentlichst. Entferne ihn aus Themes, die du nicht mehr brauchst.
Zwei Barrierefreiheits-Buttons überlagern sich.
Ursache: Eine andere App blendet ein eigenes Werkzeug ein. Zwei Werkzeuge, die beide Schrift und Farben ändern, behindern sich gegenseitig.
Lösung: Entscheide dich für ein Werkzeug und deaktiviere das andere vollständig.
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.