Getting Started
About Stencil
Transitioning to Stencil
Installing Stencil
Authentication & Tokens
Running Stencil Locally
Advanced Installation Options
Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars and Stencil
Handlebars.js Overview
Handlebars Helpers
Stencil Object Model
Stencil Objects

Calling Theme-Wide Variables via Handlebars

Calling Theme-Wide Variables via Handlebars

As shown in an earlier Quick Start example, you can reference variables from config.json in a theme template’s front matter. But you can also call any config.json variable within a template’s HTML/Handlebars body, by using a Handlebars expression that precedes the variable with theme_settings.

Below, from Cornerstone’s templates/pages/home.html, is a code snippet that provides three examples:

<div class="main full">
    {{#if products.featured}}
        {{> components/products/featured products=products.featured

    {{#if products.top_sellers}}
        {{> components/products/top products=products.top_sellers

        {{> components/products/new 

Above, each if conditional statement tests whether one of the three products attributes (Featured Products, Top Sellers/Popular Brands, or New Products) is declared within this template’s front matter. If so, for the corresponding section on this page, it sets the local column count to match the theme-wide theme_settings...._column_count value defined in config.json.