Liquid is an open source templating language used to link the resources in Cohub to your Store's website. Much of the management and organization you do in the Cohub Admin is displayed in your Store via Liquid objects. When you name and price products, add logos to a brand, or assign products to a category, that information updates on your Store without you having to makes changes to your store's markup.

We'll go over some of the basics of Liquid here, but you can and should take a look at the official documentation for Liquid.

There are three main categorizations of Liquid tools: Objects, Tags, and Filters.

Objects

An Object relates to a resource stored in the Cohub database and has many properties. A Product object has properties like name, price, and description.

To render these properties within a template file, you use a special syntax:

<h1>{{ product.name }}</h1>

The double brackets let Liquid know that you're making a reference to a specific object and one of its properties. Notice that the brackets appear inside a normal HTML tag.

Tags

Tags are used for control flow within a template and allow you to create conditional expressions and loops.

An if condition evaluates some expression and renders its contents if the expression is true.

{% if product.price < 100 %}
  <span>Great Deal!</span>
{% endif %}

A for loop allows you to iterate over a collection of objects and output identical markup with varying content.

{% for product in products %}
  <h3>{{ product.name }}</h3>
  <div>{{ product.part_number</div>
{% endfor %}

In the above example, each product in the collection called "products" would be rendered with and h3  tag containing the name and a div beneath it containing the part number.

Notice that the bracket percent symbol syntax does not appear inside any HTML markup, but frequently uses the Object syntax inside the control flow statement. In fact, you'll rarely use a a control flow tag without referencing an Object!

Filters

Filters change the way an Object or Variable is rendered.

<h1>{{ product.name | capitalize }}</h1>

Did this answer your question?