Labelling AI images in BigCommerce

Add the script tag

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

BigCommerce manages custom scripts in Script Manager in your storefront channel settings. Create a new script there:

• Location: head or footer. On Stencil themes the script is placed at head.scripts or footer.scripts.
• Pages: storefront pages or all pages. “Storefront” covers most pages except checkout, account and login.
• Content: the script tag above.
• Category: one that loads without consent. Otherwise the label only appears after the visitor accepts the cookie banner and is missing at the first view 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 BigCommerce, mark images through the alt text of the product image. In the product you add images in the images and videos section and give each one a description, which the theme outputs as alternative text.

A file name with --ai works if it survives in the delivered image address. The page source shows whether it does. Use the data-ai-label attribute in your own theme templates.

Pitfalls

• Blueprint themes: according to BigCommerce, Blueprint stores do not render Script Manager scripts.
• Catalyst: on headless storefronts with Catalyst, scripts load deferred, and page changes without a reload do not restart a script. The widget watches for new images on the page and copes with this. Still check after a page change.
• Zoom: check that the label appears in the enlarged view.

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.
• In checkout and order confirmation, scripts only run with Optimized One-Page Checkout.
• 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 BigCommerce app is planned. There is no date yet.