Anleitung

Badge einbinden

Sie haben die Prüfung bestanden (Note A, B oder C) und Ihr Badge registriert? Zeigen Sie Ihren Kunden, dass Ihr Shop nach BFSG geprüft wurde.

Was Sie benötigen

  • Einen abgeschlossenen Scan mit Note A, B oder C
  • Ein registriertes Badge (auf der Ergebnisseite unter „Badge registrieren“)
  • Ihre Badge-ID — eine 12-stellige Kennung, z. B. a1b2c3d4e5f6
  • Zugang zum Shopify Admin-Bereich Ihres Shops

Methode 1: HTML-Snippet (empfohlen)

Die einfachste Variante. Kopieren Sie den Code und fügen Sie ihn in Ihren Shop ein.

1

Badge-Code kopieren

Ersetzen Sie BADGE_ID durch Ihre 12-stellige Badge-ID:

HTML 
<a href="https://barrierefreier-shop.de/verifizierung/BADGE_ID"
   target="_blank"
   rel="noopener"
   title="BFSG-Konformität verifizieren">
  <img src="https://barrierefreier-shop.de/api/badge/BADGE_ID.svg"
       alt="Geprüft nach BFSG"
       width="200"
       height="60" />
</a>
2

Shopify Admin öffnen

Gehen Sie zu Online-Shop → Themes → Anpassen (oder direkt: mein-shop.myshopify.com/admin/themes/current/editor).

3

Footer-Bereich auswählen

Scrollen Sie im Theme Editor nach unten zum Footer-Bereich. Das Badge gehört typischerweise in den Footer neben Impressum und Datenschutz — dort erwarten Kunden Vertrauenssignale wie Zahlungssymbole und Gütesiegel.

4

Custom HTML Block einfügen

Klicken Sie auf „Block hinzufügen“ (oder „Add block“) und wählen Sie „Benutzerdefiniertes HTML“ (Custom HTML / Custom Liquid). Fügen Sie den kopierten Code ein und speichern Sie.

5

Vorschau prüfen

Das Badge sollte sofort sichtbar sein: ein 200×60 Pixel großes Siegel in Navy mit Ihrer Note. Klicken Sie darauf, um die Verifizierungsseite zu testen.

Methode 2: Script-Tag

Noch einfacher — eine Zeile Code. Das Script lädt das Badge automatisch und prüft die Gültigkeit.

HTML 
<script src="https://barrierefreier-shop.de/badge/verify.js"
        data-badge-id="BADGE_ID"
        defer></script>

So funktioniert es

  • Das Script (<1 KB) lädt asynchron und blockiert Ihren Shop nicht
  • Es erzeugt automatisch einen Link mit Badge-Bild an der Stelle, an der das Script eingebunden ist
  • Klick auf das Badge führt zur Verifizierungsseite auf barrierefreier-shop.de
  • Keine Cookies, kein Tracking, keine externen Abhängigkeiten außer dem SVG-Bild

Einbindung im Shopify Theme Editor: Genau wie bei Methode 1 — Custom HTML Block im Footer, Script-Tag einfügen, speichern.

Methode 3: Liquid-Template (für Entwickler)

Wenn Sie direkt am Shopify-Theme-Code arbeiten, können Sie das Badge in Ihr Liquid-Template einbinden.

Liquid (footer.liquid oder theme.liquid) 
{%- comment -%} BFSG Badge {%- endcomment -%}
<div class="bfsg-badge" style="margin: 1rem 0;">
  <a href="https://barrierefreier-shop.de/verifizierung/BADGE_ID"
     target="_blank"
     rel="noopener"
     title="BFSG-Konformität verifizieren">
    <img src="https://barrierefreier-shop.de/api/badge/BADGE_ID.svg"
         alt="Geprüft nach BFSG"
         width="200"
         height="60"
         loading="lazy" />
  </a>
</div>

Einfügeort: sections/footer.liquid oder am Ende von layout/theme.liquid, vor dem schließenden </body>-Tag.

Wo platzieren?

Das Badge funktioniert überall, aber diese Positionen haben sich bewährt:

Empfohlen: Footer

