How to create interactive product images with AMP for Email | Gamer Tech

Posted on

Enhance your electronic mail coding abilities with this step-by-step AMP for electronic mail tutorial. Create your personal electronic mail that enables readers to vary the colours of a product picture.

On this tutorial, you will discover ways to create an interactive e-commerce electronic mail message. We’ll present a product with varied colour choices. The reader will have the ability to click on on every colour and dynamically replace the product picture. That is what it seems like (see the total code instance):

An example of an interactive eCommerce AMP element in an email.
As seen in Yahoo Mail inbox

Whereas it is a comparatively easy instance, you will grow to be aware of some essential parts of AMP for Electronic mail, reminiscent of:

  • amp-img an AMP alternative for the html5 img tag.
  • amp-selector a management to pick out a number of choices
  • amp-bind responds to consumer actions reminiscent of scrolls, clicks, type submissions, and so forth.

To offer you an thought of ​​what else may be with these parts, here is a extra refined instance from Google. This provides the additional complexity of displaying totally different merchandise (the 1-pack, 2-pack, and 3-pack) and permits individuals to see these merchandise in numerous colours, however the precept of what you will be taught subsequent is identical.

An example of AMP for email using interactive images for different product packages.

Step 1 – Fast Begin with AMP Playground

We shall be utilizing the official AMP Playground for this tutorial. I went forward and included some primary CSS to fashion our product picture and colour pickers so you may concentrate on studying how AMP parts work.

Go to this practice AMP Playground to get began rapidly.

An example of the code that generates the AMP eCommerce email element
The AMP Playground, arrange only for this tutorial. View code in AMP Playground

Step 2 – Add product particulars

Code on the finish of Step 2

Let’s begin designing the message. We’ll begin with the product tile, description (solely colour on this case), and product photos. Add the next contained in the .

<div class="product-wrapper">
    <h1>45 Qt Laborious Cooler</h1>
    <p><b>COLOR </b><span [text]=colorChoice>Amber</span></p>

Notice that we’re utilizing [text]=colorChoice. It is a hook that we will use later within the tutorial to replace the product description with the chosen colour. For instance, when the consumer chooses “Blue”, the textual content will dynamically replace from “Amber COLOR” to “Blue COLOR”.

Subsequent, let’s add our first product picture. Let’s begin with our default colour, amber.

<div [hidden]="!(colorChoice == 'Amber')">
      <amp-img width="600" top="440" format=responsive src=""></amp-img>

the <amp-img> is contained inside a div with a little bit of logic, [hidden]="!(colorChoice == 'Amber') which signifies that the Amber product picture will solely be seen when the consumer selects the Amber colour.

Subsequent, add the remaining product photos, one for every colour. Every of those will initially be hidden, as amber would be the default product variation.

<div hidden [hidden]="!(colorChoice == 'White')">
      <amp-img width="600" top="440" format=responsive src=""></amp-img>
<div hidden [hidden]="!(colorChoice == 'Blue')">
      <amp-img width="600" top="440" format=responsive src=""></amp-img>
<div hidden [hidden]="!(colorChoice == 'Tan')">
      <amp-img width="600" top=440 format=responsive src=""></amp-img>
An example of the AMP email code and image is generated.
Configuration of the preliminary design of the product. View code in AMP Playground

Step 3 – Add the Colour Choices

Lastly it is time to add a selector for every of the colour choices. we’ll use <amp-selector> with the default setting of single choice to operate as a radio button. And when deciding on a colour choice, the amp-state will replace to mirror that colour selection. The change to amp-state lets the remainder of our doc know to vary the product picture and colour description. Add the next under the product particulars.

<div class="color-choices-wrapper">

        on="choose: AMP.setState(colorChoice: occasion.targetOption)" >
        <div class="color-choice amber" chosen choice="Amber"></div>
        <div class="color-choice white" choice="White"></div>
        <div class="color-choice blue" choice="Blue"></div>
        <div class="color-choice tan" choice="Tan"></div>

The has an occasion set off. When chosen, updates the colorChoice variable. This variable is used to show the suitable product picture and to replace the colour description textual content within the product particulars.

on="choose: AMP.setState(colorChoice: occasion.targetOption)"

At this level, go forward and take a look at deciding on every colour choice. It is best to see your product particulars replace accordingly.

What the code for AMP email looks like later in development
Add product colour pickers. View code in AMP Playground

perceive the way it works

Here’s a abstract of the essential ideas used on this instance.

Colour pickers: the colour picker, <amp-selector>, has a “choose” occasion. When the motion happens, it updates the colorChoice variable all through the doc. (<amp-bind> is what associates an motion with a number of doc updates).

on="choose: AMP.setState(colorChoice: occasion.targetOption)"

Product Photographs: Product photos have primary logic to cover or present every picture based mostly on the worth of the colorChoice variable. Instance: hidden = True when colorChoice is just not the identical as ‘Amber’.

[hidden]="!(colorChoice == 'Amber')"

Product description: The product description textual content can be up to date with the worth of the colorChoice variable.

<span [text]=colorChoice>Amber</span>

Present us what you created!

Subsequent, I like to recommend that you simply ship your self a replica of the message you created from this tutorial. Use an electronic mail service supplier that helps AMP for electronic mail, reminiscent of AWeber, or use the Gmail AMP Playground.

If you happen to have been impressed by this publish, I’d like to see what you create! Share within the feedback under or electronic mail me and ask me to have a look.

How to create interactive product images with AMP for Email