Labelling AI images in Shopware

Add the script tag

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

For custom scripts, the Shopware developer documentation describes a plugin. It extends the template storefront/layout/meta.html.twig, which holds the page head, and appends the script tag to the block layout_head_javascript_hmr_mode:

{% 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 %}

The file goes into the plugin at src/Resources/views/storefront/layout/meta.html.twig. Without {{ parent() }}, Shopware's own scripts are missing. Without development, an extension for custom scripts from the Shopware Store does the same. Then clear the shop cache and open a product page with a marked image. The label appears in the top right corner of the image.

Mark images

Which images need a label is your decision, for example with the labelling check. The widget only labels marked images, in three ways that can be combined:

• Attribute on the image: data-ai-label="generated" for images created entirely with AI, data-ai-label="modified" for photos edited with AI.
• File name with a marker before the extension: vase--ai.jpg or vase--ai-mod.jpg.
• Alt text ending in “(AI-generated)” or “(AI-modified)”.

In Shopware, mark images in the media manager under Content > Media, where you can change the name, alt text and meta title of every file. Product images point to these files, so the marking usually applies to the product page and the listing at once.

The data-ai-label attribute is only worth it in your own Twig templates, for example for a banner image in the theme.

Pitfalls

• HTML sanitizer: Shopware removes unsafe HTML from the editor, so a script tag in a text element of a shopping experience or in a product description is not reliable. Leave the sanitizer on; it protects against injected code.
• Thumbnails: Shopware generates images in several sizes. Check in the page source that --ai is part of the delivered image address.
• Zoom and gallery: enlarged views are often separate image elements. Check that the label appears there too.
• Cookie banner: do not load the widget only after consent, or the label is missing at the first view of the image.

Limits of the widget

• The widget only reaches <img> elements on pages with the script. Background images from the stylesheet and images under 48 pixels (adjustable with data-min) stay unlabelled.
• Whether the script runs in cart and checkout depends on the theme. Check both pages.
• It cannot reach emails such as order confirmations. For images outside your website, create a copy with the label burned in using Label an AI image.
• Privacy: when the script loads from ai-label.app, our host sees the IP address, as with any request. The script sets no cookies. Mention it in your privacy policy.

Native app

A dedicated Shopware app is planned. There is no date yet.