Personalize your email content with dynamic content

The Email Love Figma plugin supports four types of dynamic content that you can design in Figma and export to your ESP. This guide walks through each type, from basic merge tags to advanced looping content.

Every ESP has slightly different syntax for personalization. The examples in this guide use MailerLite and handlebars syntax, but the concepts apply to all major platforms including Salesforce, Hubspot, Klaviyo, Braze, Iterable, and many more. Always reference your ESP’s documentation for specific merge tag syntax.

1. Merge Tags

Merge tags are the simplest form of personalization. They pull in data you store in your ESP (like first name, product details, preferences, or purchase history) and insert it directly into your email.

How to Add Merge Tags

Find the text field

In your Figma design, locate the text field where you want to add personalization.

Copy your ESP's merge tag syntax

Get it from your platform’s documentation.

Paste the merge tag into the text field in Figma

The plugin will preserve this code when you export.

Example Syntax by ESP

Hello {$name|default('kind email peeps')}

Hello {{ person.first_name|default:"there" }}

Hello *|FNAME:there|*

Hello {{ ${first_name} | default: 'there' }}

Hello {{#if firstName}}{{firstName}}{{else}}there{{/if}}

Hello %%=IIF(NOT EMPTY(@firstName), @firstName, "there")=%%

Hello {{ customer.first_name | default: 'there' }}

All of these will:

Display the subscriber’s first name if available
Fall back to a default value if the name field is empty

Always include a default value in your merge tags. This ensures your email looks good even if you don’t have that data for every subscriber. Get creative with your defaults instead of using boring phrases like “Hello there.”

What You Can Merge

You can merge any data stored in your ESP:

First name, last name, full name
Product names or prices from abandoned carts
Subscriber preferences
Birth dates or anniversaries
Custom fields specific to your business

2. If/Else Statements (Conditional Content)

If/else statements let you show different content blocks to different subscribers based on data you store about them. This is more advanced than merge tags because you’re controlling entire sections of your email, not just individual text strings.

How to Add If/Else Statements

Find the Code Component

It’s at the bottom of the Email Love plugin panel.

Add your if/else logic

Use your ESP’s templating language (handlebars, Liquid, Jinja, etc.).

Wrap your content

Drag the code component to wrap around the content you want to conditionally display.

Add the alternative

Add an “else” code component for the alternative content.

Close the statement

Finish with a final code component.

Two Ways to Use Code Components

Option 1: Wrap Entire Sections Place code components above and below entire content sections to show/hide them based on conditions.

{{#if customer == 'pro_member'}}
[Content Section: Golden Gate Bridge]
{{else}}
[Content Section: Hot Air Balloon]
{{/if}}

Option 2: Wrap Individual Elements Place code components inside a section to conditionally show/hide specific elements like images, text blocks, or buttons.

Example Use Cases

Show premium content to paid subscribers
Display different CTAs based on subscription tier
Personalize product recommendations by location
Show different messaging to new vs. returning customers

3. Dynamic Images

Dynamic images let you swap image URLs based on merge tags or external personalization services. The image displayed will change based on subscriber data or real-time content from your website.

How to Add Dynamic Images

Select the image frame in Figma

Click the image you want to make dynamic.

Open the Properties panel

Open it in the Email Love plugin.

Find the Override Image Source option

Paste your dynamic image URL or merge tag.

Example: Nifty Images Integration

Nifty Images is an image personalization tool that works great with Email Love. Here’s how it works:

Set up your dynamic image in Nifty Images (or similar tool)
Copy the dynamic image URL
Paste it into the Override Image Source field in Figma
The plugin will use this URL in your exported HTML

The image will update automatically based on:

Latest content from your website
Subscriber location or preferences
Real-time data like countdown timers
Weather or stock availability

Use Cases for Dynamic Images

Pull the latest blog post featured image
Show location-specific store images
Display personalized product recommendations
Add countdown timers for sales
Show real-time inventory or pricing

4. Looping Content (Catalog Data)

Looping content is the most advanced personalization type. It’s commonly used with platforms like Iterable, Braze, and Salesforce Marketing Cloud to pull catalog data and repeat content blocks multiple times based on subscriber-specific information.

How Looping Works

Looping content pulls data from a catalog in your ESP and repeats a content block for each item assigned to that subscriber. For example:

If a subscriber has 3 items in their cart, the content block repeats 3 times
If they have 5 upcoming classes, it shows all 5
If they have 10 recommended products, all 10 appear

How to Add Looping Content

Start the loop

Add a Code Component at the start of your loop.

Insert your catalog logic

Use handlebars or your ESP’s syntax.

Design the repeating content

Text, images, buttons: whatever should repeat for each item.

Close the loop

Add a closing Code Component to end the loop.

Wrap the structure

Wrap this entire structure in a table or column.

Example (Iterable/Handlebars Syntax)

{{#each catalogCollection}}
  <h3>{{title}}</h3>
  <p>{{details}}</p>
{{/each}}

This will pull all items from the specified catalog collection and display each one using your designed template.

Common Use Cases

Order confirmation receipts showing all purchased items
Abandoned cart emails with each cart item
Personalized product recommendations from catalogs
Event registrations showing all upcoming sessions
Course enrollments listing all assigned classes

The content inside the loop can include text, images, or buttons. The plugin treats it as a repeatable block that your ESP will populate with actual data at send time.

ESP-Specific Notes

Syntax Varies by Platform

Each ESP uses different templating languages. Reference the documentation below for your specific platform:

ESP	Templating Language	Documentation Link
ActiveCampaign	Custom syntax	ActiveCampaign Personalization Tags
Blueshift	Liquid	Blueshift Liquid templating language
Braze	Liquid	Braze Liquid templating documentation
Customer.io	Liquid	Customer.io Liquid syntax list
Dotdigital	Liquid	DotDigital Liquid templating guide
Emarsys	Emarsys Scripting Language (ESL)	Emarsys guide to ESL
HubSpot	HubL (HubSpot Markup Language)	HubSpot Hubl documentation
Iterable	Handlebars	Iterable Handlebars documentation
Klaviyo	Django/Liquid	Klaviyo conditional content guide
Loops	Custom syntax	Loops dynamic content guide
Mailchimp	Custom syntax	MailChimp merge tag guide
MailerLite	Custom syntax	How to use Mailerlite variables
Marketo	Tokens & Velocity	How to use Marketo Tokens
MoEngage	Custom syntax	MoEngage Jinga template guide
Sailthru	Zephyr	Sailthru Zephyr guide
Salesforce Marketing Cloud	AMPscript	Salesforce guide to AMP Script
Zeta Global	Custom syntax	Zeta Markup Language guide

How the Plugin Handles Dynamic Content

The Email Love plugin doesn’t process or validate your personalization code - it simply inserts your templating language as raw code into the exported HTML. This means:

✅ Works with any ESP’s templating language
✅ Supports Handlebars, Liquid, Jinja, HubL, AMPscript, Velocity, Zephyr, and custom syntaxes
✅ You have complete control over your personalization logic
⚠️ You’re responsible for using the correct syntax for your ESP
⚠️ Always test your personalization in your ESP before sending

Testing Your Personalization

After exporting your HTML from Figma:

Import the HTML into your ESP
Use your ESP’s preview function to test personalization
Send test emails to yourself with different data values
Verify that merge tags pull correct data
Check that if/else statements show the right content
Confirm dynamic images load properly
Test looping content with different numbers of items

Need Help?

If you run into issues or have questions about implementing personalization:

Email us at support@emaillove.com - Reach out directly for support
Join our Discord community - Get help from other Email Love users and our team. This is the best place for real-time troubleshooting and tips from other marketers using the plugin

​1. Merge Tags

​How to Add Merge Tags

​Example Syntax by ESP

​What You Can Merge

​2. If/Else Statements (Conditional Content)

​How to Add If/Else Statements

​Two Ways to Use Code Components

​Example Use Cases

​3. Dynamic Images

​How to Add Dynamic Images

​Example: Nifty Images Integration

​Use Cases for Dynamic Images

​4. Looping Content (Catalog Data)

​How Looping Works

​How to Add Looping Content

​Example (Iterable/Handlebars Syntax)

​Common Use Cases

​ESP-Specific Notes

​Syntax Varies by Platform

​How the Plugin Handles Dynamic Content

​Testing Your Personalization

​Need Help?

1. Merge Tags

How to Add Merge Tags

Example Syntax by ESP

What You Can Merge

2. If/Else Statements (Conditional Content)

How to Add If/Else Statements

Two Ways to Use Code Components

Example Use Cases

3. Dynamic Images

How to Add Dynamic Images

Example: Nifty Images Integration

Use Cases for Dynamic Images

4. Looping Content (Catalog Data)

How Looping Works

How to Add Looping Content

Example (Iterable/Handlebars Syntax)

Common Use Cases

ESP-Specific Notes

Syntax Varies by Platform

How the Plugin Handles Dynamic Content

Testing Your Personalization

Need Help?