Liquid Basics

Spiffy Stores gives you 100% control over the HTML and CSS for your online storefront. Our themes use standard HTML and CSS, with dynamic tags from a templating language called "Liquid" to display dynamic data. This helps you transform your design into a dynamic e-commerce web site as quickly as possible.

This is an introduction to the Spiffy Stores Liquid template syntax, and a reference for Spiffy Stores-specific Tags and Filters.

Liquid is the templating engine for customizing your store layout. It's a small and fast template language which is quick and easy to learn but contains very powerful features for full customization.

The Spiffy Stores Liquid Variables Reference can be found here.

Basics

There are two types of markup in liquid: Output and Tag.

• Output is surrounded by

   {{ two curly brackets }} 

• Tags are surrounded by

   {% a curly bracket and a percent %} 

Output blocks will always be replaced with the data which they reference.

For instance if your liquid template has a product object exposed to it you can print the name of the product to the screen by referencing

 {{ product.title }} 

Tags drive the logic of templates. They are responsible for loops and branching logic such as If / Else.

Output

Here is a simple example of Output:

Hello {{name}}
Hello {{user.name}}
Hello {{ 'fred' }}

Acceptable Tags and Comments

We sanitize all templates, so that you may not use javascript or tags that might be harmful to the application. Disallowed tags include, but aren’t limited to:

• HEAD
• BODY
• SCRIPT

Comments

HTML comments are automatically sanitized by our system. If you wish to place comments in your code, do it with a liquid comment, like so:

 {{ # This is a comment in liquid, and won't show up on the output }} 

Filters

Output markup takes filters. Filters are simple methods. The first parameter is always the output of the left side of the filter. The return value of the filter will be the new left value when the next filter is run. When there are no more filters the template will receive the resulting string.

Hello {{ 'fred' | upcase }}
Hello fred has {{ 'fred' | length }} letters!
Hello {{ '*fred*' | textilize | upcase }}
Hello {{ 'now' | date: "%Y %h" }}