> 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.

# Stencil Objects

Plan: Stencil Developer

Lesson 5 of 31 · 30 min

Stencil template objects expose dynamic page data. **Not all objects are available on every page; which objects are present depends on the page type.**

> **Info**
>
> **Note:** [GraphQL](/developer/docs/storefront/guides/graphql-storefront-api#querying-within-a-bigcommerce-storefront) can be used as an alternative to retrieve data that is not exposed on a certain page type.

This section reviews how to view a page's context while developing locally and how to access that context's data via Handlebars expressions and JavaScript.

Stencil objects are the individual JavaScript objects that are rendered onto a Stencil storefront.

## Stencil Theme Objects

Stencil theme objects expose dynamic page data. Not all objects are available on every page; which objects are present depends on the page type. Below is the link to the complete template object reference.

![Example: Product - Global Objects](/_fern-files/bigcommerce.docs.buildwithfern.com/d351aef9b8c8fb749803d72f1393cfd0ee8ff34f7cd1b76cef0573fbe3e38146/assets/learn/stencil-advanced/fP9xCAl6b01S_VLv_cQau5Q3mpTwR0y2d.png)

For a complete template object reference, see the [Global Objects - Reference Models](/developer/docs/storefront/stencil/themes/context/object-reference/schemas).

### Viewing a Page's Context

**Context is the data available to templates on a page**. To view a page's context while developing locally:

1. Get the template context in plaintext JSON for a page served locally by Stencil CLI
2. Add *debug=context* to the URL query string
3. Use *debug=bar* to get the template context JSON output to a rendered page

**Example:**

* `http://localhost:3000/?debug=context`
* `http://localhost:3000/?debug=bar`

![Viewing page context](/_fern-files/bigcommerce.docs.buildwithfern.com/82367aa58303a07950d6dfece338b281334cf0983122880356234557e971c446/assets/learn/stencil-advanced/808qYuvQFWnKW5X7_8VCVxcsRS3rrcbvJ.gif)

The code below is an example of using the fetch API to dump the context to the console:

```js showLineNumbers={false}
fetch(window.location.pathname + '?debug=context')
.then(res => res.json())
then(json => console.log(json))
```

![Console](/_fern-files/bigcommerce.docs.buildwithfern.com/67837e59d98a29187bd51625e96a821e9ffb3c780cc8f47e02119580bc4c4d7c/assets/learn/stencil-advanced/p0DITbfSAOYTSfxA_mWROjjPlcePUS_34.gif)

Viewing page context in Console.

### Using Handlebars

As a developer, you can use Handlebars syntax to access objects and use them to customize your Stencil theme.

Stencil Objects are categorized as either Global, Common, or Other, which is representative of the object's scope or where in the theme it can be accessed. **Global objects** are shared across the entire BigCommerce storefront. **Common objects** are shared across some but not all pages. **Other objects** are typically available in the context of a specific *page* type\_.

Below is an example used to access dynamic page data:

```jsx showLineNumbers={false}
{{#if page.sub_pages}}
<nav class="navBar navBar--sub">
    <ul class="navBar-section account-navigation">
    {{#each page.sub_pages}}
        <li class="navBar-item"><a class="navBar-action" href="{{url}}">{{title}}</a></li>
    {{/each}}
    </ul>
</nav>
{{/if}}
```

### Using PageManager JavaScript

JavaScript files in **assets/js/theme/** that extend the PageManager class have a context property for accessing the page context.

**Example:**

```jsx showLineNumbers={false}
// assets/js/theme/global.js
export default class Global extends PageManager {
    onReady() {
        cartPreview(this.context.secureBaseUrl, this.context.cartId);
        // ...
    }
    // ...
}
```

> **Info**
>
> To learn more about Stencil and JavaScript see [Adding JavaScript to your Stencil Theme.](/developer/docs/storefront/stencil/themes/javascript/extend)