File structure

The parts of a .liqx file — frontmatter, the template body, styles, scripts and the schema.

A .liqx file looks like HTML with { expressions }. It has up to four parts, in this order:

---
const { settings } = section;
const title = settings.heading || shop.name;
---
<template>
  <section class="hero">
    <h1>{title}</h1>
    <If condition={settings.subheading !== ''}>
      <p>{settings.subheading}</p>
    </If>
  </section>
</template>
<style>
  .hero { min-height: {settings.height}vh; }
</style>
<schema>
{
  "name": "Hero",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading" },
    { "type": "text", "id": "subheading", "label": "Subheading" },
    { "type": "range", "id": "height", "label": "Height", "min": 40, "max": 100, "step": 5, "default": 80 }
  ]
}
</schema>

Frontmatter between --- lines at the very top: a small, safe subset of JavaScript that prepares values for the template. Optional. See Frontmatter.
The template: your HTML. Wrapping it in <template>…</template> is the convention in Sworen themes; the wrapper itself is not printed.
<style> and <script>: kept as written, with { expressions } filled in.
<schema>: the JSON that declares a section’s or block’s settings. It is read by Sworen and never printed. See Sections and blocks.

Expressions

Anything inside { } is an expression: a variable, a calculation, a call, or more HTML. See Expressions.

<a href={product.url}>{product.title}</a>
<p>{product.price | money}</p>

Comments

An expression that contains only a comment prints nothing:

{/* This line is not printed. */}

Named templates

A <template name="…"> is not printed where it stands. It defines a small component you can use elsewhere in the same file. See Components and snippets.

<template name="Badge">
  <span class="badge">{props.text}</span>
</template>

<template>
  <Badge text="New" />
</template>