.jw Template Syntax & Control Flow

Overview of .jw Template Language #

The **.jw Template Language** is the native HTML templating engine powering JoonWeb storefronts and theme app extensions. It allows frontend developers to write dynamic HTML with programming logic, conditional branches, loops, filters, and schema rules without writing complex backend code.

1. Echoing Variables (`{{ ... }}`) #

To display data or settings, wrap the variable in double curly braces: ```jw <h1>{{ section.settings.heading }}</h1> <p>{{ block.settings.description }}</p> ```

2. Comments (`{# ... #}`) #

Comments inside `.jw` templates are ignored during rendering and will not appear in the storefront HTML source code: ```jw {# This is a comment - it won't appear in the HTML output #} ```

3. Conditional Logic (`{% if %}`) #

Evaluate conditions and control content visibility using `{% if %}`, `{% elseif %}`, `{% else %}`, and `{% endif %}`: ### Basic If Statement ```jw {% if section.settings.show_title %} <h1>{{ section.settings.title }}</h1> {% endif %} ``` ### If-Elseif-Else Statement ```jw {% if section.settings.alignment == "left" %} <div style="text-align: left;"> {% elseif section.settings.alignment == "center" %} <div style="text-align: center;"> {% else %} <div style="text-align: right;"> {% endif %} ```

4. For Loops (`{% for %}`) #

Iterate over arrays, collections, or block lists using `{% for %}`: ```jw {% for item in items %} <li>{{ item.name }}</li> {% else %} <li>No items found</li> {% endfor %} ```

5. Switch Statements (`{% switch %}`) #

Conditionally render different block components based on `block.type`: ```jw {% switch block.type %} {% case "heading" %} <h2>{{ block.settings.title }}</h2> {% case "image" %} <img src="{{ block.settings.image | asset_url }}"> {% default %} {{ render_block(block) }} {% endswitch %} ```

6. Variable Assignment (`{% set %}`) #

Assign or define local variables inside your template: ```jw {% set bg_color = section.settings.bg_color | default("#ffffff") %} {% set padding = section.settings.padding_top | default(60) %} <div style="background: {{ bg_color }}; padding-top: {{ padding }}px;"> ```

7. Built-in Filters #

| Filter | Description | Example | | - | - | - | | `| default('fallback')` | Fallback value if setting is empty | `{{ section.settings.title \| default('Store') }}` | | `| asset_url` | Converts image filename to CDN asset URL | `<img src="{{ block.settings.image \| asset_url }}">` | | `| length` | Returns number of items in array or characters in string | `{% if section.blocks \| length > 0 %}` | | `| slice(0, 100)` | Truncates text length | `{{ article.body \| slice(0, 100) }}` | | `| date("M d, Y")` | Formats date object | `{{ post.created_at \| date("M d, Y") }}` |

8. Mathematical & String Operators #

Perform calculations and string concatenation directly inside `.jw` templates: ```jw {% set total = price * quantity %} {% set half = total / 2 %} {% set full_name = first_name ~ " " ~ last_name %} {% set text_length = description | length %} ``` > 💡 **String Concatenation**: Use `~` (tilde) to join strings together (e.g. `first_name ~ " " ~ last_name`).

9. Empty State Check Pattern #

```jw {% if section.blocks is defined and section.blocks | length > 0 %} <!-- Render blocks --> {% else %} <!-- Empty placeholder state --> {% endif %} ```