How to add images to Gmail promotion emails
Ever wonder how some brands manage to showcase stunning images and product carousels right in your Gmail Promotions tab? ✨
The good news is, it’s not magic! You can do it too with just a few tweaks to your email code.
Let’s create a dynamic product carousel that grabs attention and drives clicks:
1. Open your email in your marketing platform’s HTML editor.
2. Head over to the <head> section and add a <script> tag. Within this tag, you’ll build your product carousel using MICRODATA code. It might sound technical, but trust me, it’s easier than it looks!
Here is an example of how to write it:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
// Build the first image preview in your product carousel:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="IMAGE_URL1"/>
<meta itemprop="url" content="PROMO_URL1"/>
// Optionally, include the following PromotionCard properties:
<meta itemprop="headline" content="HEADLINE1"/>
<meta itemprop="price" content="PRICE1"/>
<meta itemprop="priceCurrency" content="PRICE_CURRENCY1"/>
<meta itemprop="discountValue" content="DISCOUNT_VALUE1"/>
<meta itemprop="position" content="POSITION"/>
</div>
// Build the second image preview in your product carousel:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="IMAGE_URL2"/>
<meta itemprop="url" content="PROMO_URL2"/>
// Optionally, include the following PromotionCard properties:
<meta itemprop="headline" content="HEADLINE2"/>
<meta itemprop="price" content="PRICE2"/>
<meta itemprop="priceCurrency" content="PRICE_CURRENCY2"/>
<meta itemprop="discountValue" content="DISCOUNT_VALUE2"/>
<meta itemprop="position" content="POSITION"/>
</div>
// To include more image previews, add additional PromotionCard objects.
// You can include up to 10 image previews in a product carousel.
</head>
<body>
// The message of your email
</body>
</html>If you want to test out this preview, head over to https://developers.google.com/gmail/promotab/preview
Don’t worry if you’re not a coding expert. I’ll be here to break it down for you, step by step. And remember, even a few simple lines of code can have a massive impact on your email’s visual appeal.