📘 This article explains how to use functions and conditionals to define PageWorkers templates more granularly with LiquidJS. PageWorkers is part of Botify's Activation Suite, available as an option with all Botify plans.
Overview
Some PageWorkers projects use LiquidJS, a JavaScript implementation of Shopify’s Liquid templating language. Liquid is designed to render dynamic content without exposing full programming power.
👀 To determine if your Botify project uses LiquidJS templating, look for the LiquidJS badge when defining your optimization:
Otherwise, use the Nunjucks templating language in your PageWorkers template.
Some LiquidJS features are described here. For the full list of templating features, refer to the Liquid Template Language Guide. For developers familiar with Nunjucks, comparison examples are included where helpful.
Basic syntax
Liquid uses the following two delimiters:
Type | Syntax | Purpose |
Output |
| Display objects and variables |
Tags |
| Logic, control flow, variable assignment |
{{ product.title }}
{% if product.available %}
In Stock
{% endif %}
Objects, variables, and data access
Variables
Variables come from PageWorkers’ data context or are created within templates.
{{ product.title }}
{{ user.name }}You use dot notation to access properties.
Assigning variables (assign)
Use assign to create or update variables.
{% assign username = "Nabil" %}
{% assign price = 19.99 %}
{% assign is_active = true %}Nunjucks comparison
{% set username = "Nabil" %}
Capturing blocks (capture)
Use capture to store rendered content in a variable.
{% capture greeting %}
Hello, {{ username }}!
Welcome to our store.
{% endcapture %}
{{ greeting }}
Nunjucks comparison
{% set greeting %}
Hello, {{ username }}!
{% endset %}
Truthiness in LiquidJS
❗️ Liquid truthiness differs from JavaScript.
Value | LiquidJS | JavaScript |
| truthy | falsy |
| truthy | falsy |
| falsy | falsy |
| falsy | falsy |
| falsy | falsy |
| truthy | truthy |
{% assign count = 0 %}
{% if count %}
This WILL render
{% endif %}
{% if count != 0 %}
This will not render
{% endif %}
Tags
Control flow tags
if, elsif, else
{% if customer.name == "kevin" %}
Hey Kevin!
{% elsif customer.name == "anonymous" %}
Hey Anonymous!
{% else %}
Hi Stranger!
{% endif %}unless
Executes when the condition is false.
{% unless product.available %}
Sorry, this product is sold out.
{% endunless %}Equivalent to:
{% if product.available == false %}case/when
{% case shipping_method %}
{% when "express" %}
Ships in 1–2 days
{% when "standard" %}
Ships in 5–7 days
{% else %}
Shipping time varies
{% endcase %}
👉 Nunjucks note: There is no native switch; uses if / elif.
contains
Checks substrings or array membership.
{% if product.title contains "Pack" %}
This is a pack product
{% endif %}
{% if product.tags contains "sale" %}
This item is on sale!
{% endif %}Iteration tags
for
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
Empty Collections
{% for item in items %}
{{ item.name }}
{% else %}
No items found.
{% endfor %}
forloop object
Available inside loops:
Property | Description |
| Current iteration (1-indexed) |
| Current iteration (0-indexed) |
| First iteration |
| Last iteration |
| Total items |
| Remaining iterations (1-indexed) |
| Remaining iterations (0-indexed) |
Loop parameters
{% for item in items limit: 5 %}
{% for item in items offset: 2 %}
{% for item in items limit: 3 offset: 2 %}
{% for item in items reversed %}
Ranges
{% for i in (1..5) %}
{{ i }}
{% endfor %}
Variable-related tags
assigncapturecomment
Filters
Filters transform output and are chained with |.
{{ value | filter: arg1, arg2 }}String filters
{{ "hello" | upcase }} → HELLO
{{ "HELLO" | downcase }} → hello
{{ " hello " | strip }} → hello
{{ "hello" | replace: "e", "a" }} → halloConcatenation (via filters)
Liquid has no + operator for strings.
{% assign full_name = first_name | append: " " | append: last_name %}Default values
{{ username | default: "Guest" }}
{{ description | default: site.description }}Number / math filters
{{ 5 | plus: 3 }} → 8
{{ 5 | minus: 3 }} → 2
{{ 5 | times: 3 }} → 15
{{ 10 | divided_by: 3 }} → 3
{{ 10 | modulo: 3 }} → 1Array & collection filters
{{ arr | first }}
{{ arr | last }}
{{ arr | size }}
{{ arr | join: ", " }}
{{ arr | sort }}
{{ arr | reverse }}
{{ arr | uniq }}Collection filtering
{% assign published = posts | where: "published", true %}
{% assign titles = products | map: "title" %}
{% assign sorted = products | sort: "price" | reverse %}Date filters
{{ "now" | date: "%Y-%m-%d" }}
Common format codes:
%Yyear%mmonth%dday%Hhour%Mminute%Ssecond
Operators and expressions
Comparison operators
==, !=, <, >, <=, >=
Logical operators
and, or, not (LiquidJS extension)
{% if product.available and product.price < 100 %}
Affordable and in stock!
{% endif %}
❌ Parentheses are not supported.
💡 Use nested if blocks for complex logic.
Comments and whitespace control
Comments
{% comment %}
This is a block comment.
{% endcomment %}Whitespace trimming
Use hyphens to control whitespace:
{%- if condition -%}
content
{%- endif -%}
{{- variable -}Appendix: Liquid JS vs. Nunjucks quick reference
Feature | LiquidJS | Nunjucks |
Variable assignment |
|
|
Block capture |
|
|
Filters | ` | filter:` |
Loop index |
|
|
Switch |
|
|
Parentheses | ❌ | ✅ |
Macros | ❌ | ✅ |