KI-Bilder in BigCommerce kennzeichnen

Script-Tag einbinden

<script src="https://www.ai-label.app/widget.js" defer></script>

Eigene Skripte verwaltet BigCommerce im Script Manager, den Sie in den Einstellungen Ihres Storefront-Kanals finden. Legen Sie dort ein neues Skript an:

• Ort: Kopf- oder Fußbereich der Seite. Bei Stencil-Themes landet das Skript an der Stelle head.scripts bzw. footer.scripts.
• Seiten: die Storefront-Seiten oder alle Seiten. „Storefront“ umfasst die meisten Seiten außer Checkout, Kundenkonto und Login.
• Inhalt: das Script-Tag von oben.
• Kategorie: eine Kategorie, die ohne Einwilligung geladen wird. Ein Label, das erst nach Zustimmung im Cookie-Banner erscheint, fehlt beim ersten Blick auf das Bild.

Speichern Sie und öffnen Sie eine Produktseite mit markiertem Bild. Für Headless-Storefronts mit Catalyst gelten Besonderheiten: Skripte laden verzögert, und bei Seitenwechseln ohne Neuladen läuft ein Skript nicht neu an. Das Widget beobachtet neue Bilder auf der Seite und kommt damit zurecht; prüfen Sie es trotzdem nach einem Seitenwechsel.

Bilder markieren

Das Widget kennzeichnet nur Bilder, die Sie markiert haben. Ob ein Bild ein Label braucht, entscheiden Sie, zum Beispiel mit dem Pflicht-Check. Drei Wege, die sich kombinieren lassen:

• Attribut am Bild: data-ai-label="generated" für vollständig mit KI erzeugte Bilder, data-ai-label="modified" für Fotos, die mit KI verändert wurden.
• Dateiname mit Kennung vor der Endung: vase--ai.jpg oder vase--ai-mod.jpg.
• Alt-Text, der mit „(KI-generiert)“ oder „(Mit KI verändert)“ endet. Der Zusatz hilft zugleich Screenreadern.

Am einfachsten in BigCommerce ist der Alt-Text des Produktbilds. Im Produkt fügen Sie Bilder im Bereich für Bilder und Videos hinzu und pflegen zu jedem eine Beschreibung, die das Theme als Alternativtext ausgibt. Ergänzen Sie „(KI-generiert)“ oder „(Mit KI verändert)“ am Ende.

Der Dateiname mit --ai ist möglich, wenn er in der ausgelieferten Bildadresse erhalten bleibt. Prüfen Sie das im Seitenquelltext. Das Attribut data-ai-label setzen Sie in eigenen Theme-Vorlagen.

Stolpersteine

• Blueprint-Themes: Laut BigCommerce geben Blueprint-Stores Skripte aus dem Script Manager nicht aus.
• Checkout: Skripte für Checkout und Bestellbestätigung erscheinen nur mit dem Optimized One-Page Checkout.
• Einwilligung: Prüfen Sie die Kategorie des Skripts, wenn Ihr Shop ein Cookie-Banner nutzt.
• Zoom: Prüfen Sie, ob das Label in der vergrößerten Ansicht der Produktbilder erscheint.

Grenzen des Widgets

• Das Widget erreicht nur Bilder als <img> auf Seiten, auf denen das Skript läuft. Hintergrundbilder aus dem Stylesheet und Bilder unter 48 Pixeln (einstellbar mit data-min) bekommen kein Label.
• Checkout und Bestellbestätigung: Dort laufen Skripte nur mit dem Optimized One-Page Checkout. Prüfen Sie beide Seiten selbst.
• Bestellbestätigungen per E-Mail erreicht es nicht. Wo Sie ein Bild außerhalb der Website zeigen, hilft eine Kopie mit eingebranntem Label aus KI-Bild kennzeichnen.
• Datenschutz: Das Skript wird von ai-label.app geladen. Dabei sieht unser Hoster die IP-Adresse wie bei jedem Abruf. Es setzt keine Cookies. Erwähnen Sie die Einbindung in Ihrer Datenschutzerklärung.

Native App

Eine eigene App für BigCommerce ist geplant. Einen Termin gibt es noch nicht. Bis dahin funktioniert das Widget ohne Installation im System. Wenn Sie möchten, schreiben wir Ihnen einmal zum Start.

Keine Rechtsberatung. Die Inhalte erklären die Rechtslage auf Grundlage der Primärquellen, sie ersetzen keine Prüfung im Einzelfall.