> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# YAML Front Matter

Plan: Stencil Developer

Lesson 6 of 31 · 5 min

YAML Front Matter allows developers to inject additional Stencil objects into the page context. BigCommerce Stencil themes utilize YAML front matter in template pages.

> **Info**
>
> When utilized, Front Matter must be the opening text of a file and must take the form of a valid YAML set between triple-dashed lines.

Below is an example of YAML Front Matter in the Cornerstone ***home.html* file**.

![YAML Front Matter example](/_fern-files/bigcommerce.docs.buildwithfern.com/607291e23e658cf2f47731cc9e449600af06261270b8d5fa01ed925ed508653b/assets/learn/stencil-advanced/ueer4_Gn_Hm_WCd3_GErKpHijPKJvlRGe.gif)

> **Info**
>
> **Note**: In the example above, *theme* settings\_ refers to where the object is defined in the settings area of the *config.json* file --- *.homepage\_new\_products\_count* is an arbitrary name given to a key in the config file. See [Theme Styles Configuration](/developer/docs/storefront/stencil/themes/context/object-reference/elements) for more information.

## Resources

* [Technology Stack](/developer/docs/storefront/stencil/getting-started/tech-stack)
* [A Beginner's Guide to Handlebars](https://www.sitepoint.com/a-beginners-guide-to-handlebars/)
* [Handlebars Helpers Reference](/developer/docs/storefront/stencil/themes/context/handlebars-reference)
* [Stencil Template Objects](/developer/docs/storefront/stencil/themes/context/object-reference/schemas)
* [YAML Front Matter](/developer/docs/storefront/stencil/getting-started/tech-stack#yaml-front-matter-overview)