Template objects

Published

When working with templates the system creates objects that you can use depending on what context you are in.

Let’s assume you are working with the product template product.liquid (in a ‘product context’), when using that template you have access to the current product object and you can inspect it using {{ product | print_r}}.

Some objects are always available (but lazy loaded on access) such as collections and products but there’s also a customer object which only exists when a customer has logged in.

These objects are made available server side when using liquid code but can be made available client side js using the json filter const p = {{ product | json}};.

{% comment %}
   We can reference a product object since we are in a product context.
{% endcomment %}

{% assign productTitle = product.title | upcase %}
{% assign onSale = false %}
{% if product.compareAtPrice > product.price %}
   {% assign onSale = true %}
{% endif %}

{{productTitle}} is {% unless onSale %}not {% endunless %}on sale! 
Example of using a template object

Global objects

There are global objects that can be reached from all contexts.

CMS

Object Description
{{ site }} Site information
{{ request }} Site visitor request object
{{ settings }} All the theme settings saved in settings_data.json file
{{ pages }} Lists all pages
{{ blogs }} Lists all blogs
{{ authors }} Lists all authors
{{ navigation }} Navigation lists
{{ countries }} List of all countries
{{ lang }} Current language
{{ currentTags }} Lists the current tags if used in URL query parameter

eCommerce

Object Description
{{ shop }} Shop information
{{ collections }} Lists of all product collections
{{ products }} List of all products
{{ vendors }} Lists of all vendors
{{ customer }} Logged in customer
{{ currency }} Current currency
{{ cart }} Cart content

Site object {{ site }}

You can always print the site object with {{ site | print_r }}

Property Description
{{ site.id }} The unique identifier of the site  
{{ site.name }} Name of the site, intended mainly for internal purposes.
{{ site.lang }} Default site language
{{ site.domain }} The main domain
{{ site.theme }} The id of the published theme
{{ site.contact }} The contact point given in the site settings for the site contact
{{ site.createdAt }} Date when site was created
{{ site.meta.h1 }} The H1 heading for the site, given in site settings
{{ site.meta.title }} The site title
{{ site.meta.description }} Site description
{{ site.meta.keywords }} Site keywords
{{ site.organisation }} Organisation as stated in the site settings
{{ site.location }} Location as stated in the site settings

Request object {{ request }}

The request object will specify the host, origin, path, query, referer and scheme of the current request.

Property Description
{{ request.host }} The domain name
{{ request.origin }} Origin of the content, different from host if the site is run headless.
{{ request.path }} Current path
{{ request.query }} The query of the request, for example tags=CMS if a tag is chosen on a blog
{{ request.referer }} Address of the previous page
{{ request.remote }} The IP of the site visitor
{{ request.scheme }} http or https

Using the request information, it is possible to add in user-specific content, for example, if the referer contains “google” the content can be rendered adapted to this.

{% if request.referer contains "google" %}
	<aside>
		<div class="promo brand">
				<h2>Want to create websites?</h2>
				<a class="shiny-cta" href="/features">Learn more</a>
		</div>
	</aside>
{% endif %}
Example, showing a promo if the visitor comes from Google

Cart object

{{ cart }}

Property Description
shopId Shop Id
id Cart id
sessionId Id of customer session
shippingId Id of chosen shipping
lang Language setting
currency Currency used in cart
country Selected country
items List of items in cart
amount Containing the properties total amount, subtotal (sub), VAT and currency
requiresShipping True if the cart contains items that requires shipping
quantity Items in cart
shippings List with possible shippings and their properties
createdAt Cart creation date
totalAmount Total amount of cart
itemsCount Items in cart
shipping Chosen shipping with properties

Context dependent objects

Context dependent objects, the name of the object is the same as the current context i.e. page,product, cart, collection.

CMS

Object Theme template
{{ page }} page.liquid
{{ blog }} blog.liquid
{{ article }} article.liquid

Page object

Property Description
Text Text

| id | Page id | | authorId | Author id | | author | Author | | published | Published date | | createdAt | First created | | updatedAt | Latest update date | | publishAt | Publish date | | lang | Language | | handle | Editable page handle | | title | Page title | | html | Page content in html-format | | meta | H1 and meta data: Title, description, keywords and data | | image | Page image with source, and alt texts | | text | Page-content in text format | | format | Editor format | Table: Page object properties

eCommerce

Object Template
{{ product }} product.liquid
{{ collection }} collection.liquid

Example

In the page.liquid template the object {{ page }} exists and contains fields such as {{ page.html }} which provides all the content or {{ page.createdAt }} for creation date.

To view all the fields the filter | print_r can be used.

Referencing outside the context

It is possible to reach the objects outside the context of the object.

pages, blogs, collections, products combined with a reference to theme settings, handle/id or an position in the array will extract an object (page, blog, collection or product).

Using reference to theme settings

With settings it is possible to reach a specific blog/collection/product/page/article from the theme settings data stored in the settings object.

{% assign collection = collections[settings.homepageCollection] %}
Example using theme settings reference

Using handle privacy

{{ pages['privacy'].html }}
Example page using handle

Referencing a product from products

The products object will contain all the products in an array, it is possible to pick a product from the array by specifying the position, with 0 being the first. products[0] will pick the first product.