Labelling AI images in JTL-Shop

Add the script tag

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

In JTL-Shop, your own changes belong in a child template, otherwise an update of the NOVA template overwrites them. The developer documentation recommends the NOVAChild template from the JTL build server: unpack it into templates/ and enter the folder name and NOVA as parent in template.xml.

The documentation loads additional scripts in the block layout-footer-js of footer.tpl. Create layout/footer.tpl in the child template and append the script tag to that block:

{extends file="{$parent_template_path}/layout/footer.tpl"}
{block name='layout-footer-js' append}
    <script src="https://www.ai-label.app/widget.js" defer></script>
{/block}

Activate the child template in the back end under Settings > Templates (German interface: Einstellungen > Templates). Then clear the “Template” option under System > Cache 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 JTL is alt text through attributes in JTL-Wawi. The attribute img_alt_1 sets custom alternative text for the first product image, img_alt_2 for the second. Add “(AI-generated)” or “(AI-modified)” to the text. You maintain attributes in the product master data on the attributes tab; then transfer the change to the shop.

The function attribute bildname sets file names for product images. It applies to all images of a product, so it only suits products whose images are all AI images. Images on pages built with the OnPage Composer are marked in the alternative text field of the image portlet.

Pitfalls

• Template cache: without clearing it under System > Cache, the old version without the script stays active.
• Activate function attributes: function attributes such as bildname must first be activated for the online shop in JTL-Wawi.
• Image position: the number in img_alt_1 refers to the image order. If you change the order, check the assignment.
• Lightbox: check that the label appears in the enlarged 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: whether the label appears there depends on how the template outputs the images and how large they are.
• 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 JTL-Shop 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.