Labelling AI images in OXID eShop

Add the script tag

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

The OXID developer documentation shows how a module extends a block of the active theme. For the APEX theme, the extension lives in the module under views/twig/extensions/themes/apex/, in the same path as the original template. It inherits from the template with {% extends %} and overrides a block of the same name:

{% extends 'layout/base.html.twig' %}
{% block BLOCKNAME %}
    {{ parent() }}
    <script src="https://www.ai-label.app/widget.js" defer></script>
{% endblock %}

Template and block name are placeholders here: choose a block that is output in the head or footer of every page. The names are in the APEX theme templates on GitHub. {{ parent() }} keeps the original content. Then reactivate the module and open a product page with a marked image.

Mark images

The widget only labels images you have marked. Whether an image needs a label is your call, for example with the labelling check. Three ways, which can be combined:

• Attribute on the image: data-ai-label="generated" for images created entirely with AI, data-ai-label="modified" for photos changed 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)”. The addition also helps screen readers.

The simplest way in OXID is the file name. In the admin area, open the product details and switch to the Pictures tab. Rename the file before uploading, for example vase--ai.jpg. The system automatically creates a thumbnail and an icon from it. Check in the page source that --ai appears in the delivered image address.

Whether and where you can maintain custom alt text for product images depends on theme and version. If you can, the suffix “(AI-generated)” at the end also works. In your own templates, set the data-ai-label attribute directly.

Pitfalls

• HTML sanitizer: OXID 7.5 offers an HTML sanitizer, disabled by default. When enabled, it removes <script> and event handlers, among others. A script tag in CMS content is therefore not reliable.
• Theme update: changes made directly in the APEX theme files are lost with an update. The module stays.
• Reactivate the module: new template extensions only take effect after the module has been reactivated.
• Enlarged view: check that the label appears in the zoom view of product images.

Limits of the widget

• The widget only reaches images as <img> on pages where the script runs. Background images from the stylesheet and images under 48 pixels (adjustable with data-min) get no label.
• Cart and checkout: check yourself whether the block you chose is output there.
• It cannot reach order confirmation emails. Where you show an image outside your website, use a copy with the label burned in from Label an AI image.
• Privacy: the script loads from ai-label.app, so our host sees the IP address as with any request. It sets no cookies. Mention it in your privacy policy.

Native app

A dedicated OXID eShop app is planned. There is no date yet. Until then, the widget works without installing anything in the system. If you like, we will write to you once at launch.

Not legal advice. This content explains the law based on primary sources; it does not replace an assessment of your individual case.