Qalab Template Language

Qalab is the template language used in Qumra themes. It's similar to Liquid and Nunjucks, designed for building dynamic storefronts.

Basic Syntax

Output

Use double curly braces to output values:

{{ product.title }}
{{ settings.mainColor }}
{{ 'Hello' | upcase }}

Tags

Use {% %} for logic and control flow:

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <span>Out of Stock</span>
{% endif %}

{% for item in cart.items %}
  <div>{{ item.title }}</div>
{% endfor %}

Filters

Transform values using the pipe | character:

{{ product.title | upcase }}
{{ product.price | money }}
{{ 'style.css' | assets }}

Available Objects

Access store data through these objects:

Object	Description
product	Current product
collection	Current collection
cart	Shopping cart
customer	Logged-in customer
store	Store information
settings	Theme settings

View all objects →

Common Filters

Filter	Example	Output
money	{{ 1000 | money }}	$10.00
assets	{{ 'style.css' | assets }}	/assets/style.css
translate	{{ 'cart.title' | translate }}	Shopping Cart
date	{{ 'now' | date: '%Y' }}	2024

View all filters →

Common Tags

Tag	Usage
if / else	Conditional rendering
for	Loop through arrays
include	Include other templates
ui	Include UI components
template	Include header/footer

View all tags →

Quick Examples

Product Card

<div class="product-card">
  <img src="{{ product.image }}" alt="{{ product.title }}">
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
  {% if product.available %}
    <button>Add to Cart</button>
  {% endif %}
</div>

Using Settings

<header style="background: {{ settings.headerColor }}">
  <h1>{{ store.name }}</h1>
</header>

Translation

<h2>{{ 'products.title' | translate }}</h2>
<button>{{ 'cart.add' | translate }}</button>

Learn More

• Filters - Transform values
• Tags - Control flow and logic
• Objects - Available data