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

Page Composition and Styling

Referencing a CSS Stylesheet

To apply CSS styling to a page in your theme, make sure that page’s code includes a reference to the stylesheet you want to use. This example does so using the {{partial}} and {{cdn}} custom Handlebars helpers:

{{#partial "head"}}
    <link href="{{cdn '/assets/css/invoice.css'}}" rel="stylesheet">

Template Composition

Template composition is a valuable Stencil feature. By defining blocks of overrideable content, your themes can insert templates on a per-page basis, while sharing code that is common to the whole theme.

Defining Content Blocks

A base template defines content blocks by name. The following snippet uses {{block}} custom Handlebars helpers to define three content blocks, respectively named head, hero, and page:

// templates/layout/base.html
<!DOCTYPE html>
        <title>{{ head.title }}</title>
        {{#block "head"}} {{/block}}
        <div class="body">
		    {{#block "hero"}} {{/block}}
		    <div class="container">
		        {{#block "page"}} {{/block}}
		    {{> components/common/modal}}

Replacing Content Blocks

Pages can use a base template, replacing the defined blocks with their own content. This example replaces content for the head and page blocks:

{{#partial "head"}}
    <link href="{{cdn '/assets/css/invoice.css'}}" rel="stylesheet">

{{#partial "page"}}
    <p>An invoice for a particular order would go here</p>
{{> layout/empty}}

Matching Partials with Blocks

We recommend that, for any given name defined within the template rendering path, you maintain a 1:1 mapping of partials to blocks.