Barrierefreies Shopify-Theme auswählen und selbst prüfen
Veröffentlicht am 29. Oktober 2026
Ein Shopify-Theme ist nicht schon deshalb barrierefrei, weil es im Theme Store steht: Shopify verlangt dort im Mittel über Start-, Kollektions- und Produktseite einen Lighthouse-Barrierefreiheitswert von mindestens 90 und einige Grundregeln, garantiert aber selbst keine vollständige Barrierefreiheit. Ob ein Theme für Ihren Shop taugt, prüfen Sie am besten vor dem Kauf selbst: mit der Tastatur durch die Demo, mit Zoom auf 200 und 400 Prozent, mit einem Blick auf Kontraste, Produktgalerie, Variantenauswahl und Warenkorb-Schublade.
Dieser Artikel gibt Ihnen dafür eine vollständige Prüfliste, zeigt, welche Theme-Einstellungen in Dawn und Horizon neue Barrieren erzeugen, und hilft bei der Entscheidung, ob sich ein Theme-Wechsel lohnt. Was Shopify insgesamt zum BFSG liefert und wo Sie im Admin Alt-Texte, Checkout-Farben und die Erklärung pflegen, steht im Überblick Shopify barrierefrei machen nach BFSG. Den Vergleich mit anderen Shopsystemen finden Sie in Barrierefreier Onlineshop: Shopify, WooCommerce, Shopware und Co..
Was Shopify zur Barrierefreiheit von Themes festlegt
Shopify hat drei Texte, die für die Theme-Auswahl zählen. Sie sind unterschiedlich streng, und nur der erste ist eine Pflicht.
| Quelle | Für wen | Was drinsteht (Auszug) |
|---|---|---|
| Theme Store Requirements | Pflicht für jedes Theme, das im Theme Store gelistet wird | Lighthouse-Barrierefreiheitswert im Mittel mindestens 90 auf Produkt-, Kollektions- und Startseite, für Desktop und Mobil; alles per Tastatur bedienbar, auch Dropdown-Menüs; sichtbarer Fokus; Fokusreihenfolge wie im Code; alt-Attribut an allen Bildern; Formularfelder mit zugehörigem Label; Kontrast 4,5 : 1 für Fließtext, 3 : 1 für Text über 18 pt, Rahmen und Icons; Klickflächen mindestens 24 mal 24 CSS-Pixel; Überschriften h1 bis h6 sichtbar unterschiedlich |
| Accessibility best practices for themes | Empfehlungen für Theme-Entwickler | zusätzlich unter anderem: Sprunglink zum Inhalt, Zoom nicht gesperrt, Dropdowns mit Enter und Leertaste öffnen und mit Esc schließen, Schubladen und Dialoge halten den Fokus und schließen mit Esc, Preisänderungen bei Variantenwechsel werden Screenreadern angesagt, Medien spielen nicht automatisch ab, wichtige Bedienelemente mindestens 44 mal 44 Pixel |
| Accessibility for themes (Help Center) | Hinweise für Händler beim Anpassen | Kontrast 4,5 : 1 für Fließtext und Buttontext, 3 : 1 für Text ab 24 px und für Rahmen und Icons; Fließtext mindestens entsprechend 16 px; Slideshows und Videos nicht automatisch abspielen; beim Bearbeiten des Stylesheets die Fokus-Hervorhebung nicht entfernen |
Zwei Sätze von Shopify sollten Sie kennen. Auf der Entwicklerseite steht: „Following only the best practices on this page doesn't guarantee that your theme is completely accessible.“ (shopify.dev). Und im Help Center: „only following guidelines below doesn't guarantee that your online store is fully accessible.“ (Shopify Help Center).
Drei Punkte, die man beim Lesen leicht übersieht:
- Der Lighthouse-Wert gilt für Testdaten. Laut den Anforderungen wird mit einem Benchmark-Datensatz gemessen, die Abschnitte müssen echte Bilder und Inhalte enthalten (Theme Store Requirements). Mit Ihren Bildern, Farben und Apps kann der Wert anders ausfallen.
- Zoom und Bewegung sind keine Pflicht. Die Theme-Store-Anforderungen nennen weder Zoom noch reduzierte Bewegung. Zoom steht nur in den Best Practices. Genau diese Punkte prüfen Sie deshalb selbst.
- Themes außerhalb des Theme Stores haben diese Aufnahmeprüfung nicht durchlaufen. Für sie gilt nur, was der Anbieter selbst belegt.
Dawn und Horizon
Für Dawn gibt es einen Konformitätsbericht, aber für Version 2.4.0 gegen WCAG 2.1 A/AA (Shopify Accessibility). Die aktuelle Dawn-Version im offiziellen Repository ist 16.0.0. Der Bericht sagt also wenig über das Theme, das Sie heute installieren. Für Horizon, das kostenlose Theme von Shopify (Theme Store: Horizon), nennt die Barrierefreiheitsseite von Shopify keinen eigenen Bericht. Für Horizon gelten also die Theme-Store-Anforderungen, ein Prüfbericht ist dort nicht veröffentlicht.
Unsere Einschätzung: Ein kostenloses Shopify-Theme ist ein vernünftiger Ausgangspunkt, weil es im Theme Store steht und von Shopify selbst stammt. Ein Nachweis für Ihren Shop ist es nicht. Testen Sie es genauso wie ein gekauftes Theme.
Wo Sie ein Theme vor dem Kauf testen
| Weg | So geht es | Was Sie damit prüfen können |
|---|---|---|
| Demo im Theme Store | Auf der Theme-Seite im Theme Store auf „View demo“ klicken (Beispiel Horizon) | Das Theme mit den Inhalten des Anbieters. Schnell, ohne Anmeldung, aber mit Bildern und Farben, die nicht Ihre sind |
| Testversion in Ihrem Shop | Im Theme Store ein kostenpflichtiges Theme wählen und „Try theme“ klicken. Danach im Admin Online Store, im Bereich Draft themes das Aktionsmenü neben dem Theme öffnen und Preview klicken (Shopify Help Center) | Das Theme mit Ihren eigenen Produkten. Laut Shopify können Sie bis zu 19 kostenpflichtige Themes gleichzeitig testen, aber den Theme-Code in der Testphase nicht bearbeiten |
| Kostenloses Theme hinzufügen | Im Admin Online Store, im Bereich Discover themes ein Theme wählen oder Visit theme store klicken, dann Add (Shopify Help Center) | Wie bei der Testversion: Das Theme liegt als Entwurf in Ihrer Bibliothek und ist für Kunden nicht sichtbar, bis Sie es veröffentlichen |
| Theme außerhalb des Theme Stores | Demo-Shop des Anbieters | Nur das, was der Anbieter zeigt. Fragen Sie zusätzlich nach einem Konformitätsbericht |
Unsere Empfehlung: Machen Sie den ersten Durchgang in der Demo, um offensichtlich ungeeignete Themes auszusortieren. Den zweiten Durchgang machen Sie mit der Testversion in Ihrem Shop, denn erst mit Ihren Produktbildern, Variantenzahlen und Farben sehen Sie die Barrieren, die Ihre Kunden treffen werden.
Checkliste: ein Shopify-Theme in der Demo selbst prüfen
Sie brauchen nur einen Desktop-Browser (wir nennen die Schritte für Chrome), Ihr Smartphone und die Tastatur. Die Spalte „Bestanden, wenn“ ist unsere Prüfregel; die Spalte „Maßstab“ nennt das Kriterium, auf das sie sich stützt.
Vorbereitung
- Öffnen Sie Startseite, eine Kollektionsseite und eine Produktseite mit Varianten (Größe oder Farbe) jeweils in einem eigenen Tab.
- Legen Sie die Maus beiseite. Sie bedienen nur mit Tab (vorwärts), Umschalt + Tab (zurück), Enter, Leertaste, den Pfeiltasten und Esc. Wie ein Tastaturtest grundsätzlich abläuft, zeigt Tastaturtest in 10 Minuten.
- Notieren Sie jeden Fehler mit Seite und Stelle. Am Ende zählen Sie, was ein K.o. ist und was sich per Einstellung beheben lässt (Bewertung im nächsten Abschnitt).
Tastatur und Fokus
| Nr. | Prüfschritt | Bestanden, wenn | Maßstab |
|---|---|---|---|
| 1 | Seite laden, einmal Tab drücken | Ein Link „Zum Inhalt springen“ (oder ähnlich) erscheint sichtbar und springt mit Enter am Kopfbereich vorbei | shopify.dev Best Practices, WCAG 2.4.1 |
| 2 | Mit Tab durch die ganze Startseite gehen | Sie sehen an jeder Stelle, wo der Fokus ist: Rahmen, Unterstrich oder Farbwechsel, nie „unsichtbar“ | WCAG 2.4.7 |
| 3 | Dabei auf die Reihenfolge achten | Der Fokus läuft von oben nach unten und von links nach rechts, ohne Sprünge quer über die Seite | Theme Store Requirements, WCAG 2.4.3 |
| 4 | Bis zum Seitenende tabben, dann zurück | Der fokussierte Punkt wird nie ganz von einem klebenden Kopfbereich, Cookie-Banner oder Chat-Knopf verdeckt | WCAG 2.4.11 |
| 5 | Hauptmenü: Menüpunkt mit Untermenü fokussieren, Enter oder Leertaste | Das Untermenü öffnet sich, Tab führt in die Unterpunkte, Esc schließt es und der Fokus steht wieder auf dem Menüpunkt | shopify.dev Best Practices |
| 6 | Mega-Menü und Inhalte, die nur bei Mausberührung erscheinen | Alles, was per Maus auftaucht, erreichen Sie auch per Tastatur | shopify.dev Best Practices, WCAG 2.1.1 |
| 7 | Browserfenster schmal ziehen, Handy-Menü (Hamburger) per Tastatur öffnen | Menü öffnet mit Enter, Fokus springt hinein, Esc oder ein beschrifteter Schließen-Knopf schließt es, Fokus kehrt zum Menü-Knopf zurück | shopify.dev Best Practices |
| 8 | Suche öffnen, Begriff eingeben, Vorschläge mit Pfeiltasten wählen | Suchfeld ist erreichbar, Vorschläge sind per Tastatur wählbar, Esc schließt die Suche | WCAG 2.1.1 |
| 9 | Kollektionsseite: Filter und Sortierung bedienen | Jeder Filter lässt sich per Tastatur setzen und wieder entfernen; die Filterleiste auf dem Handy-Layout schließt mit Esc | WCAG 2.1.1 |
Produktseite: Galerie, Varianten, Warenkorb
| Nr. | Prüfschritt | Bestanden, wenn | Maßstab |
|---|---|---|---|
| 10 | Produktgalerie: Pfeile oder Vorschaubilder per Tab erreichen und mit Enter wechseln | Jedes Bild ist ohne Wischen erreichbar; die Pfeile sind Knöpfe, die Sie mit Enter auslösen | shopify.dev Best Practices (Funktionen mit komplexen Gesten auch per einfachem Tippen oder Klick), WCAG 2.1.1 |
| 11 | Bild-Zoom oder Vollbild öffnen | Öffnet per Enter, Fokus liegt im Vollbild, Esc schließt und der Fokus kehrt zum Bild zurück | shopify.dev Best Practices (Dialoge) |
| 12 | Varianten (Größe, Farbe) per Tastatur wählen | Jede Variante ist erreichbar und wählbar, die gewählte ist auch ohne Farbe erkennbar (Rahmen, Haken, Text) | WCAG 2.1.1, WCAG 1.4.1 |
| 13 | Ausverkaufte Variante ansehen | „Ausverkauft“ steht als Text da oder ist durchgestrichen, nicht nur ausgegraut | WCAG 1.4.1 |
| 14 | Farbpunkte (Swatches) mit dem Finger auf dem Handy treffen | Jeder Punkt ist mindestens 24 mal 24 CSS-Pixel groß oder hat genug Abstand | Theme Store Requirements, WCAG 2.5.8 |
| 15 | Variante mit anderem Preis wählen, dabei einen Screenreader laufen lassen (NVDA oder VoiceOver) | Der neue Preis oder die neue Verfügbarkeit wird angesagt | shopify.dev Best Practices, WCAG 4.1.3 |
| 16 | Menge mit Plus und Minus ändern | Beide Knöpfe sind per Tastatur bedienbar und groß genug zum Tippen | WCAG 2.1.1, WCAG 2.5.8 |
| 17 | „In den Warenkorb“ mit Enter auslösen | Es gibt eine Rückmeldung, die Sie sehen und die der Screenreader ansagt; unsere Prüfregel: bei einer Warenkorb-Schublade springt der Fokus hinein | shopify.dev Best Practices |
| 18 | In der Warenkorb-Schublade tabben | Der Fokus bleibt in der Schublade, bis Sie sie schließen; Menge ändern und Entfernen sind per Tastatur möglich | shopify.dev Best Practices (Schubladen und Dialoge) |
| 19 | Schublade mit Esc schließen | Sie schließt, der Fokus steht wieder auf dem Knopf, der sie geöffnet hat | shopify.dev Best Practices |
| 20 | Schnellansicht (Quick view) auf der Kollektionsseite, falls vorhanden | Gleiche Regeln wie bei der Schublade: Fokus hinein, Esc schließt, Fokus zurück | shopify.dev Best Practices |
Wie Sie Schritt 15 ohne Vorkenntnisse mit NVDA oder VoiceOver machen, zeigt Screenreader-Test im Onlineshop.
Kontrast, Zoom und Bewegung
| Nr. | Prüfschritt | Bestanden, wenn | Maßstab |
|---|---|---|---|
| 21 | Kontrast messen: Fließtext, Preise, Streichpreise, Sale- und „Ausverkauft“-Etiketten, Text auf Bannern, Platzhalter in Feldern | Text mindestens 4,5 : 1, großer Text 3 : 1 | WCAG 1.4.3 |
| 22 | Kontrast von Rahmen um Eingabefelder, Variantenknöpfe und Icons (Warenkorb, Suche, Konto) | mindestens 3 : 1 zum Hintergrund | WCAG 1.4.11, Theme Store Requirements |
| 23 | Links im Fließtext (etwa in der Produktbeschreibung) | Sie sind auch ohne Farbe erkennbar, meist durch Unterstreichung | WCAG 1.4.1 |
| 24 | Browserfenster auf normale Breite, Zoom auf 200 % (Windows: Strg und +, Chrome-Hilfe) | Kein Text ist abgeschnitten oder überlappt, alle Knöpfe sind erreichbar, das Menü funktioniert | WCAG 1.4.4 |
| 25 | Browserfenster etwa 1280 Pixel breit, Zoom auf 400 % | Die Seite ordnet sich in eine Spalte, Sie müssen nur senkrecht scrollen, Produktbild, Preis, Varianten und „In den Warenkorb“ bleiben nutzbar | WCAG 1.4.10 (320 CSS-Pixel entsprechen laut W3C 1280 Pixel bei 400 % Zoom) |
| 26 | Bei 400 % Zoom: Warenkorb-Schublade und Cookie-Banner öffnen | Beide passen auf den Bildschirm, ihr Schließen-Knopf ist sichtbar | WCAG 1.4.10 |
| 27 | Auf dem Smartphone mit zwei Fingern in die Seite zoomen | Zoomen ist möglich | shopify.dev Best Practices |
| 28 | Slideshow oder Laufschrift auf der Startseite | Läuft sie von selbst länger als fünf Sekunden, gibt es einen Pause- oder Stopp-Knopf | WCAG 2.2.2 |
| 29 | Videos | Sie starten nicht von selbst; falls doch, ohne Ton | shopify.dev Best Practices |
| 30 | Reduzierte Bewegung simulieren: Entwicklertools öffnen, Strg + Umschalt + P, „rendering“ tippen, Show Rendering wählen, unter „Emulate CSS media feature prefers-reduced-motion“ den Wert „prefers-reduced-motion: reduce“ wählen, Seite neu laden und scrollen (Chrome-Doku: Rendering, Chrome-Doku: CSS-Medienmerkmale) | Einblend-, Zoom- und Seitenübergangseffekte entfallen oder werden deutlich ruhiger | WCAG 2.3.3 (Stufe AAA, unsere Empfehlung als Qualitätszeichen) |
Zum Abschluss lassen Sie auf Startseite, Kollektions- und Produktseite einen automatischen Test laufen, etwa mit axe DevTools oder Lighthouse. Er findet fehlende Beschriftungen und Kontrastfehler, die Sie mit dem Auge übersehen. Er ersetzt die Schritte oben nicht.
Ergebnis bewerten: K.o. oder einstellbar?
Nicht jeder Fehler spricht gegen ein Theme. Die Frage ist, wer ihn beheben kann. Die Tabelle ist unsere Einordnung.
| Fehler aus der Prüfung | Einordnung | Warum |
|---|---|---|
| Menü, Galerie, Varianten oder Warenkorb-Schublade nicht per Tastatur bedienbar (Schritte 5 bis 12, 16 bis 19) | K.o. | Das steckt im Code des Themes. Ohne Entwickler beheben Sie es nicht, und in der Testphase können Sie den Code laut Shopify nicht einmal bearbeiten |
| Fokus unsichtbar (Schritt 2) | K.o., außer der Anbieter sagt eine Behebung zu | Ebenfalls Code. Ein Fokusrahmen per eigenem CSS ist möglich, muss aber bei jedem Theme-Update erhalten bleiben |
| Seite bei 400 % nicht nutzbar (Schritte 25, 26) | K.o. | Das Layout ist im Theme festgelegt |
| Preisänderung wird nicht angesagt (Schritt 15) | Anbieter fragen | Eine Kleinigkeit im Code, die der Anbieter mit einem Update beheben kann |
| Slideshow ohne Pause-Knopf (Schritt 28) | einstellbar, wenn sich das automatische Abspielen abschalten lässt | Prüfen Sie in den Einstellungen des Abschnitts, ob sich das automatische Abspielen abschalten lässt |
| Kontrast zu schwach (Schritte 21, 22) | einstellbar | Farben setzen Sie selbst, siehe nächster Abschnitt |
| Schrift zu klein, Animationen zu unruhig | einstellbar | Theme-Einstellungen, siehe nächster Abschnitt |
| Fehlende Alt-Texte in der Demo | kein Theme-Fehler | Die Texte tragen Sie selbst ein. Ob das Theme das alt-Attribut ausgibt, prüfen Sie in Ihrer Testversion mit einem Bild, dem Sie einen Alt-Text gegeben haben |
Unsere Empfehlung: Schreiben Sie dem Theme-Anbieter vor dem Kauf. Fragen Sie nach einem Konformitätsbericht (oft „VPAT“ oder „ACR“ genannt), nach der geprüften WCAG-Version und danach, ob die Punkte aus Ihrer Prüfung bekannt sind und bis wann sie behoben werden. Legen Sie Frage und Antwort ab. Ein Anbieter, der dazu nichts sagen kann, ist ein Warnzeichen.
Theme-Einstellungen, die Barrieren erzeugen
Auch ein gutes Theme können Sie im Theme-Editor wieder verschlechtern. Die Namen der Einstellungen unten stammen aus den deutschen Sprachdateien der Themes im offiziellen Repository (Dawn, Horizon); in Ihrem Admin können sie je nach Version leicht anders lauten. Sie finden sie im Theme-Editor in den Theme-Einstellungen (Online Store, Edit theme, Symbol Theme settings; Shopify Help Center).
Farben
- Farbschemata einzeln prüfen. Jeder Abschnitt kann ein anderes Schema nutzen. Messen Sie in jedem Schema Text, Buttontext, Rahmen und Links. Den Weg zu den Farbschemata beschreibt der Shopify-Überblick.
- Etiketten haben eigene Farben. Horizon hat unter Badges eigene Felder für „Sale-Badge-Hintergrund“, „Sale-Badge-Text“, „Ausverkauft-Badge-Hintergrund“ und „Ausverkauft-Badge-Text“ (Horizon, Theme-Einstellungen). Weiße Schrift auf hellem Rot oder Grau auf Hellgrau fällt hier oft durch. Ziel: 4,5 : 1 (WCAG 1.4.3).
- Text auf Bildern. Banner mit Text über einem Foto messen Sie an der hellsten Stelle hinter dem Text. Hilft das nicht, nutzen Sie eine Abdunklung des Bildes, falls der Abschnitt sie anbietet, oder setzen Sie den Text neben das Bild.
Schriftgrößen
- Horizon: Unter Typografie gibt es für den Absatz eine Größe mit der Auswahl 10, 12, 14, 16 und 18 px; voreingestellt sind 14 px (Horizon, Theme-Einstellungen). Das Shopify Help Center nennt als Mindestgröße für Fließtext den Gegenwert von 16 px und rät zu mehr, wenn Ihre Schrift bei 16 px kleiner wirkt als andere (Shopify Help Center). Unsere Empfehlung: In Horizon den Absatz auf 16 oder 18 px stellen.
- Dawn: Unter Typografie hat Dawn für Fließtext und Überschriften je einen Regler Maßstab (100 bis 130 % und 100 bis 150 %), voreingestellt jeweils 100 % (Dawn, Theme-Einstellungen). Prüfen Sie die Größe mit Ihrer gewählten Schrift; schmale oder dünne Schriften wirken bei gleicher Pixelzahl kleiner.
- Großbuchstaben und dünne Schriftschnitte sparsam einsetzen. Horizon erlaubt für jede Überschriftenstufe und für Buttons eine eigene Schreibweise. Unsere Einschätzung: Längere Texte ganz in Großbuchstaben sind schwerer zu lesen.
Animationen
| Theme | Einstellung (deutsche Bezeichnung) | Voreinstellung | Was das Theme bei reduzierter Bewegung tut |
|---|---|---|---|
| Dawn | Animationen > „Beim Scrollen Abschnitte einblenden“ | an | Die Einblend-Animation steht im Stylesheet nur unter „prefers-reduced-motion: no-preference“, entfällt also, wenn Ihr Kunde reduzierte Bewegung eingestellt hat (Dawn base.css) |
| Dawn | Animationen > „Hover-Effekt“ (Keiner, Vertikal-Lift, 3D-Lift) | Keiner | ebenfalls nur bei „no-preference“ |
| Horizon | Animationen > „Seitenübergang“, „Übergang von Produktkarte zu Produktseite“ | an | Die Seitenübergänge stehen im Stylesheet nur unter „prefers-reduced-motion: no-preference“ und entfallen bei reduzierter Bewegung (Horizon base.css) |
| Horizon | Animationen > „Zum Warenkorb hinzufügen“ | an | Im Code von Version 4.3.0 ist dafür keine Abfrage der reduzierten Bewegung zu finden (fly-to-cart-styles.liquid); unsere Empfehlung: abschalten |
| Horizon | Animationen > „Karten-Hover-Effekt“ (Keine, Anheben, Skalieren, Zoom) | Anheben | nicht von uns ausgewertet; mit Schritt 30 der Checkliste selbst prüfen |
Quelle für Namen und Voreinstellungen: Theme-Einstellungen und deutsche Sprachdateien im Repository (Dawn, Horizon), Stand Dawn 16.0.0 und Horizon 4.3.0.
Unsere Einschätzung: Dass Dawn und die Seitenübergänge von Horizon die Bewegungseinstellung des Kunden beachten, ist gut. Die Warenkorb-Animation in Horizon tut das nicht, und ein Kauf-Theme macht es nicht automatisch; Schritt 30 zeigt es Ihnen. Effekte, die bei jeder Seite oder jedem Klick ablaufen, schalten Sie im Zweifel ab, weil sie für niemanden nötig sind.
Slideshow, Videos und Pop-ups
- Automatisches Abspielen abschalten, wo der Abschnitt es erlaubt. Shopify rät, Slideshows und Videos nicht automatisch abzuspielen, weil bewegte Inhalte bei Menschen mit Gleichgewichtsstörungen Schwindel auslösen können (Shopify Help Center).
- Warenkorb als Seite oder Schublade. Horizon lässt unter Warenkorb den Typ zwischen Seite und Drawer wählen, voreingestellt ist die Seite (Horizon, Theme-Einstellungen). Unsere Empfehlung: Wählen Sie die Schublade nur, wenn sie die Schritte 17 bis 19 bestanden hat.
- Apps zählen mit. Newsletter-Pop-ups, Bewertungen und Chat bringen eigenen Code ins Theme. Wie Sie sie einzeln abschalten und prüfen, steht im Shopify-Überblick. Ein Overlay-Widget behebt keinen Theme-Fehler.
Wann sich ein Theme-Wechsel lohnt
Die Tabelle ist unsere Einordnung. Prüfen Sie Ihr aktuelles Theme mit derselben Checkliste wie ein neues, bevor Sie entscheiden.
| Ihre Lage | Empfehlung |
|---|---|
| Aktuelles Theme besteht die Tastaturschritte, Fehler nur bei Farben, Schrift, Animationen | Bleiben und Einstellungen korrigieren |
| Einzelne Code-Fehler, Anbieter aktiv und sagt Behebung zu | Bleiben, Update abwarten, Zusage ablegen, danach nachprüfen |
| Menü, Varianten oder Warenkorb nicht per Tastatur bedienbar, Anbieter antwortet nicht oder liefert keine Updates mehr | Wechseln |
| Theme stark per Code angepasst, Updates des Anbieters lassen sich deshalb nicht einspielen | Wechseln einplanen; jede Code-Korrektur am alten Theme müssten Sie selbst pflegen |
| Altes Theme ohne Abschnitte auf allen Seiten (Online Store 2.0) und ohne Updates | Wechseln, weil Korrekturen dann fast nur über Code gehen |
| Ein Redesign steht ohnehin an | Wechseln und Barrierefreiheit als Abnahmekriterium in den Auftrag schreiben |
Rechnen Sie bei Ihrer Entscheidung mit, was eine Agentur für Code-Korrekturen am alten Theme verlangen würde.
Theme wechseln und danach prüfen
Vor dem Veröffentlichen
- Neues Theme als Entwurf anlegen: kostenlos über Add, kostenpflichtig über Try theme (siehe oben). Laut Shopify können Shops im Basic-, Grow- und Advanced-Tarif bis zu 20 Themes in der Bibliothek haben (Shopify Help Center).
- Einstellungen setzen: Farben, Schriftgrößen, Animationen und Slideshows nach dem Abschnitt oben.
- Bilder in Abschnitten neu beschriften. Nach unserer Lesart hängen Alt-Texte von Produktbildern am Produkt im Admin, Alt-Texte von Bildern in Theme-Abschnitten (Banner, Bild mit Text) dagegen am Abschnitt des jeweiligen Themes. Bauen Sie die Startseite im neuen Theme neu auf, tragen Sie diese Alt-Texte deshalb neu ein und prüfen Sie es nach.
- Apps im neuen Theme einbinden und jede einzeln prüfen.
- Die ganze Checkliste mit Ihren eigenen Inhalten auf dem Entwurf durchgehen, über Preview.
- Theme kaufen, falls es ein Testtheme ist. Laut Shopify müssen Sie ein Theme kaufen, bevor Sie es veröffentlichen können (Shopify Help Center).
Veröffentlichen
Laut Shopify Help Center: im Admin Online Store, im Bereich Draft themes beim neuen Theme Publish klicken. Ihr bisher veröffentlichtes Theme wandert laut derselben Seite in den Bereich Draft themes, und keine Ihrer Theme-Änderungen geht verloren. Sie können also zurück.
Nach dem Veröffentlichen
- Kurzprüfung am Live-Shop: Schritte 1, 2, 5, 7, 12, 17 bis 19, 24 und 25 noch einmal, jetzt mit Cookie-Banner und allen Apps.
- Kaufstrecke bis vor die Zahlung einmal nur mit der Tastatur durchspielen.
- Automatischen Test auf Startseite, Kollektion, Produkt und Warenkorb wiederholen und mit dem Ergebnis des alten Themes vergleichen.
- Footer-Link zur Barrierefreiheitserklärung prüfen; ein neues Theme hat oft ein anderes Footer-Menü. Den Weg zeigt Barrierefreiheitserklärung in Shopify einbinden. Haben sich bekannte Barrieren geändert, passen Sie den Text der Erklärung an.
- Nach jedem Theme-Update die Kurzprüfung wiederholen.
Ihr nächster Schritt
Dieser Ratgeber ist keine Rechtsberatung.
Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Als automatische Prüfung findet er nur einen Teil der Barrieren; den Tastaturtest, die Zoomprüfung und den Screenreader-Test aus der Checkliste oben machen Sie selbst.
Stand: 29.10.2026. Quellen gelesen am 29.10.2026.