KI-Bilder in Shopware kennzeichnen

Script-Tag einbinden

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

Für eigene Skripte beschreibt die Entwicklerdokumentation von Shopware den Weg über ein Plugin. Es erweitert die Vorlage storefront/layout/meta.html.twig, die den Seitenkopf enthält, und hängt das Script-Tag an den Block layout_head_javascript_hmr_mode an:

{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
{% block layout_head_javascript_hmr_mode %}
    {{ parent() }}
    <script src="https://www.ai-label.app/widget.js" defer></script>
{% endblock %}

Die Datei liegt im Plugin unter src/Resources/views/storefront/layout/meta.html.twig. Wichtig ist {{ parent() }}: Ohne diese Zeile fehlen die Skripte von Shopware selbst. Ohne Entwicklung geht es auch über eine Erweiterung für eigene Skripte aus dem Shopware Store. Leeren Sie danach den Shop-Cache und öffnen Sie eine Produktseite mit markiertem Bild. Das Label erscheint oben rechts auf dem Bild.

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 Shopware ist die Medienverwaltung unter Inhalte > Medien. Dort ändern Sie zu jeder Datei den Namen, den Alt-Text und den Meta-Titel. Ergänzen Sie den Alt-Text um „(KI-generiert)“ oder „(Mit KI verändert)“, oder benennen Sie die Datei mit --ai um. Produktbilder verweisen auf diese Dateien, die Markierung wirkt also in der Regel auf Produktseite und Listing zugleich.

Das Attribut data-ai-label lohnt sich nur in eigenen Twig-Vorlagen, etwa für ein Bannerbild, das fest im Theme steht.

Stolpersteine

• HTML-Sanitizer: Shopware entfernt unsicheren HTML-Code aus dem Editor. Ein Script-Tag in einem Textelement einer Erlebniswelt oder in einer Produktbeschreibung ist deshalb kein verlässlicher Weg. Schalten Sie den Sanitizer dafür nicht ab: Er schützt vor eingeschleustem Code.
• Cache: Nach einer Änderung an Vorlagen zeigt der Shop oft noch die alte Fassung. Leeren Sie den Cache, bevor Sie prüfen.
• Vorschaubilder: Shopware erzeugt Bilder in mehreren Größen. Prüfen Sie im Seitenquelltext, ob --ai in der ausgelieferten Bildadresse steht.
• Zoom und Galerie: Vergrößerte Ansichten sind oft eigene Bildelemente. Prüfen Sie, ob das Label dort ebenfalls erscheint.
• Cookie-Banner: Laden Sie das Widget nicht erst nach einer Einwilligung. Es setzt keine Cookies, und ein Label, das erst nach Zustimmung erscheint, fehlt beim ersten Blick auf das Bild.

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.
• Warenkorb und Bestellabschluss: Ob das Skript dort läuft, hängt vom Theme ab. 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 Shopware 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.