A focused reference for Jualify Liquid API v1—package structure, templates, objects, filters, forms, schemas, and secure commerce boundaries that keep themes safe.
Browse 45 reference cards across 9 categories.
Try a broader term or switch back to all references.
Start here
The smallest useful map from a blank folder to a valid Jualify theme package.
Place theme.json at the ZIP root. Wrapper folders are rejected.
theme.json
layout/theme.liquid
templates/index.json
sections/hero.liquid
config/settings_schema.json
config/settings_data.json
locales/en.default.json
assets/theme.cssOutput uses double braces. Logic uses tag delimiters. Filters transform values.
{{ product.title }}
{% if product.available %}In stock{% endif %}
{{ product.price | money }}Files that fit together
Jualify uses a manifest, JSON templates, Liquid layouts, ordered sections, snippets, settings, locales, and assets.
Declare the Liquid engine, API version, default layout, capabilities, and every supported template.
{
"name": "Aurora",
"handle": "aurora",
"version": "1.0.0",
"author": "Your studio",
"engine": "liquid",
"theme_api_version": "1",
"layout": "theme",
"capabilities": ["ecommerce", "json_templates", "sections"],
"templates": ["index", "collection", "product", "cart"]
}Every ordered section ID must exist and its type must map to a Liquid section file.
{
"layout": "theme",
"sections": {
"header": {"type": "header", "settings": {}},
"hero": {"type": "hero", "settings": {"heading": "Hello"}},
"footer": {"type": "footer", "settings": {}}
},
"order": ["header", "hero", "footer"]
}Render application header content and the ordered template sections in the layout.
<!doctype html>
<html lang="{{ localization.language.code }}">
<head>
<meta charset="utf-8">
<title>{{ page_title }}</title>
{{ content_for_header | raw }}
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
</head>
<body>{{ content_for_layout | raw }}</body>
</html>indexcollectionproductcartcheckoutorder-successsearchpagepassword404customers/*Language essentials
Core Liquid provides variables, conditions, loops, capture, comments, and safe output escaping.
{% assign card_title = product.title %}
{% capture price_label %}
{{ product.price | money }}
{% endcapture %}
<h3>{{ card_title }}</h3>
<span>{{ price_label }}</span>{% if product.available %}
<span>Ready to ship</span>
{% elsif product.inventory_policy == 'continue' %}
<span>Pre-order</span>
{% else %}
<span>Sold out</span>
{% endif %}{% for item in products limit: 8 %}
<a href="{{ item.url }}">{{ item.title }}</a>
{% else %}
<p>No products found.</p>
{% endfor %}rawOutput is escaped by default. Reserve raw for renderer-owned or Jualify-sanitized HTML.
{{ settings.heading }}
{{ product.description | raw }}
{{ page.body | raw }}
{{ content_for_layout | raw }}Transform and compose
These are the Jualify-specific additions to Liquid core. Use only the helpers documented in this contract.
asset_url and image_url<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
<script src="{{ 'theme.js' | asset_url }}" defer></script>
<img src="{{ product.image | image_url }}"
alt="{{ product.image.alt | default: product.title }}">Pass a product, collection, or blog feature-image object to image_url and choose the most appropriate stored size. An omitted, unsupported, or unavailable size safely uses the original image.
originalUploaded source imagelarge1024px widemedium600px widethumbnail300px widesmall100px wide{% assign product_image = product.image %}
<img src="{{ product_image | image_url: 'medium' }}"
alt="{{ product.image.alt | default: product.title }}">
{{ product_image | image_url: 'thumbnail' }}{% assign product_icon = product.image | image_url: 'small' %}
{% assign collection_card = collection.image | image_url: 'thumbnail' %}
{% assign article_icon = blog.featured_image | image_url: 'small' %}small is a 100px-wide variant for compact UI. collection.image and blog.featured_image support the same five size options; blog.image remains a compatibility URL alias.
moneyFormats a numeric value with the tenant base currency symbol and configured symbol position.
{{ product.price | money }}
{% if product.compare_at_price > product.price %}
<s>{{ product.compare_at_price | money }}</s>
{% endif %}t, strip_html, truncate{{ 'products.add_to_cart' | t }}
{{ product.description | strip_html | truncate: 120 }}Locale lookup falls back to English when available.
route_url and tenant_url{{ 'front.user.detail.view' | route_url }}
{{ '/collections/summer' | tenant_url }}Prefer a supplied routes.* or object url value whenever one exists.
render, include, section{% render 'product-card', product: product %}
{% include 'snippets/breadcrumbs.liquid' %}
{% section 'announcement' %}References must be static and quoted. Dynamic paths and traversal are rejected.
csrf_field<form method="post" action="{{ cart.update_url }}">
{% csrf_field %}
…
</form>Stable storefront data
Top-level objects are normalized by Jualify. Use the documented contract rather than implementation internals.
shopshop.nameStore nameshop.urlCanonical tenant URLshop.logo_urlMerchant logoshop.currency_codeBase currencyshop.timezoneIANA timezoneshop.currency_symbolDisplay symbolsettings and section{{ settings.brand_color }}
{{ section.id }}
{{ section.settings.heading }}
{% for block in section.blocks %}
{{ block.settings.title }}
{% endfor %}routesroutes.root_urlHomeroutes.search_urlProduct searchroutes.cart_urlCart pageroutes.checkout_urlCheckout displayroutes.checkout_submit_urlCheckout POSTroutes.account_urlCustomer accountlocalization and menus.main<html lang="{{ localization.language.code }}"
dir="{% if localization.language.rtl %}rtl{% else %}ltr{% endif %}">
{% for link in menus.main %}
<a href="{{ link.url }}" target="{{ link.target }}">
{{ link.title }}
</a>
{% endfor %}template, request, themetemplate.nameCurrent template handlerequest.canonical_urlSEO-safe page URLrequest.pathCurrent pathrequest.queryQuery valuestheme.versionInstalled theme versionCatalog presentation
Products, variants, collections, search, media, and pagination arrive as presentation-safe objects.
product.titleLocalized titleproduct.slugStable SEO slugproduct.urlCanonical supplied URLproduct.priceActive numeric priceproduct.compare_at_priceOriginal sale priceproduct.availablePurchasable stateproduct.inventory_policydeny / continue{% assign image = product.featured_media %}
{% if image.url %}
<img src="{{ image.url | image_url }}"
alt="{{ image.alt | default: product.title }}"
width="{{ image.width }}"
height="{{ image.height }}">
{% endif %}{% unless product.has_only_default_variant %}
{% for variant in product.variants %}
<button data-url="{{ variant.add_to_cart_url }}"
{% unless variant.available %}disabled{% endunless %}>
{{ variant.title }} — {{ variant.price | money }}
</button>
{% endfor %}
{% endunless %}collection<h1>{{ collection.title }}</h1>
{% for product in products %}
<a href="{{ product.url }}">{{ product.title }}</a>
{% endfor %}Use collection.url; canonical collection URLs are /collections/{slug}.
search<form action="{{ routes.search_url }}" method="get">
<input name="search" value="{{ search.term }}">
</form>
{% if search.performed %}
{{ search.results_count }} results
{% endif %}{% if pagination.has_previous %}
<a href="{{ pagination.previous_url }}">Previous</a>
{% endif %}
<span>{{ pagination.current_page }} / {{ pagination.last_page }}</span>
{% if pagination.has_next %}
<a href="{{ pagination.next_url }}">Next</a>
{% endif %}Server-owned transactions
Render supplied values and post to supplied endpoints. Never calculate or authorize transaction state in the theme.
{% if cart.empty %}
<p>Your cart is empty.</p>
{% else %}
{% for item in cart.items %}
<a href="{{ item.url }}">{{ item.title }}</a>
<span>{{ item.line_price | money }}</span>
{% endfor %}
<strong>{{ cart.total_price | money }}</strong>
{% endif %}<form method="post" action="{{ cart.update_url }}">
{% csrf_field %}
{% for item in cart.items %}
<input type="number" name="qty[]"
value="{{ item.quantity }}" min="0">
{% endfor %}
<button type="submit">Update cart</button>
</form>checkout.submit_urlSecure POST endpointcustomer_detailSafe customer summarybilling_addressBilling valuesshipping_addressShipping valuesshipping_methodsSelectable methodspayment_methodsCustomer-visible methodscheckout.total_priceDisplay-only total<form method="post" action="{{ checkout.submit_url }}"
enctype="multipart/form-data">
{% csrf_field %}
<input name="billing_fname" value="{{ billing_address.first_name }}">
<select name="shipping_charge">…</select>
<input type="radio" name="payment_method" value="cod">
<button type="submit">Place order</button>
</form>The compatibility shipping prefix is intentionally spelled shpping_*.
customer{% if customer.logged_in %}
<p>Hello, {{ customer.name }}</p>
<a href="{{ customer.orders_url }}">
Orders ({{ customer.orders_count }})
</a>
{% else %}
<a href="{{ routes.login_url }}">Sign in</a>
{% endif %}order_success{% if order_success.has_order %}
<h1>Order {{ order_success.order_number }}</h1>
<p>{{ order_success.payment_status }}</p>
<p>{{ order_success.total | money }}</p>
<a href="{{ order_success.order_url }}">View order</a>
{% endif %}Merchant customization
Every section file ends with exactly one static JSON schema block. The schema drives validation and customizer controls.
<section>
<h2>{{ section.settings.heading }}</h2>
</section>
{% schema %}
{
"name": "Feature",
"settings": [
{"id": "heading", "type": "text", "label": "Heading", "default": "Featured"}
],
"presets": [{"name": "Feature"}]
}
{% endschema %}texttextarearichtextcheckboxnumberrangeselectradiocolorurlimagecollectionproductpagemenuheaderparagraph
{% for block in section.blocks %}
<article data-block-id="{{ block.id }}">
<h3>{{ block.settings.title }}</h3>
<p>{{ block.settings.text }}</p>
</article>
{% endfor %}Define allowed block types and their settings in the same terminal schema object.
*.schema.json filePublish with confidence
Compatibility, maintenance access, checkout boundaries, and a short preflight checklist.
Use only the tags, filters, forms, blocks, and storefront objects documented by Jualify Liquid API v1. Undocumented helpers and integrations are unsupported.
storefront_maintenance{% if storefront_maintenance.password_required %}
<form method="post" action="{{ storefront_maintenance.unlock_url }}">
{% csrf_field %}
<input type="password" name="storefront_password" required>
<button type="submit">Enter store</button>
</form>
{% endif %}theme.json at ZIP root.When in doubt, use the documented object, URL, or mutation endpoint rather than recreating application behavior in Liquid or JavaScript.