Sline overview​

Sline is a templating language. It allows you to create a template to display static content and dynamically insert data based on the rendering location of the template.

For example, you can use Sline to create a product template that includes common features, such as 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 Sline?​

Sline 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.

Additionally, you can write logic using tags and modify outputs using filters.

<!-- Render html title -->
<title>
{{ page_title }}
</title>
<!-- Render html meta description -->
{{#if page_description}}
<meta name="description" content="{{ page_description | truncate(150) }}">
{{/if}}
<!-- Render unescaped html -->
<div class="product_description_container">{{{ product.description }}}</div>

Sline resources​

Basics​

Sline basics mainly contain the creation and usage of resource handles, logical and comparison operators, and data types output by objects and their properties.

Refer to Basics before you get started.

Tags​

Sline tags are used to define logic that instructs the template to output specific content. The text within tag delimiters will not produce visible output when the webpage is rendered.

Tags are divided into normal tags and self-closing tags:

• Normal tags start with {{# tag_name }} and end with {{/ tag_name }}.
• Self-closing tags are formatted as {{# tag_name /}}.

{{#if customer != nil}}
User {{customer.name}} is logged in!
{{/if}}
{{#product_form /}}

Refer to Tags to learn more about Sline tags.

Filters​

Sline filters are utilized to modify the output of variables and objects. They can be added after a pipe symbol within {{}} or tags.

Multiple filters can be used within a single output, and they are parsed sequentially from left to right.

<div class=”product-page”>
  <div class=”product-image”>
    <!-- get the product image link to generate the image tag -->
    {{#image_tag product.featured_image | image_url() /}}
  </div>
  <div class=”product-title”>
    {{ product.title }}
  </div>
  <div class=”product-price”>
    {{ product.price | money() }}
  </div>
</div>

Refer to Filters to learn more about Sline filters.

Objects​

Sline 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.
• Functional elements for creating interactivity, such as paginate.

Objects can represent a single data point, such as page_title, or contain multiple properties, such as product.

Refer to Objects to learn more about Sline objects.

Scope​

Objects are divided into global and local. Global objects can be used across all theme templates, such as page_title, whereas local objects defined by tags are restricted to the current template file where they are defined, such as forloop.