Skip to content

Recipes & Tutorials

Learn by building real templates. These tutorials walk you through complete examples from start to finish.

Getting Started

  • Invoice Template

    Build a complete invoice with header, line items, and totals

    Start Tutorial

  • Iteration Patterns

    Tables, lists, cards, and grids from array data

    View Patterns

  • Conditional Content

    Show/hide sections based on data

    Learn Conditionals

Quick Recipes

Display a List of Items

<ul>
{% for item in items %}
    <li>{{ item.name }} - {{ item.price | format_number: "C" }}</li>
{% endfor %}
</ul>

Format a Date

{{ order.date | parse_date | date: "%B %d, %Y" }}
<!-- Output: January 15, 2024 -->

Show Content Conditionally

{% if customer.isPremium %}
    <span class="badge">Premium Member</span>
{% endif %}

Calculate a Total

{% assign subtotal = 0 %}
{% for item in order.items %}
    {% assign lineTotal = item.price | times: item.quantity %}
    {% assign subtotal = subtotal | plus: lineTotal %}
{% endfor %}
<p>Subtotal: {{ subtotal | format_number: "C" }}</p>

Add Page Numbers (PDF)

In your footer template: 

<div style="text-align: center; font-size: 9px;">
    Page {{tt_pageNumber}} of {{tt_totalPages}}
</div>

Generate a QR Code

{{ qrCode(order.trackingUrl, "#000", "#fff", 10, 150, 150) }}

Number Sections Automatically

<h2>{% secUp main %}. Introduction</h2>
<h2>{% secUp main %}. Methods</h2>
<h2>{% secUp main %}. Results</h2>

Learning Path

Beginner:

  1. Variables - Basic placeholders
  2. Invoice Tutorial - Your first complete template
  3. Iteration Patterns - Working with lists

Intermediate:

  1. Data Binding - Complex data structures
  2. Filters & Tags - Formatting and logic
  3. Conditional Content - Dynamic sections

Advanced:

  1. repeat() Function - JSONPath iteration
  2. Content Blocks - Reusable components
  3. Localization - Multi-region support

Common Tasks

Task Solution
Display JSON data {{ variable }} or {{ object.property }}
Loop through array {% for item in items %}...{% endfor %}
Format currency {{ price \| format_number: "C" }}
Format date {{ date \| parse_date \| date: "%Y-%m-%d" }}
Show if exists {% if variable %}...{% endif %}
Show if empty {% if items.size == 0 %}...{% endif %}
Add page numbers {{tt_pageNumber}} in PDF header/footer
Number sections {% secUp sectionName %}
Generate QR code {{ qrCode(content) }}
Reuse components {{ contentBlock(id, compId, scope) }}

See Also