Using the Amp-List Component in Email Campaigns

Modern email marketing has long gone beyond static newsletters. Users expect relevant, personalized, and interactive content that adapts to their needs in real time.

In this field, AMP for email has been a real breakthrough. The technology makes it possible to add dynamic elements and interactive forms to emails. We wrote more about implementing AMP in email templates in our article.

One of the key tools of AMP for email is the AMP-list component. It allows loading data from external sources in real time and dynamically updating email content. This opens up a wide range of possibilities, from personalized recommendations to up-to-date store hours or refreshed promotions.

Let’s explore how AMP-list works and how to use it effectively in email marketing with Pixcraft.

What is AMP-list

AMP-list is a component for dynamically retrieving data within an email with the ability to update it. It replaced Agile images, which were unstable and did not fully meet user needs.

Example of a promo email using AMP-list

General Syntax

AMP-list loads JSON data from a specified URL and displays it in the layout using a template.

<amp-list 
  width="auto" 
  height="100" 
  layout="fixed-height" 
  src="https://example.com/data.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>

Among the key attributes of amp-list:

• src — URL of the data source (JSON API)
• width / height / layout — display parameters
• template type="amp-mustache" — data output template

AMP-list expects a JSON response with an object containing an items property that holds an array of data. Example:

{
  "items": [
    { "title": "Interactive AMP content" },
    { "title": "Personalized materials" }
  ]
}

In our example, the HTML output will look something like this:

<div>Interactive AMP content</div>
<div>Personalized materials</div>

Content updates occur when the user opens the email, or the email can be refreshed manually. If, for some reason, the server does not return a response, you can display a special fallback block with alternative content:

<amp-list width="auto" height="200" layout="fixed-height" src="https://example.com/products.json">
  <template type="amp-mustache">
    <div>{{name}}</div>
  </template>
  <div fallback>Fallback content in case something goes wrong</div>
</amp-list>

AMP-mustache
The display of received data is handled by AMP-mustache:

<template type="amp-mustache">
    <div>
      <amp-img src="{{image}}" width="100" height="100"></amp-img>
      <p>{{name}}</p>
      <a href="{{url}}">More details</a>
    </div>
  </template>

Mustache does not pass the value itself but defines a template for displaying the received data. Content substitution is done using the following syntax:

• {{variable}}: A variable. Outputs the HTML-escaped value of the variable.
• {{#section}} {{/section}}: Checks if the variable exists and allows iterating over elements if it’s an array.
• {{^section}} {{/section}}: Checks if the variable is missing. Used to create fallback elements.
• {{{unescaped}}}: Unescaped HTML allows displaying styled text with links, for example. There are restrictions on the allowed tags.

Usage Examples

Using AMP-list in emails unlocks a wide range of opportunities for marketers. The main advantage is personalizing your emails and displaying up-to-date content. Additionally, this component allows you to:

• display a live comment feed within an email;
• apply styling based on time of day or date;
• show real-time product and promotion information in your store;
• and much more!

Styling by Time of Day or Date

With AMP-list, you can set up dynamic content display based on when the recipient reads the email:

Promotions and Special Offers

One of the biggest drivers for purchasing a product is the time-limited nature of an offer. An exclusive price, the arrival of a rare item, or real-time stock availability can be the deciding factor for a purchase:

Weather Forecast

Customers will be pleasantly surprised to find a small weather update inside their email, informing them about the upcoming forecast. The AMP-list component can help set up such a feature:

Implementation in Pixcraft

AMP-list can be easily integrated into your email using Pixcraft. To do this, create a new component in the corresponding menu section:

Enter a name and description, then select the AMP-List type:

In the next step, configure the element structure. You can add a text field, headline, image, or link:

On the Content tab, you can configure the content of the generated "cards" and add the required number of them:

You can also set display conditions for the block. Specify conditions such as time, day of the week, or a specific date:

After saving the element, you will see detailed instructions on how to connect AMP-list to your email. Pixcraft will generate ready-to-use code in both HTML and TJML.

Your interactive element is now ready! Be sure to test the email before sending it to a large audience, and keep in mind that not all email providers support AMP content.

Conclusion

Using AMP-list in email marketing unlocks new possibilities for personalization, dynamic content updates, and increased user engagement. With this component, emails go beyond static newsletters, transforming into interactive tools that adapt to the recipient's context and behavior.

However, it's important to remember that not all email clients support AMP, so you should also prepare a standard HTML version of the email without dynamic content.

If you haven't tried AMP in email yet, now is the perfect time to test it with Pixcraft and take your campaigns to the next level!