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 ein Plugin. Es erweitert die Vorlage storefront/layout/meta.html.twig mit dem Seitenkopf 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. Ohne {{ parent() }} fehlen die Skripte von Shopware selbst. Ohne Entwicklung geht es mit einer 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

Welche Bilder ein Label brauchen, entscheiden Sie, etwa mit dem Pflicht-Check. Das Widget kennzeichnet nur markierte Bilder, auf drei kombinierbaren Wegen:

• Attribut am Bild: data-ai-label="generated" für vollständig mit KI erzeugte Bilder, data-ai-label="modified" für mit KI veränderte Fotos.
• 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.

In Shopware markieren Sie am besten in der Medienverwaltung unter Inhalte > Medien. Dort ändern Sie zu jeder Datei Namen, Alt-Text und Meta-Titel. 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 im Theme.

Shopware Admin/ Inhalte / Medien

AI

kerze.jpg

Dateiname

kerze.jpg

Meta-Titel

 

Alt-Text

Duftkerze im Glas (KI-generiert)

KI-generiert

Duftkerze im Glas24,90 €

Vase aus Steinzeug32,00 €

KI-generiert

Pilzleuchte59,00 €

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 nicht verlässlich. Lassen Sie den Sanitizer eingeschaltet, er schützt vor eingeschleustem Code.
• 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 erscheint.
• Cookie-Banner: Laden Sie das Widget nicht erst nach einer Einwilligung, sonst fehlt das Label beim ersten Blick auf das Bild.

Grenzen des Widgets

• Das Widget erreicht nur <img>-Elemente auf Seiten mit dem Skript. Hintergrundbilder aus dem Stylesheet und Bilder unter 48 Pixeln (einstellbar mit data-min) bleiben ohne Label.
• Ob das Skript in Warenkorb und Bestellabschluss läuft, hängt vom Theme ab. Prüfen Sie beide Seiten.
• E-Mails wie Bestellbestätigungen erreicht es nicht. Für Bilder außerhalb der Website erzeugen Sie mit KI-Bild kennzeichnen eine Kopie mit eingebranntem Label.
• Datenschutz: Beim Laden von ai-label.app sieht unser Hoster wie bei jedem Abruf die IP-Adresse. Cookies setzt das Skript nicht. 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.