How to create an AMP for Email template

Last updated: May 30, 2022

In this tutorial, you'll learn how to make use of custom config files in Maizzle to create interactive AMP for Email templates.

For a syntax refresher, checkout the AMP Email docs or AMP Email examples.

Want to dive right in? Checkout our AMP for Email Starter.

Layout

AMP for Email requires some special markup, so let's create an amp.html Layout and save it under src/layouts:

src/layouts/amp.html

<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <if condition="page.css">
    <style amp-custom>{{{ page.css }}}</style>
  </if>
  <block name="head"></block>
</head>
<body>
  <block name="template"></block>
</body>
</html>

Template

For this tutorial, we'll use the AMP Carousel component.

Create src/templates/amp/carousel.html and add a basic AMP carousel:

src/templates/amp/carousel.html

<extends src="src/layouts/amp.html">
  <block name="head">
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
  </block>

  <block name="template">
    <div class="p-4">
      <div class="max-w-full">
        <amp-carousel width="600" height="400" layout="responsive" type="slides">
          <amp-img src="https://ampbyexample.com/img/image1.jpg" width="600" height="400" alt="a sample image"></amp-img>
          <amp-img src="https://ampbyexample.com/img/image2.jpg" width="600" height="400" alt="another sample image"></amp-img>
          <amp-img src="https://ampbyexample.com/img/image3.jpg" width="600" height="400" alt="and another sample image"></amp-img>
        </amp-carousel>
      </div>
    </div>
  </block>
</extends>

AMP components are initialized by adding their <script> tag inside the <block name="head"> element, as shown above.

You can then use the component's markup inside <block name="template">.

CSS inlining

Inline style attributes are not allowed in AMP, so you need to disable CSS inlining.

Do it either globally, in your environment config:

config.js

module.exports = {
  inlineCSS: false
}

... or locally, in the Template's Front Matter:

src/templates/amp/carousel.html

---
inlineCSS: false
---

!important

AMP for Email doesn't support !important in CSS, either.

This can be easily turned off in your Tailwind config:

tailwind.config.js

module.exports = {
  important: false,
}

However, you probably want to turn it off only for AMP templates.

You can do this with a custom build Environment:

config.amp.js

module.exports = {
  build: {
    destination: {
      path: 'build_amp'
    },
    templates: {
      source: 'src/templates/amp'
    },
    tailwind: {
      config: 'tailwind.amp.js'
    }
  }
}

Next, duplicate tailwind.config.js to tailwind.amp.js and disable important:

tailwind.amp.js

module.exports = {
  important: false,
  // ...
}

Finally, run maizzle build amp to build your ⚡4email templates.

In case you haven't installed the Maizzle CLI, add an npm script to package.json:

package.json

"scripts": {
  "build:amp": "maizzle build amp"
}

You'd then build your AMP emails by running npm run build:amp.

How to create an AMP for Email template

Layout

Template

CSS inlining

!important

Resources