> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalize your email content with dynamic content

> How to use merge tags, conditional content, dynamic images, and looping content in your email designs

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.

<Note>
  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.
</Note>

<iframe width="100%" height="400" src="https://www.youtube.com/embed/2lAWBzxZrNY" title="Personalize your email content with dynamic content" frameBorder="0" allowFullScreen />

## 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

<Steps>
  <Step title="Find the text field">
    In your Figma design, locate the text field where you want to add personalization.
  </Step>

  <Step title="Copy your ESP's merge tag syntax">
    Get it from your platform's documentation.
  </Step>

  <Step title="Paste the merge tag into the text field in Figma">
    The plugin will preserve this code when you export.
  </Step>
</Steps>

### Example Syntax by ESP

<Tabs>
  <Tab title="MailerLite">
    ```text theme={null}
    Hello {$name|default('kind email peeps')}
    ```
  </Tab>

  <Tab title="Klaviyo">
    ```liquid theme={null}
    Hello {{ person.first_name|default:"there" }}
    ```
  </Tab>

  <Tab title="Mailchimp">
    ```text theme={null}
    Hello *|FNAME:there|*
    ```
  </Tab>

  <Tab title="Braze">
    ```liquid theme={null}
    Hello {{ ${first_name} | default: 'there' }}
    ```
  </Tab>

  <Tab title="Iterable">
    ```handlebars theme={null}
    Hello {{#if firstName}}{{firstName}}{{else}}there{{/if}}
    ```
  </Tab>

  <Tab title="Salesforce Marketing Cloud">
    ```text theme={null}
    Hello %%=IIF(NOT EMPTY(@firstName), @firstName, "there")=%%
    ```
  </Tab>

  <Tab title="Customer.io">
    ```liquid theme={null}
    Hello {{ customer.first_name | default: 'there' }}
    ```
  </Tab>
</Tabs>

All of these will:

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

<Tip>
  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."
</Tip>

### 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

<Steps>
  <Step title="Find the Code Component">
    It's at the bottom of the Email Love plugin panel.
  </Step>

  <Step title="Add your if/else logic">
    Use your ESP's templating language (handlebars, Liquid, Jinja, etc.).
  </Step>

  <Step title="Wrap your content">
    Drag the code component to wrap around the content you want to conditionally display.
  </Step>

  <Step title="Add the alternative">
    Add an "else" code component for the alternative content.
  </Step>

  <Step title="Close the statement">
    Finish with a final code component.
  </Step>
</Steps>

### 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.

```handlebars theme={null}
{{#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

<Steps>
  <Step title="Select the image frame in Figma">
    Click the image you want to make dynamic.
  </Step>

  <Step title="Open the Properties panel">
    Open it in the Email Love plugin.
  </Step>

  <Step title="Find the Override Image Source option">
    Paste your dynamic image URL or merge tag.
  </Step>
</Steps>

### Example: Nifty Images Integration

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

1. Set up your dynamic image in Nifty Images (or similar tool)
2. Copy the dynamic image URL
3. Paste it into the Override Image Source field in Figma
4. 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

<Steps>
  <Step title="Start the loop">
    Add a **Code Component** at the start of your loop.
  </Step>

  <Step title="Insert your catalog logic">
    Use handlebars or your ESP's syntax.
  </Step>

  <Step title="Design the repeating content">
    Text, images, buttons: whatever should repeat for each item.
  </Step>

  <Step title="Close the loop">
    Add a closing **Code Component** to end the loop.
  </Step>

  <Step title="Wrap the structure">
    Wrap this entire structure in a table or column.
  </Step>
</Steps>

### Example (Iterable/Handlebars Syntax)

```handlebars theme={null}
{{#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

<Note>
  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.
</Note>

## 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](https://help.activecampaign.com/hc/en-us/articles/220358207-Use-Conditional-Content#01J80MQZ65S9CFHQE3AHR398MF)                            |
| Blueshift                  | Liquid                           | [Blueshift Liquid templating language](https://help.blueshift.com/hc/en-us/articles/13828972008211-Using-Liquid-for-Personalization)                                             |
| Braze                      | Liquid                           | [Braze Liquid templating documentation](https://www.braze.com/docs/user_guide/personalization_and_dynamic_content/liquid)                                                        |
| Customer.io                | Liquid                           | [Customer.io Liquid syntax list](https://docs.customer.io/journeys/liquid-tag-list/?version=latest)                                                                              |
| Dotdigital                 | Liquid                           | [DotDigital Liquid templating guide](https://support.dotdigital.com/en/articles/8199120-loop-decision-and-liquid-markup-building-blocks)                                         |
| Emarsys                    | Emarsys Scripting Language (ESL) | [Emarsys guide to ESL](https://esl.emarsys.com/hc/en-us/articles/9333248175249-What-is-ESL)                                                                                      |
| HubSpot                    | HubL (HubSpot Markup Language)   | [HubSpot Hubl documentation](https://developers.hubspot.com/docs/cms/reference/hubl/overview)                                                                                    |
| Iterable                   | Handlebars                       | [Iterable Handlebars documentation](https://support.iterable.com/hc/en-us/articles/205480365)                                                                                    |
| Klaviyo                    | Django/Liquid                    | [Klaviyo conditional content guide](https://help.klaviyo.com/hc/en-us/articles/7655926841499)                                                                                    |
| Loops                      | Custom syntax                    | [Loops dynamic content guide](https://loops.so/docs/creating-emails/personalizing-emails#dynamic-tag-syntax)                                                                     |
| Mailchimp                  | Custom syntax                    | [MailChimp merge tag guide](https://mailchimp.com/help/all-the-merge-tags-cheat-sheet/)                                                                                          |
| MailerLite                 | Custom syntax                    | [How to use Mailerlite variables](https://www.mailerlite.com/help/how-to-use-variables-in-mailerlite)                                                                            |
| Marketo                    | Tokens & Velocity                | [How to use Marketo Tokens](https://experienceleague.adobe.com/docs/marketo/using/product-docs/demand-generation/landing-pages/personalizing-landing-pages/tokens-overview.html) |
| MoEngage                   | Custom syntax                    | [MoEngage Jinga template guide](https://help.moengage.com/hc/en-us/articles/115002757783-Jinja-Templating-Language)                                                              |
| Sailthru                   | Zephyr                           | [Sailthru Zephyr guide](https://getstarted.meetmarigold.com/engagebysailthru/Content/developers/zephyr-syntax/examples-library.html)                                             |
| Salesforce Marketing Cloud | AMPscript                        | [Salesforce guide to AMP Script](https://developer.salesforce.com/docs/marketing/marketing-cloud/guide/ampscript.html)                                                           |
| Zeta Global                | Custom syntax                    | [Zeta Markup Language guide](https://knowledgebase.zetaglobal.com/kb/zeta-markup-language-zml)                                                                                   |

### 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:

1. Import the HTML into your ESP
2. Use your ESP's preview function to test personalization
3. Send test emails to yourself with different data values
4. Verify that merge tags pull correct data
5. Check that if/else statements show the right content
6. Confirm dynamic images load properly
7. 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](mailto:support@emaillove.com)** - Reach out directly for support
* [**Join our Discord community**](https://discord.com/invite/ANv9PjVdzP) - 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