Handlebars Helpers Reference

Custom helpers

BigCommerce’s open source helpers defined in paper-handlebars/helpers/ (GitHub).

Helper	Category	Description
limit	array	Limits array to second argument.
pluck	array	Uses search key to get values from collections.
cdn	assets	Url transform for content delivery networks.
money	currency	Formats number length, thousands delimiter, and decimal delimiter.
getFontLoaderConfig	fonts	Returns font loader config as JSON string.
getFontsCollection	fonts	Returns `<link>` elements for configured fonts.
encodeHtmlEntities	html	Encodes HTML entities.
nl2br	html	Converts newline characters to `<br>` tags.
pre	html	Renders preformatted text.
resourceHints	html	Prefetch Google fonts.
stylesheet	html	Renders link tag for inserting a stylesheet.
lang	i18n	Maps keys to translation files.
langJson	i18n	Returns language translation keys as JSON string.
getContentImage	images	Returns sized image URL from store `/content` directory.
getContentImageSrcset	images	Returns source set of URLs for images in `/content`.
getImage	images	Returns image URL for specified size.
getImageManagerImage	images	Returns sized image URL for `/product_images/uploaded_images images..`
getImageManagerImageSrcset	images	Returns image srcset for `/product_images/uploaded_images` images.
getImageSrcset	images	Returns single image URL or list of URLs for different sizes.
any	logic	Renders block if any params are true.
all	logic	Renders block if all params are true.
compare	logic	Compares values with JavaScript operators, including `typeof`.
contains	logic	Renders block if first param is in second param.
for	logic	Iterates for range `a` to `b`.
if	logic	Renders block if statement is true.
or	logic	Renders block if on more param evaluates to true.
unless	logic	Renders block if statement is false.
concat	string	Concatenates two strings.
join	string	Joins array of string items; returns a string.
json	string	`JSON.stringify()`s an object.
replace	string	Replaces all instances of first param in second param.
setURLQueryParam	string	Appends keys values to a URL.
stripQuerystring	string	Removes query string.
toLowerCase	string	Converts string to lowercase.
truncate	string	Truncates a string.
block	template	Defines a content block.
dynamicComponent	template	Inserts dynamic partial at the path passed in.
inject	template	Injects key values into jsContext.
jsContext	template	Returns JSON for all data injected by inject helper.
partial	template	Overrides content defined by a block helper.
region	template	Specifies a widget region.
assignVar	variables	Saves value to a variable.
getVar	variables	Returns variable value.
decrementVar	variables	Decrements a variable by 1.
incrementVar	variables	Increments a variable by 1.

It limits the number of items returned from an array variable, and returns a new array.

Parameters

data: {Array}
limit: {Number}

Example

Assume that {{cart.items}} would return 10 items. You could use this helper to limit that behavior to only the first four items, by specifying:

