Overview​

Learn about Handlebars and how to use it through this guide.

What is Handlebars?​

Handlebars is a template language, which provides syntax for defining templates to display static content. These templates can dynamically insert data at runtime based on the context, thus generating the final HTML.

For example, you can use Handlebars to create a product template that includes common features, such as designated areas for the product image, title, and price. When a user views a specific product, the template automatically populates the corresponding product information based on the user's selection.

How to use Handlebars?​

Handlebars facilitates the dynamic display of objects and their properties. Objects and their properties are presented through expressions with double curly braces, such as {{ expression }}. To output unescaped HTML code, use triple curly braces, such as {{{ expression }}}, which treats any HTML tags within the expression as plain text rather than HTML elements.

<!-- Render html title -->
<title>
  {{ page_title }}
</title>
<!-- Render unescaped html -->
<div class="product_description_container">{{{ product.description }}}</div>

You can adjust the display using Handlebars helpers. The following code sample uses the if helper to render a meta description tag in HTML, truncating the content from the page_description object to 150 characters if the description is provided.

<!-- Render html meta description -->
{{#if page_description}}
<meta name="description" content="{{ truncate page_description 150 }}">
{{/if}}

Additionally, SHOPLINE introduces Handlebars basics, which are used alongside Handlebars objects and helpers. For example, the comparison operation > is used together with the if helper in the following code sample.

{{#if product.compare_at_price > product.price}}
  This product is on sale!
{{/if}}

Handlebars resources​

Handlebars basics​

Handlebars basics contain the creation and usage of object handles, logical and comparison operators, and data types output by objects and object properties, along with instructions for use. Refer to Handlebars basics before you get started.

Handlebars objects​

Handlebars objects represent the variables you can use to build themes. Object types include but are not limited to:

• Store resources, such as collection and product.
• Standard content for SHOPLINE themes, such as content_for_header.
• Functional elements for creating interactivity, such as search.

Objects can represent a single data point, such as page_title, or contain multiple properties, such as product. Some objects may contain related objects. For example, a collection object includes a product object.

<section>
<!-- Collection name -->
{{ collection.title }}
<!-- Product name -->
{{ product.title }}
<!-- Product collection name -->
{{ product.collection.[0].title }}
</section>

<section>
  <!-- Collection name -->
  <!-- Product name -->
  <!-- Product collection name -->
</section>

Refer to Objects to learn more about SHOPLINE Handlebars objects.

Handlebars helpers​

Handlebars helpers are used to define logic and control the template outputs. The content within the helper {{# helper some logic}} is not displayed on the webpage.

{{#if page_description != ''}}
  {{ truncate page_description 150}}
{{/if}}

Refer to Helpers to learn more about SHOPLINE Handlebars helpers.