Logic6 min read•Audience: All, Developers
Loops (each)
Iterate over repeating arrays to build receipts, product catalogs, article lists, and flight itineraries.
Key Takeaways
- Use the Logic Loop block or {{#each items}} to repeat blocks for every item in an array.
- Access item fields with {{this.name}} or direct property names ({{name}}).
- Use built-in iteration variables: @index, @first, @last.
- Preview dynamic loops with multi-item sample payloads in the editor.
The Visual Logic Loop Block#
To create repeating lists:
- Drag a Loop block from the Dynamic Logic drawer into a column.
- In the right panel, specify the array property name (e.g.
itemsorcart.products). - Place a 2-column or 3-column row inside the loop representing a single line item (e.g., [Product Thumbnail] [Title + Price]).
- The template will automatically repeat that row for every item in the provided array.
Special Loop Variables#
Inside an {{#each}} block, Handlebars provides metadata variables:
@index: The 0-based index of the current item (0, 1, 2...).@first: Boolean, true for the very first item. Useful for showing a top divider only before the first item.@last: Boolean, true for the final item. Useful for suppressing the bottom divider on the last row.
Handling Empty Arrays with {{else}}#
If an array is empty ("items": []), you can provide a graceful empty-state message using {{else}}:
code
handlebars
Frequently Asked Questions
How do I access properties of the parent object from inside a loop?
Use ../ to step up one scope level: {{../order.id}} or {{../customer.currency}} allows child items to access parent transaction data.
What is the recommended limit for items rendered in a loop?
While Handlebars can loop hundreds of items, keep email line items under 25 to prevent the compiled HTML from exceeding Gmail’s 102 KB clipping limit.