{{#each (limit cart.items 4)}}
    <li class="previewCartItem">
        <div class="previewCartItem-image">
            {{#if type '==' 'GiftCertificate'}}
                <img src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
            {{else}}
                {{> components/common/responsive-img
                    image=image
                    fallback_size=../../theme_settings.productthumb_size
                    lazyload=../../theme_settings.lazyload_mode
                    default_image=../../theme_settings.default_image_product
                }}
            {{/if}}
  ...

See it in GitHub.

See it in Cornerstone.

For one specified search key(s), it retrieves corresponding values from some or all elements in a specified collection.

The pluck helper returns the retrieved values in a comma-separated string. This helper’s general form is:

{{pluck ([limit] <collection> [<limit-value>]) '<search-key>'}}

Parameters

limit, limit-value: Optional parameters to limit the number of results returned.
collection: The collection to search.
search-key: The string to search for.

Example

If each category in categories contains an image object, use dot notation to access the image’s children:

categories: [
  { "id": 1, "name": "Bakeware", "image": { "data": "http://...", "alt": "Bakeware image"} },
  { "id": 2, "name": "Cookware", "image": { "data": "http://...", "alt": "Cookware image"} },
  { "id": 3, "name": "Cutlery", "image": { "data": "http://...", "alt": "Cutlery image"} }
]

Handlebars statement:

{{pluck (limit categories 2) 'image.data'}}
<!-- Returns a comma-separated list of image URLs -->

See it in GitHub.

See it in Cornerstone.

A URL transformer for content delivery networks.

Example

When you reference static assets that you have locally staged outside your <theme-name> directory and uploaded using WebDAV, place the webdav: prefix before each corresponding assetPath parameter. For example, a link like:

<img src="{{cdn 'webdav:img/image.jpg'}}">

will be transformed to a result like:

<img src="https://cdn.bcapp/3dsf74g/content/img/image.jpg">

The presumed WebDAV root directory is /content/. (So, in this example, the image.jpg file has been uploaded to the WebDAV /content/ directory.) The presumed local directory is assets/, so you can omit that path when referencing its contained files or subdirectories.

See it in GitHub.

See it in Cornerstone.

CDN custom endpoints

You can define custom CDN endpoints to use with the cdn helper. This facilitates including large, high-resolution image assets in themes, without exceeding BigCommerce’s 50 MB limit when bundling the theme for upload to BigCommerce.

You could use a local version of the image in development, and a version on a CDN (e.g. Imgix) in production. To do so, define custom CDN endpoints in your theme’s config.json file, as highlighted in the example below:

{
  "name": "Cornerstone",
  "version": "1.3.5",
  "settings": {
    "homepage_new_products_count": 12,
    "homepage_featured_products_count": 8,
    "cdn": {
      "customcdn": "https://bigcommerce.customcdn.net"
          }
     }
}

After defining an endpoint, you can use the short name in the same way as you would use a webdav: abbreviation:

<img src="{{cdn 'customcdn:img/image.jpg'}}" />

In local development, that helper would return:

<img src="/assets/cdn/customcdn/img/image.jpg"/>

Whereas in production, it would return:

<img src="https://bigcommerce.customcdn.net/img/image.jpg" />

As highlighted above, the helper is configured to rewrite local URLs to a assets/cdn/ subfolder. The stencil bundle command will exclude this local assets/cdn/ subfolder from the bundle that it creates. This filtering circumvents the 50 MB size limit on the resulting .zip file.

Format number length, thousands delimiter, and decimal delimiter.

See it in GitHub.

See it in Cornerstone.

Returns font loader config as JSON string.

See it in GitHub.

See it in Cornerstone.

Returns <link> elements for configured fonts.

See it in GitHub.

See it in Cornerstone.

Encodes HTML entities.

See it in GitHub.

See it in Cornerstone.

Converts newline characters to <br> tags.

Example

{{nl2br settings.address}}

settings.address:

"settings": {
  "address": "\r\n685 Market St\r\nSan Francisco\r\n94105\r\nCA\r\n"
}

Result:

"<br>685 Market St<br>San Francisco<br>94105<br>CA<br>"

See it in GitHub.

See it in Cornerstone.

Renders preformatted text.

See it in GitHub.

See it in Cornerstone.

Pre-fetches fonts; currently only supports Google fonts.

Parameters

returns: Outputs a formatted link tag for DNS-prefetch.

Example

{{{resourceHints}}}
//=> <link rel="dns-prefetch" href="https://fonts.gstatic.com/" >

See it in GitHub.

See it in Cornerstone.

It renders a link tag to insert a stylesheet into your theme. (This is required if you want Theme Editor to rewrite the stylesheet file when a merchant customizes their theme.) This helper returns an HTML string.

Parameters

path: String containing the path to the theme’s CSS stylesheet file.
Other parameters are optional, appended in the form: key="value".

Example

{{{stylesheet "assets/css/style.css" class="myStylesheet"}}}

See it in GitHub.

See it in Cornerstone.

Maps keys to translation files, based on the locale indicated by the visitor’s browser. Its parameters are the following keys:

translationKey: a string.
options: key-value pairs.

Example

<label class="form-label" for="search_query_adv">
  {{lang 'forms.search.query' }}
  <small>{{lang 'common.required' }}</small>
</label>

See it in GitHub.

See it in Cornerstone.

Returns language translation keys as JSON string.

See it in GitHub.

See it in Cornerstone.

Returns URL for an image uploaded to /dav/content/.

Parameters

a {String}: Image path relative to /dav/content/
width {Int}: Width in pixels
height {Int}: Height in pixels

Example

<!-- Original image URL returned if no size or invalid size is passed in -->
{{getContentImage "asset.jpg"}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/content/asset.jpg  -->

{{getContentImage "asset.jpg" width="a" height="a"}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/content/asset.jpg  -->


<!-- Sized image URL returned if valid height and/or width passed in -->
{{getContentImage "asset.jpg" width=123 height=321}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123x321/content/asset.jpg -->

{{getContentImage "asset.jpg" width=123}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123w/content/folder/asset.jpg -->

See it in GitHub.

Returns a srcset for an image uploaded to /dav/content/.

Parameters

a {String}: Image path relative to /dav/content/

Example

{{getContentImageSrcset "asset.jpg"}}
<!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/content/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/content/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/content/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/content/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/content/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/content/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/content/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/content/asset.jpg 2560w
-->

{{getContentImageSrcset "folder/asset.jpg" width=123}}
<!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/content/folder/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/content/folder/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/content/folder/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/content/folder/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/content/folder/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/content/folder/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/content/folder/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/content/folder/asset.jpg 2560w
 -->

See it in GitHub.

Returns an <img> tag src value for images of the specified size. Values for the size parameter are defined in the settings array in config.json.

Parameters

stencilImage: a StencilImage.
size: a string referencing a key in the theme_settings object.
defaultImage (optional): a string.

You can use the optional defaultImage parameter to specify an image that will be displayed in cases where the passed stencilImage value is null.

Example

{{getImage image "thumbnail"}}

See it in GitHub.

See it in Cornerstone.

Returns an Image Manager image URL for an image uploaded to /dav/product_images/uploaded_images.

Parameters

a {String}: Image path relative to /dav/product_images/uploaded_images
width {Int}: Width in pixels
height {Int}: Height in pixels

Example

<!-- Original image URL returned if no size or invalid size is passed in -->
{{getImageManagerImage "asset.jpg"}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/image-manager/asset.jpg  -->

{{getImageManagerImage "folder/asset.jpg" height=123}} <!-- height must be accompanied by width -->
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/image-manager/folder/asset.jpg  -->


<!-- Sized image URL returned if valid height and/or width passed in -->
{{getImageManagerImage "asset.jpg" width=123}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123w/image-manager/asset.jpg -->

{{getImageManagerImage "folder/asset.jpg" width=123 height=321}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123x321/image-manager/folder/asset.jpg -->

See it in GitHub.

See it in Cornerstone.

Returns an Image Manager image srcset for an image uploaded to /dav/product_images/uploaded_images.

Parameters

a {String}: Image path relative to /dav/product_images/uploaded_images

Example

{{getImageManagerImageSrcset "asset.jpg"}}
<!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/image-manager/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/image-manager/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/image-manager/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/image-manager/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/image-manager/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/image-manager/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/image-manager/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/image-manager/asset.jpg 2560w
 -->

{{getImageManagerImageSrcset "folder/asset.jpg" width=123}}
 <!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/image-manager/folder/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/image-manager/folder/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/image-manager/folder/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/image-manager/folder/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/image-manager/folder/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/image-manager/folder/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/image-manager/folder/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/image-manager/folder/asset.jpg 2560w
 -->

See it in GitHub.

See it in Cornerstone.

The getImageSrcset helper is a replacement for getImage which allows you to generate either a single image URL (for an <img> src) or a list of image sizes for srcset. Srcset allows you to specify a list of sizes from which the browser may choose, based on the expected size of the image on the page, the device’s pixel density, and other factors.

Similar to getImage, it accepts an stencilImage parameter, and optionally, a defaultImage to use as a fallback.

Parameters

stencilImage: a StencilImage
defaultImage : a fallback image URL to use if the StencilImage is undefined.
Image sizes specified as named parameters on the helper

You can then specify what sizes you want as named arguments on the helper.

Examples

Default sizes

By specifying use_default_sizes=true on the helper, a srcset string will be constructed with a set of sizes chosen by BigCommerce to be optimal for most uses.

{{getImageSrcset image use_default_sizes=true}}
{{getImageSrcset image "https://place-hold.it/500x300" use_default_sizes=true}}

Default sizes:

'80w': '80w',
'160w': '160w',
'320w': '320w',
'640w': '640w',
'960w': '960w',
'1280w': '1280w',
'1920w': '1920w',
'2560w': '2560w',

Single 1x size

{{getImageSrcset image 1x=theme_settings.zoom_size}}
{{getImageSrcset image 1x="1280x800"}}
{{getImageSrcset image 1x="1280w"}}

By specifying a single size as the ‘1x’, size, you can choose to get an image at any size of your choosing. You can reference a value from the theme_settings object (similar to getImage), or you can specify your own size inline. Note that getImageSrcset does not require theme_settings keys to be wrapped in quotes; they should be referenced directly.

Pixel density

{{getImageSrcset image 1x="1280w" 2x="2560w"}}
{{getImageSrcset image 1x="800w" 1.5x="1200w" 2x="1600w"}}
{{getImageSrcset image 1x="640x640" 2x="1280x1280"}}

By specifying several sizes using the pixel density descriptor, you can generate a srcset of different image resolutions for different pixel density screens as described here. For example, you can specify a 2x image for Retina screens, and a 1x image for normal screens.

As above, you can reference theme_settings keys or specify your own size inline.

Inherent width

<img src="{{getImage image 'default'}}" srcset="{{getImageSrcset image 100w='100w' 200w='200w' 300w='300w'}}" />

<!-- =>
<img src="https://cdn11.bigcommerce.com/s-abc123/images/stencil/640x640/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2" srcset="https://cdn11.bigcommerce.com/s-abc123/images/stencil/100w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 100w, https://cdn11.bigcommerce.com/s-abc123/images/stencil/200w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 200w,https://cdn11.bigcommerce.com/s-abc123/images/stencil/300w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 300w" />
-->

<img src="{{getImageSrcSet image 1x='1000x1000'}}" srcset="{{getImageSrcset image 1x='1000x1000' 2x='2000x2000'}}" />

<!-- =>
<img src="https://cdn11.bigcommerce.com/s-abc123/images/stencil/640x640/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2" srcset="https://cdn11.bigcommerce.com/s-abc123/images/stencil/100w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 100w, https://cdn11.bigcommerce.com/s-abc123/images/stencil/200w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 200w,https://cdn11.bigcommerce.com/s-abc123/images/stencil/300w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 300w" />
-->

By specifying several sizes using the inherent width descriptor, you can generate a srcset of different image resolutions based on width, which can in turn be selected by the browser based on the expected size of the image when the page is painted. It is recommended to use this together with a sizes attribute on the <img> as described here. In Cornerstone, this is handled automatically via JavaScript.

As above, you can reference theme_settings keys or specify your own size inline.

See it in GitHub.

See it in Cornerstone.

Renders block if one or more parameters is true. Parameters can be of different types (strings, numbers, arrays, or collections).

Example

The any helper is invoked as shown here:

{{#any items selected=true}}
  <!-- block to display if any items have selected=true -->
{{/any}}

A usage example is templates/components/category/shop-by-price.html, a category page in Stencil’s Cornerstone base theme that does not have faceted search turned on. Shoppers will see “Shop by price” filters instead of product filters.

In this component, the {{#any... helper is used to determine whether a shopper has selected one of the filters, and whether a “reset” button needs to be displayed:

{{#any shop_by_price selected=true}}
    <li class="navList-item">
        <a href="{{category_url}}" class="navList-action">
            {{lang 'category.reset'}}
        </a>
    </li>
{{/any}}

See it in GitHub.

See it in Cornerstone.

Renders block if all parameters are true. Parameters can be of different types (strings, numbers, arrays, or collections).

Example

{{#all items theme_settings.optionA theme_settings.optionB}}
  ... /* block to display, if all items evaluate to true */
{{/all}}

{{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
    <li class="tab">
        <a class="tab-title" href="#tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}">{{sanitize theme_settings.pdp-custom-fields-tab-label}}</a>
    </li>
{{/all}}

See it in GitHub.

See it in Cornerstone.

Render block if comparison of first and third parameter returns true.

Parameters

a {}
operator {}: The operator to use. Operators must be enclosed in quotes: “>”, “=”, “<=”, and so on.
- ==
- ===
- !=
- !===
- <
- >
- <=
- >=
- typeof
b {}
options {Object}: options object
returns {String}: Block, or if specified the inverse block is rendered if falsey.

See it in GitHub.

See it in Cornerstone.

Renders the block if collection has the given value, using strict equality (===) for comparison, otherwise the inverse block is rendered (if specified). If a startIndex is specified and is negative, it is used as the offset from the end of the collection.

Params

collection {Array|Object|String}: The collection to iterate over.
value {any}: The value to check for.

Example

<!-- array = ['a', 'b', 'c'] -->
{{#contains array "d"}}
  This will not be rendered.
{{else}}
  This will be rendered.
{{/contains}}

See it in GitHub.

See it in Cornerstone.

Repeats block for range from index a to element b.

Parameters

a: starting integer
b: ending integer

In particular, this helper is limited to 100 iterations, in order to protect against infinite loops.

The for helper has the following syntax, where parameters <from> and <to> are numbers, and <context> is an object:

Example

{{#for 1 12}}
    {{lang (concat 'common.short_months.' $index)}}
{{/for}}

See it in GitHub.

See it in Cornerstone.

Renders if block when if-statement evaluates to true; otherwise renders else block.

Example

{{#if page_type '===' 'account_order'}}
    <li class="navBar-item is-active">
        <a class="navBar-action" href="{{urls.account.orders.all}}">{{lang 'account.nav.orders'}}</a>
    </li>
{{else}}
    <li class="navBar-item is-active">{{lang 'account.nav.orders'}}</li>
{{/if}}

See it in GitHub.

See it in Cornerstone.

Renders block if on more param evaluates to true.

Parameters

The or operator’s parameters are one or more strings, numbers, arrays, or collections. Parameters can be of mixed types.

Example

{{#or 1 0 0 0 0 0 0}}
<!-- 1 evaluates to true, so block rendered-->
{{/or}}

{{#or options configurable_fields}}
    <a href="#" data-item-edit="{{id}}">{{lang 'cart.checkout.change'}}</a>
{{/or}}

See it in GitHub.

See it in Cornerstone.

Renders block if statement is false; does not support operators for comparison expressions.

Example

{{#each category_results}}
<li class="category-suggestion">
    {{#each this}}
        <a href="{{url}}">{{name}}</a>
        {{#unless @last}} > {{/unless}}
    {{/each}}
</li>
{{/each}}

See it in GitHub.

See it in Cornerstone.

Concatenates two strings.

Example

{{concat breadcrumbs.[0].name breadcrumbs.[0].url}}

See it in GitHub.

See it in Cornerstone.

Joins an array of string elements into a single string.

Parameters

values: {Array}
separator: {String}
limit=<number>: An optional limit.

Example

{{#if facets.length '>' 2}}
    {{lang 'search.faceted.browse-by'}} {{ join (pluck facets 'title') ', ' limit=2 }} &amp; {{ toLowerCase (lang 'search.faceted.more') }}
{{/if}}

See it in GitHub.

See it in Cornerstone.

JSON.stringify()s an object.

Joins two strings.

Example

{{json blog}}

<!-- //=>
{
    "name": "Blog",
    "recent_posts": [{...}],
    "url": "/blog/"
}
-->

See it in GitHub.

See it in Cornerstone.

Replaces all instances of first param in second param with the child block.

Example

Replace all instances of %%Syndicate%% in page.content with {{> components/page/rss_feed}}:

{{#replace '%%Syndicate%%' page.content}}
    {{> components/page/rss_feed}}
{{else}}
    <p>{{{page.content}}}</p>
{{/replace}}

See it in GitHub.

See it in Cornerstone.

Appends keys values to a URL.

Parameters

key {String}: The query parameter key.
value {Number}: The query parameter value of the stated key.
url {String}: The URL of the query parameter.
returns {String}: A formatted URL query parameter.

Example

{{setURLQueryParam "http://example.com/image.jpg" "c" "2"}}
<!-- => http://example.com/image.jpg?c=2 -->

See it in GitHub.

See it in Cornerstone.

Strips query string from URL.

Example

{{stripQuerystring "http://example.com?tests=true"}}
<!-- => http://example.com -->

See it in GitHub.

See it in Cornerstone.

Converts string to lowercase.

Example

{{toLowerCase head.title}}

See it in GitHub.

See it in Cornerstone.

Truncates a string.

Parameters

str {String}: The string you want to truncate.
length {Number}: The desired length of the returned truncated string.
returns {String}: The truncated string.

Example

{{truncate "This will be truncated to only the first part of the sentence." 22}}
<!-- => This will be truncated -->

See it in GitHub.

See it in Cornerstone.

Defines a block of content; can be overwritten by a partial.

Example

<div class="container">
    {{#block "page"}} {{/block}}
</div>

See it in GitHub.

See it in Cornerstone.

Inserts dynamic partial at the path passed in.

Example

{{#each forms.create_account.address_fields }}
    {{{dynamicComponent 'components/common/forms'}}}
{{/each}}

See it in GitHub.

See it in Cornerstone.

Injects key values into jsContext.

Example

{{inject "myProductName" product.title}}

<script>
var jsContext = JSON.parse({{jsContext}});
console.log(jsContext.myProductName);
// => "BigCommerce Coffee Mug"
</script>

{{inject "categoryProductsPerPage" theme_settings.categorypage_products_per_page}}

See it in GitHub.

See it in Cornerstone.

Returns JSON for all data injected by inject helper.

Example

{{inject "myProductName" product.title}}

<script>
var jsContext = JSON.parse({{jsContext}});
console.log(jsContext.myProductName);
// => "BigCommerce Coffee Mug"
</script>

See it in GitHub.

See it in Cornerstone.

Overrides content defined by a block helper.

Example

{{#partial "head"}}
    {{#if pagination.category.previous}}
        <link rel="prev" href="{{pagination.category.previous}}">
    {{/if}}
    {{#if pagination.category.next}}
        <link rel="next" href="{{pagination.category.next}}">
    {{/if}}
{{/partial}}

See it in GitHub.

See it in Cornerstone.

Specifies a widget region.

Example

{{{region name="home_below_menu"}}}

See it in GitHub.

See it in Cornerstone.

Save a variable for later use in the template.

Example

{{assignVar "foo" 10}}

See it in GitHub.

See it in Cornerstone.

Get a variable set by assignVar.

Example

{{getVar "foo"}}

See it in GitHub.

See it in Cornerstone.

Decrement variable assigned by assignVar by 1.

Example

{{decrementVar "foo"}}

See it in GitHub.

See it in Cornerstone.

Increment variable assigned by assignVar by 1.

Example

{{incrementVar "foo"}}

See it in GitHub.

See it in Cornerstone.

Standard helpers

Below are the standard helpers available to stencil themes and a link to it’s documentation on github @helpers/handlebars-helpers.

Helper
after
arrayify
before
eachIndex
filter
first
forEach
inArray
isArray
last
lengthEqual
map
some
sort
sortBy
withAfter
withBefore
withFirst
withLast
withSort
isEmpty
iterate
length
and
gt
gte
has
eq
ifEven
ifNth
ifOdd
is
isnt
lt
lte
neither
unlessEq
unlessGt
unlessLt
unlessGteq
unlessLteq
moment
ellipsis
sanitize
ul
ol
thumbnailImage
inflect
ordinalize
markdown
add
subtract
divide
multiply
floor
ceil
round
sum
avg
default
option
noop
withHash
addCommas
phoneNumber
random
toAbbr
toExponential
toFixed
toFloat
toInt
toPrecision
extend
forIn
forOwn
toPath
get
getObject
hasOwn
isObject
merge
JSONparse
JSONstringify
camelcase
capitalize
capitalizeAll
center
chop
dashcase
dotcase
hyphenate
isString
lowercase
occurrences
pascalcase
pathcase
plusify
reverse
sentence
snakecase
split
startsWith
titleize
trim
uppercase
encodeURI
decodeURI
urlResolve
urlParse
stripProtocol
enumerate
equals
getShortMonth
pick

Contributing to helpers

BigCommerce’s custom handlebar’s helpers are open source. To contribute, make a pull request to bigcommerce/paper-handlebars.

Resources

Additional resources

Handlebars.js Docs (handlebarsjs.com)

Handlebars Helpers Reference

On this page

Custom helpers

{{limit}}

Parameters

Example

{{pluck}}

Parameters

Example

{{cdn}}

Example

CDN custom endpoints

{{money}}

{{getFontLoaderConfig}}

{{getFontsCollection}}

{{encodeHtmlEntities}}

{{nl2br}}

Example

{{pre}}

{{resourceHints}}

Parameters

Example

{{stylesheet}}

Parameters

Example

{{lang}}

Example

{{langJson}}

{{getContentImage}}

Parameters

Example

{{getContentImageSrcset}}

Parameters

Example

{{getImage}}

Parameters

Example

{{getImageManagerImage}}

Parameters

Example

{{getImageManagerImageSrcset}}

Parameters

Example

{{getImageSrcset}}

Parameters

Examples

{{any}}

Example

{{all}}

Example

{{compare}}

Parameters

{{contains}}

Params

Example

{{for}}

Parameters

Example

{{if}}

Example

{{or}}

Parameters

Example

{{unless}}

Example

{{concat}}

Example

{{join}}

Parameters

Example

{{json}}

Example

{{replace}}

Example

{{setURLQueryParam}}

Parameters

Example

{{stripQuerystring}}

Example

{{toLowerCase}}