Tags

Tags control the logic and flow of the document rendering process.

Wrap tags in {% ... %} blocks.

Use tags in the template to create documents with the right content for the desired store order and document type. For example, you can show different content based on conditions using if statements or iterate through properties using for loops.

Conditional tags

Conditional tags determine whether a piece of a template is rendered, depending on whether a condition is True or False.

if

Renders the expression if a specific condition is True. Skips the expression if the condition is False.

Code
{% if document.is_invoice  %}
  This is an invoice.
{% endif %}
Output
This is an invoice.

elif

Use the elif tag to check for multiple conditions.

Code
{% if document.is_invoice  %}
  This is an invoice.
{% elif document.is_credit_note %}
  This is a credit note.
{% endif %}
Output
This is a credit note.

Caution

Please note that while Shopify uses elsif in their syntax, in Sufio, this tag is called elif.

else

Renders an output when no other condition is met.

Code
{% if document.is_invoice  %}
  This is an invoice.
{% else %}
  This is not an invoice.
{% endif %}
Output
This is not an invoice.

Iteration tags

Iteration tags repeatedly iterate through a group of properties.

for

Renders an output for every item in an array or property in a group of properties.

Code
{% for date in document.dates %}
  {{ date.title }}: {{ date.text }}
{% endfor %}
Output
Issue date: July 25, 2024
Due date: Aug. 9, 2024
Delivery date: July 25, 2024

Limit the number of iterations

You can limit the number of iterations in a for loop.

In this example, the loop iterates over the first two properties in the group.

Code
{% for date in document.dates[:2] %}
  {{ date.title }}: {{ date.text }}
{% endfor %}
Output
Issue date: July 25, 2024
Due date: Aug. 9, 2024

Offset the iteration

You can skip a certain number of items at the beginning of the for loop.

In this example, the loop skips the first two properties and iterates over the rest.

Code
{% for date in document.dates[2:] %}
  {{ date.title }}: {{ date.text }}
{% endfor %}
Output
Issue date: July 25, 2024
Due date: Aug. 9, 2024

Specify a range to iterate

You can specify a range to iterate over.

In this example, the loop skips the first property and stops after iterating the second property.

Code
{% for date in document.dates[1:2] %}
  {{ date.title }}: {{ date.text }}
{% endfor %}
Output
Due date: Aug. 9, 2024

Reverse the order of iteration

You can iterate in reverse order using the reverse filter.

Code
{% for date in document.dates|reverse %}
  {{ date.title }}: {{ date.text }}
{% endfor %}
Output
Delivery date: July 25, 2024
Due date: Aug. 9, 2024
Issue date: July 25, 2024

else

Renders an output when no other condition is met.

Code
{% for date in document.dates  %}
  {{ date.title }}: {{ date.text }}
{% else %}
  This document has no dates.
{% endfor %}
Output
This document has no dates.

break

Stops a for loop from iterating when a condition is met.

Code
{% for date in document.dates %}
  {% if date.id == "document-dates-due-date" %}
    {% break %}
  {% else %}
    {{ date.title }}: {{ date.text }}
  {% endif %}
{% endfor %}
Output
Issue date: July 25, 2024
Delivery date: July 25, 2024

continue

Causes a for loop to skip the current iteration and move to the next iteration.

Code
{% for date in document.dates %}
  {% if date.id == "document-dates-issue-date" %}
    {% continue %}
  {% endif %}
    {{ date.title }}: {{ date.text }}
{% endfor %}
Output
Due date: Aug. 9, 2024
Delivery date: July 25, 2024

loop

A group of properties that contain information about the parent for loop. You can render the following properties inside the loop.

loop.index

The number of the current iteration of the loop. The numbers are sequential and start at 1.

Code
{% for date in document.dates %}
  #{{ loop.index }} {{ date.title }}: {{ date.text }}
{% endfor %}
Output
#1 Issue date: July 25, 2024
#2 Due date: Aug. 9, 2024
#3 Delivery date: July 25, 2024

loop.index0

The number of the current iteration of the loop. The numbers are sequential and start at 0.

Code
{% for date in document.dates %}
  #{{ loop.index0 }} {{ date.title }}: {{ date.text }}
{% endfor %}
Output
#0 Issue date: July 25, 2024
#1 Due date: Aug. 9, 2024
#2 Delivery date: July 25, 2024

loop.revindex

The number of iterations from the end of the loop. The numbers are sequential and start at 1.

Code
{% for date in document.dates %}
  #{{ loop.revindex }} {{ date.title }}: {{ date.text }}
{% endfor %}
Output
#3 Issue date: July 25, 2024
#2 Due date: Aug. 9, 2024
#1 Delivery date: July 25, 2024

loop.revindex0

The number of iterations from the end of the loop. The numbers are sequential and start at 0.

Code
{% for date in document.dates %}
  {{ loop.revindex0 }}. {{ date.title }}: {{ date.text }}
{% endfor %}
Output
2. Issue date: July 25, 2024
1. Due date: Aug. 9, 2024
0. Delivery date: July 25, 2024

loop.first

Returns True if the current iteration is the first.

Code
{% for date in document.dates %}
  {{ loop.first }}. {{ date.title }}: {{ date.text }}
{% endfor %}
Output
True. Issue date: July 25, 2024
False. Due date: Aug. 9, 2024
False. Delivery date: July 25, 2024

loop.last

Returns True if the current iteration is the last.

Code
{% for date in document.dates %}
  {{ loop.last }}. {{ date.title }}: {{ date.text }}
{% endfor %}
Output
False. Issue date: July 25, 2024
False. Due date: Aug. 9, 2024
True. Delivery date: July 25, 2024

loop.length

The number of items in the sequence.

Code
{% for date in document.dates %}
  {{ loop.length }}. {{ date.title }}: {{ date.text }}
{% endfor %}
Output
3. Issue date: July 25, 2024
3. Due date: Aug. 9, 2024
3. Delivery date: July 25, 2024

Variable tags

Variable tags let you create new variables and assign values to them.

assign

Assigns a value to a variable. Creates the variable first if it did not exist previously.

Code
{% assign advice = "Be careful with the caffeine!" %}
{{ advice }}
Output
Be careful with the caffeine!

capture

Captures the output of a block of code or text into a variable.

Code
{% capture name %}
  {{ document.name | upper }}
{% endcapture %}
{{ name }}
Output
INVOICE