Data and JSON
Templates read two kinds of runtime data. Request and page state describe the visit itself, such as the query string and whether the page is the home page. Structured data describes the project and the current page as nested JSON. This guide shows how to read both and how to hand JSON to your own script.
Query-string values
{core.project.get.<query_key>} returns the value of a query-string parameter from the current request. The value is URL-decoded. If the same key appears more than once, the first value is used, and a key that is not present renders as an empty string.
| Token | Meaning | Example |
|---|---|---|
{core.project.get.<query_key>} | Value of that query parameter on the current request | {core.project.get.tag} |
{if core.project.get.<query_key>} | True when the parameter is present and not empty | {if core.project.get.tag}...{/if} |
The key is everything after get., so ?tag=popular is read with {core.project.get.tag}. Query values are commonly carried on filter and pagination controls.
<a href="?tag=popular" data-current-tag="{core.project.get.tag}">
Popular templates
</a>
{if core.project.get.page}
<p>Showing page {core.project.get.page}.</p>
{/if}
Use it when a link or form sends a parameter to the same page and the page should reflect it, for example an active filter, a search term, or a referral source.
Page context
Page context tokens describe where the current request landed.
| Token | Meaning | Rendered value |
|---|---|---|
{core.page.is_homepage} | True on the home page | 1 or empty |
{core.page.is_home} | Alias of is_homepage | 1 or empty |
{core.page.path} | Canonical path of the current page | /templates |
{core.is_homepage}, {core.path} | Short aliases | same as above |
Use is_homepage inside an {if}. Written on its own it prints 1 on the home page and nothing elsewhere.
{if core.page.is_homepage}
<h1 class="text-4xl">{brand.store_name}</h1>
{else}
<p class="text-sm text-[var(--muted)]">Home / {core.page.path}</p>
{/if}
Use page context to vary a hero on the home page, or to build a breadcrumb from the current path.
Nested JSON objects
Values exposed by the runtime are JSON, and a dot path walks into the nested objects. The same path works in a loop over an array.
| Path | Reads |
|---|---|
{page.schema.<key>} | A configured JSON-LD schema field for the current page |
{project.schema.<key>} | A configured project-wide JSON-LD schema field |
{brand.media.<key>} | A brand media URL such as square_logo |
{core.project.logo.desktop_dark} | A nested brand logo value |
<meta property="og:title" content="{page.schema.name}">
<meta property="og:description" content="{page.schema.description}">
{each project.schema.sameAs as=link}
<a href="{link}" rel="me">Profile</a>
{/each}
Use dot paths to read one field out of a larger JSON object, and {each} when a field holds an array. Schema fields only resolve when the project or page has JSON-LD configured; an unset field renders as empty string, so guard optional values with {if}.
Project variables that hold structured data
A project variable stores one saved text value. {{var.<name>}} is replaced with that value exactly as it was stored, so a variable can carry a longer text block or a JSON document, not only a short string. The token matches the variable name only, so nested fields inside a JSON value are not addressable by the token. The whole value is emitted.
| Token | Meaning |
|---|---|
{{var.<name>}} | The saved value of the project variable <name> |
<!-- {{var.store_hours}} = {"mon":"09:00-17:00","tue":"09:00-17:00"} -->
<div id="store-hours" data-hours='{{var.store_hours}}'></div>
Use a scalar variable for text you show directly in markup, and reserve a JSON value for a context that expects raw text. Because the value is inserted exactly as stored, choose attribute quoting that does not collide with the stored characters.
Sending JSON to a script
Tokens are not interpolated inside <script> elements or on* event-handler attributes, so a value cannot be written directly into a script. Put the value in a data- attribute instead and read it from the element in your script. A project variable that holds a JSON document is emitted whole, so the script can parse the attribute after the page loads.
<!-- {{var.footer_links}} = [{"label":"Docs","href":"/docs"},{"label":"Status","href":"/status"}] -->
<div id="footer-links" data-links='{{var.footer_links}}'></div>
<script>
const holder = document.querySelector("#footer-links");
const links = JSON.parse(holder.getAttribute("data-links"));
</script>
Use this when a script needs structured data from the project. The attribute carries the JSON and the script parses it after the page loads. For the rest of the method list, see Methods and formatters.
Extension tokens
The tokens on this page are the general storefront tokens. Tokens for an extension's own data, such as cart, checkout, products, portfolio, and blog, are documented under that extension's Templating section.