Tutorial: Displaying AI-Generated Images in Shopify Email Templates

This tutorial explains how to display AI-generated images from the Autopictura app in Shopify's order confirmation and shipping notification emails.

Overview

When customers use the Autopictura app to generate personalized product designs, the generated image URL is stored as a line item property. This tutorial shows how to modify Shopify's email templates to display these images, giving customers a visual confirmation of their customized products.

Prerequisites

  • Access to your Shopify admin panel
  • Permission to edit email notification templates
  • Basic understanding of Liquid templating

Understanding the Data Structure

The Autopictura app stores the generated image URL as a line item property:

  • Property name: _autopictura_generated_image
  • Value format: /apps/autopictura/api/images?id=<generation-id>
  • Example: /apps/autopictura/api/images?id=019952e2-8515-71da-baf7-315c150c3ef0

What “relative path” means (plain-English)

The value stored by Autopictura is a path that starts with a slash, like:

/apps/autopictura/api/images?id=…

This is a relative path — it tells the browser “go to this location on the current website.” In normal web pages that’s fine because the browser already knows your website’s full address.

Email clients don’t know your website address by default. They need the full web address to find your image, for example:

https://yourstore.com/apps/autopictura/api/images?id=…

If you use the relative path in an email, most email clients can’t find the image and you’ll see a broken image or nothing at all.

The fix in one step

Always add your shop’s URL in front of the stored path when rendering emails:

<img src="{{ shop.url }}{{ line.properties._autopictura_generated_image }}" alt="AI Generated Design" style="max-width: 200px; height: auto; border-radius: 4px;">

This builds a full URL (absolute URL), for example:

https://yourstore.com + /apps/autopictura/api/images?id=… → https://yourstore.com/apps/autopictura/api/images?id=…

Notes:

  • {{ shop.url }} automatically uses your live storefront domain (custom domain or .myshopify.com).
  • There’s no double slash. {{ shop.url }} doesn’t end with /, and the stored path does begin with /, which is correct.
  • If you forget this step, the image will not load in most email clients.

Step 1: Modifying the Order Confirmation Email

1.1 Navigate to Email Templates

  1. Go to your Shopify admin panel
  2. Navigate to Settings → Notifications
  3. Click on Order confirmation

1.2 Locate the Line Item Display Section

Search for the section where line items are displayed. Look for patterns like:

  • {% for line in line_items %}
  • {% if line.gift_card %}
  • Where variant information is displayed

1.3 Add the Generated Image Display Code

Insert the following code after the variant information and before any gift card properties:

{% comment %} Display AI generated image if available {% endcomment %}
{% if line.properties._autopictura_generated_image %}
  <div style="margin-top: 10px;">
    <img src="{{ shop.url }}{{ line.properties._autopictura_generated_image }}" alt="AI Generated Design" style="max-width: 200px; height: auto; border-radius: 4px;">
    <p style="font-size: 12px; color: #666; margin-top: 5px;">Jouw gepersonaliseerde ontwerp</p>
  </div>
{% endif %}

1.3.1 Placement tip

In most order confirmation templates, add the snippet just before the gift card logic. Typically, place it above this line:

{% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}

1.4 Multiple Occurrences

The order confirmation template often has multiple sections where line items are displayed (regular items, bundled items, components). Add the code to all relevant sections:

  • Regular line items: line.properties._autopictura_generated_image
  • Component items: component.properties._autopictura_generated_image

Step 2: Modifying the Shipping Confirmation Email

2.1 Navigate to Shipping Notification

  1. In Shopify admin, go to Settings → Notifications
  2. Click on Shipping confirmation

2.2 Different Data Structure

Note that shipping confirmations use a different structure:

  • Instead of line, they use line.line_item
  • Properties are accessed via line.line_item.properties

2.3 Add the Display Code

Insert this modified version after the groups section:

{% comment %} Display AI generated image if available {% endcomment %}
{% if line.line_item.properties._autopictura_generated_image %}
  <div style="margin-top: 10px;">
    <img src="{{ shop.url }}{{ line.line_item.properties._autopictura_generated_image }}" alt="AI Generated Design" style="max-width: 200px; height: auto; border-radius: 4px;">
    <p style="font-size: 12px; color: #666; margin-top: 5px;">Jouw gepersonaliseerde ontwerp</p>
  </div>
{% endif %}

Step 3: Testing Your Changes

3.1 Test with a Real Order

  1. Place a test order with an AI-generated design
  2. Check that the order confirmation email displays the image
  3. When the order ships, verify the shipping confirmation also shows the image

3.2 Preview Testing

You can also test using Shopify's preview feature:

  1. In the notification template editor, click Preview
  2. Select a recent order that has the _autopictura_generated_image property
  3. Verify the image appears correctly

Customization Options

Styling the Image

You can adjust the image styling by modifying the inline CSS:

style="max-width: 200px; height: auto; border-radius: 4px;"

Options to customize:

  • max-width: Control the maximum display width
  • border-radius: Add or remove rounded corners
  • margin: Adjust spacing around the image
  • box-shadow: Add a shadow effect

Changing the Caption

To change the caption text, modify:

<p style="font-size: 12px; color: #666; margin-top: 5px;">Jouw gepersonaliseerde ontwerp</p>

For different languages:

  • English: "Your personalized design"
  • Dutch: "Jouw gepersonaliseerde ontwerp"
  • French: "Votre design personnalisé"
  • German: "Ihr personalisiertes Design"

Adding a Fallback

If you want to show something when no generated image exists:

{% if line.properties._autopictura_generated_image %}
  <!-- Show generated image -->
{% else %}
  <!-- Show default product image or message -->
{% endif %}

Troubleshooting

Image Not Displaying

  1. Check the property name: Ensure it's exactly _autopictura_generated_image
  2. Verify the shop URL: The {{ shop.url }} variable must be prepended
  3. Test the full URL: Copy the complete URL and test it in a browser
  4. Check line item properties: Use the order details API to verify the property exists

Incorrect Data Access

Remember the different structures:

  • Order confirmation: line.properties._autopictura_generated_image
  • Shipping confirmation: line.line_item.properties._autopictura_generated_image
  • Component items: component.properties._autopictura_generated_image

Email Client Compatibility

Some email clients may have restrictions:

  • Ensure images are served over HTTPS
  • Keep image sizes reasonable (200-300px width is safe)
  • Always include alt text for accessibility

Best Practices

  1. Always use absolute URLs: Prepend {{ shop.url }} to the relative path
  2. Include alt text: For accessibility and when images don't load
  3. Keep images reasonably sized: 200-300px width works well in emails
  4. Test across email clients: Gmail, Outlook, Apple Mail, etc.
  5. Consider mobile display: Ensure images look good on mobile devices

Conclusion

By following this tutorial, you've successfully added AI-generated product images to your Shopify email notifications. This enhancement provides customers with a visual confirmation of their personalized products, improving the overall shopping experience and reducing customer service inquiries about custom orders.