Neben Impressum, Datenschutz und Zahlungssymbolen. Hier erwarten Besucher Vertrauenssignale. Das ist der Standard-Platzierungsort für Gütesiegel in deutschen Online-Shops.

Alternative: Sidebar oder „Über uns“

Auf einer eigenen Seite zur Barrierefreiheit oder in der Sidebar, zusammen mit der Barrierefreiheitserklärung. Besonders sinnvoll, wenn Sie Ihr Engagement für Inklusion zeigen möchten.

Platzierung im Shopify Theme Editor

Im Theme Editor sehen Sie links eine Struktur Ihres Shops. Scrollen Sie nach unten bis zum Abschnitt „Footer“. Dort finden Sie typischerweise:

  • Footer-Menü — Links zu Impressum, Datenschutz, AGB
  • Newsletter — E-Mail-Anmeldeformular (falls vorhanden)
  • Zahlungssymbole — Visa, PayPal, Klarna etc.
  • Hier einfügen: Custom HTML Block — Ihr BFSG-Badge

Häufige Fragen zum Badge

Was passiert, wenn mein Badge abläuft?

Das Badge ist 30 Tage gültig. Nach Ablauf wird automatisch ein graues Badge mit dem Text „Nicht verifiziert“ angezeigt, und die Verifizierungsseite zeigt den Status „Abgelaufen“. Um das Badge zu erneuern, führen Sie einfach einen neuen Scan durch. Wenn Ihr Shop weiterhin Note A, B oder C erreicht, können Sie ein neues Badge registrieren. Die Badge-ID ändert sich dabei — aktualisieren Sie den Code in Ihrem Shop entsprechend.

Kann ich das Badge optisch anpassen?

Das Badge hat ein einheitliches Design (200×60 Pixel, Navy-Hintergrund mit Ihrer Note in der jeweiligen Farbe), um Vertrauen und Wiedererkennbarkeit zu gewährleisten. Eine individuelle Anpassung ist derzeit nicht vorgesehen. Sie können das Badge aber per CSS skalieren, z. B. style="width: 160px; height: auto;" auf dem <img>-Tag.

Was macht die Verifizierungsseite?

Wenn jemand auf das Badge klickt, öffnet sich eine Seite auf barrierefreier-shop.de, die bestätigt, dass Ihr Shop tatsächlich geprüft wurde. Dort werden Domain, Note, Score, Prüfdatum und Gültigkeitszeitraum angezeigt. Das schützt vor Missbrauch — niemand kann ein Badge fälschen, da die Verifizierung serverseitig erfolgt.

Ist das Badge ein BFSG-Zertifikat?

Nein. Es gibt kein offizielles BFSG-Zertifikat. Das Badge bestätigt, dass Ihr Shop eine automatisierte Prüfung mit axe-core und BFSG-spezifischen Checks bestanden hat. Es ist ein Vertrauenssignal für Ihre Kunden, keine rechtliche Garantie. Eine vollständige BFSG-Konformität erfordert zusätzlich manuelle Prüfungen und eine Barrierefreiheitserklärung.

Lädt das Script externe Ressourcen?

Das Script (verify.js, unter 1 KB) lädt lediglich ein SVG-Bild von barrierefreier-shop.de. Es setzt keine Cookies, verwendet keine Tracker und sammelt keine Daten Ihrer Besucher. Das SVG-Bild wird mit einem 1-Stunden-Cache-Header ausgeliefert, um die Ladezeit für wiederkehrende Besucher zu minimieren.

Funktioniert das Badge auch auf anderen Plattformen?

Ja. Der HTML-Code funktioniert auf jeder Website — WooCommerce, Magento, Wix, Squarespace oder individuellen Lösungen. Kopieren Sie einfach den Code an die gewünschte Stelle in Ihrem Template. Die Anleitung oben beschreibt den Shopify-Weg, aber das Prinzip ist überall gleich: HTML einfügen, fertig.

Noch kein Badge?

Kostenloser Quick-Check in 20 Sekunden. Bei Note A, B oder C können Sie sofort ein Badge registrieren.

Shop prüfen