Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars Syntax and Helpers
Handlebars.js
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
            columns=theme_settings.homepage_featured_products_column_count}}
    {{/if}}

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

    {{#if products.new}}
        {{> components/products/new products=products.new 
            columns=theme_settings.homepage_new_products_column_count}}
    {{/if}}
</div> 

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.