Frontmatter

The block between --- lines at the very top of a file runs before the template. Use it to pick values out of objects, compute labels and stop early.

---
const { settings } = section;
const { product } = props;
let label = settings.button_label || 'Order now';
const saving = product.compare_at_price - product.price;
if (saving > 0) {
  label = label + ' — save ' + (saving / 100);
}
---

What you can write

• const, let and var, including object destructuring with defaults: const { heading, limit = 8 } = section.settings;
• Assignment: =, +=, -=, *=, /=, %=.
• if / else if / else, and switch / case / default.
• Functions: function label(value, fallback = '') { … } and arrow functions.
• The list and text methods: map, filter, join, split…

Stopping early

A bare return; stops the file: nothing is printed. Use it as a guard:

---
if (!product || !product.available) {
  return;
}
---

The rules

Frontmatter is sandboxed so a theme can’t do anything unsafe. These are refused when the file is read:

• loops (for, while, do), new, class, import, export;
• calling any method other than the list and text methods;
• the names eval, Function, globalThis, window, document, process, require, fetch, import, exports, module, alert, confirm, prompt, constructor, __proto__ and prototype;
• HTML: markup belongs in the template.

root always means the whole page data and can’t be redefined.