Using Loop in Email Templates

The Loop block lets you repeat content multiple times in your emails - perfect for product catalogs, team rosters, event schedules, and more.

What is a Loop?

Think of Loop as a “repeater” - you design content once, and it automatically duplicates for each item in your list. For example, if you have 10 products, the Loop will create 10 product cards automatically.

Quick Start Guide

Step 1: Add a Loop Block

1. Open the Email Template Builder
2. Click the Plus button to open the blocks and choose the Loop block from the blocks panel into your template
3. Inside the Loop block, add the content you want to repeat (columns, text, images, buttons, etc.)

Step 2: Configure the Loop

Click on the Loop block to see its settings:

• Data Source: The name of your array (e.g., products, team, events). This needs to present in your JSON in Dynamic Data.
• Loop Variable: The name to use inside the loop (e.g., product, member, event). This isn’t present, but used to refer the single item in your items.

Example:

• Data Source: products
• Loop Variable: product

Step 3: Use Variables

Inside the Loop block, reference your data using this format:

{{loopVariable.property}}

Examples:

• {{product.name}} - Product name
• {{product.price}} - Product price
• {{member.email}} - Team member email
• {{event.time}} - Event time

Pre-built Loop Templates

FlowMattic includes ready-to-use Loop templates. Just pick one, customize it, and send!

1. Product Catalog

Display products with images, descriptions, and prices.

Your data should look like:

{
  "products": [
    {
      "name": "Wireless Headphones",
      "description": "Noise-canceling with 30-hour battery",
      "price": "$299.99",
      "image": "https://example.com/image.jpg",
      "url": "https://example.com/product"
    }
  ]
}

Variables you can use:

• {{product.name}}
• {{product.description}}
• {{product.price}}
• {{product.image}}
• {{product.url}}

2. Team Directory

Showcase team members with photos and contact info.

Your data should look like:

{
  "team": [
    {
      "name": "Sarah Johnson",
      "role": "CEO",
      "bio": "15 years in tech leadership",
      "photo": "https://example.com/sarah.jpg",
      "email": "[email protected]",
      "phone": "+1 (555) 123-4567"
    }
  ]
}

Variables you can use:

• {{member.name}}
• {{member.role}}
• {{member.bio}}
• {{member.photo}}
• {{member.email}}
• {{member.phone}}

3. Event Schedule

List conference sessions, meetings, or events.

Your data should look like:

{
  "events": [
    {
      "time": "9:00 AM",
      "title": "Opening Keynote",
      "speaker": "Dr. Jane Smith",
      "description": "Latest breakthroughs in AI",
      "location": "Main Auditorium",
      "type": "🎤 Keynote"
    }
  ]
}

Variables you can use:

• {{event.time}}
• {{event.title}}
• {{event.speaker}}
• {{event.description}}
• {{event.location}}
• {{event.type}}

Using Loop Templates in Workflows

Option 1: Test in Template Builder

1. Open your Loop template in the builder
2. Click “Dynamic Data” tab in the right panel
3. Paste your JSON test data
4. The preview updates instantly to show all items

Option 2: Send from Workflow

1. In your workflow, add “Send Template Email” action
2. Select your Loop template
3. In the Template Variables field, pass your data:

Example for products:

{
  "products": [
    {"name": "Item 1", "price": "$99"},
    {"name": "Item 2", "price": "$149"}
  ]
}

You can also use dynamic data from previous workflow steps!

Tips & Tricks

✅ Keep It Simple

Start with 2-3 items to test, then scale up

✅ Match Your Data Structure

Your JSON array name must match the Loop’s “Data Source” setting

✅ Use Descriptive Variable Names

• For products: use product not item
• For team members: use member not person
• Makes templates easier to understand

✅ Test with Real Data

Copy actual data from your database/API to ensure everything displays correctly

✅ Nested Data Works Too

You can access nested properties:

• {{product.pricing.regular}}
• {{member.contact.phone}}

Common Use Cases

E-commerce

• Product catalogs
• Order confirmations with line items
• Shopping cart reminders
• Best sellers lists

Events & Conferences

• Event schedules
• Speaker lineups
• Workshop agendas
• Venue locations

Team & Organizations

• Employee directories
• Meet the team pages
• Board member listings
• Department rosters

Real Estate

• Property listings
• Open house schedules
• Featured properties
• Agent directories

Education

• Course catalogs
• Class schedules
• Faculty directories
• Student rosters

Troubleshooting

Loop not showing items?

• Check that your Data Source matches your array name exactly
• Verify your JSON is valid (use a JSON validator)
• Make sure your array has items in it

Variables not displaying?

• Double-check variable names match your data properties
• Use correct syntax: {{variable.property}}
• Ensure no typos in property names

Styling looks wrong?

• Each item inherits the Loop block’s styling
• Customize padding and background color in Loop settings
• Child blocks inside the Loop can have their own styles

How It Works Behind the Scenes

When you send an email, FlowMattic processes your Loop using LiquidJS template engine:

Your template:

{% for product in products %}
  <div>{{product.name}} - {{product.price}}</div>
{% endfor %}

Becomes:

<div>Product 1 - $99</div>
<div>Product 2 - $149</div>
<div>Product 3 - $199</div>

All automatic - you just provide the data! 🎉

Need More Help?

• Check out the pre-built Loop templates for inspiration
• Copy a template and modify it to learn how it works
• Start simple with 1-2 fields, then add more complexity

Happy looping! 🚀