Design
Where should AI labels appear on Shopify product pages?
AI labels should appear directly on or immediately next to the relevant Shopify product photo, clearly visible at first exposure. The EU Code of Practice recommends the top-right corner of the image when nothing else conflicts. Merchants can customize colors, typography, and size — as long as the label remains clear, accessible, and distinguishable.
The EU Code of Practice on Transparency of AI-Generated Content (Section 2) sets the bar that disclosures must be clear, distinguishable, accessible, and visible at the time of first exposure. On a Shopify product page, that translates to a very simple UX principle: put the label where the shopper looks at the image — not in a tab, not on hover, not in the footer.
The Code also leaves room for brand style. Labels can vary in size, color, contrast, and typography as long as they remain readable and recognisable. EU user-testing found that variants with clear textual labels (e.g. "modified" or "generated") performed significantly better than icon-only badges.
Recommended placement, in priority order
- Top-right corner of the product photo — the EU CoP default when no other overlay (sale badge, wishlist icon) conflicts.
- Top-left corner — use when top-right is occupied by badges or gallery controls.
- Bottom-left or bottom-right — acceptable when the top of the image is visually busy.
- Immediately below the image — use when overlay contrast would be poor on every corner of the photo.
- On the product card (collection page) — optional but recommended for upfront transparency.
Styling you can customize
- Text and background colors (subject to contrast rules below).
- Font size within minimum readable bounds (12px floor on mobile).
- Font family from an approved list.
- Border radius and internal padding.
- Auto-contrast mode that flips light/dark based on the image.
- Optional EU-style templates:
AI + GENERATED,AI + MODIFIED.
Styling guardrails (non-negotiable)
- Text is required — icon-only is not sufficient.
- Contrast must meet WCAG 2.1 AA (4.5:1 minimum for normal text).
- Label must be visible without hover, click, or scroll.
- Label must be reachable and announced by screen readers.
- Label must be present on both desktop and mobile.
Placement patterns to avoid
- Burying the disclosure inside an accordion tab (e.g. "Product details").
- Showing the label only after hover, click, or long-press.
- Low-contrast badges on busy or high-frequency images.
- Covering important product features (logos, seams, hardware).
- Icon-only labels — even a well-known icon is not a disclosure on its own.
- A global page-level label when only some images in the gallery are AI.
Mobile-specific checks
Most Shopify traffic converts on mobile. Overlays that look fine on desktop routinely collide with:
- Carousel pagination dots at the bottom of the image.
- Wishlist / heart icons at the top-right.
- Zoom controls at the bottom-right.
- Sale/percentage badges at the top-left.
Preview each label on a real mobile device before rolling out. The full step-by-step review flow is on the Shopify AI Act checklist.
PDP vs collection page
The product detail page is where shoppers make the buying decision, so PDP labeling is the priority. Adding a small AI indicator on the collection-page product card is optional but signals transparency upfront — and helps shoppers who prefer real photos filter their choices before ever landing on the PDP.
Wording, not just placement
Placement is half the job. Wording is the other half — vague labels like "enhanced" or "virtual" don't disclose anything. See Examples of AI labels for Shopify product photos for tested label copy, and AI-generated vs AI-altered product photos for choosing between the two main labels.
EU AI Label gives merchants placement presets, contrast auto-checks, and mobile previews for Shopify product photos. See pricing, partners for theme integration help, or install it on Shopify.
FAQ
Frequently asked questions
Is a hover tooltip enough for AI disclosure?+
No. The EU Code of Practice is explicit that disclosures should be visible at first exposure. A hover or click that reveals the label doesn't satisfy that — especially on mobile, where hover doesn't exist.
Can I put the AI label below the image instead of on top?+
Yes, as long as it's close, immediately visible, high-contrast, and readable. An overlay is often more noticeable, but a text label directly under the image works when contrast on the photo would be poor.
What about mobile placement?+
Test mobile separately from desktop. Labels must remain readable, not collide with carousel dots, wishlist hearts, or discount badges, and stay legible at small viewport sizes.
Does the label need to be on every image in the gallery?+
Label each image that is AI-generated or materially AI-altered. Non-AI images in the same gallery do not need a label — mixed galleries should not have a global label because that misleads the shopper.
Can I use brand colors on the label?+
Yes. The EU Code of Practice allows customization of colors, typography, and size as long as the label remains clear, readable, and distinguishable. WCAG 2.1 AA contrast (4.5:1) is the operational floor.
Should the label appear on collection pages, or only on the PDP?+
The PDP is where shoppers make the buying decision, so it's the priority. A collection-level indicator on the product card is a nice-to-have and improves upfront transparency.
Add visible AI labels to your Shopify product photos
EU AI Label launches August 1, 2026 — right before the EU AI Act enforcement deadline. Join early access to be among the first 20 founding Shopify merchants.
Need agency or theme integration help? See partners.