Shopify Liquid File Basics

Liquid files are referred to as 'template language', templates or language used for loading dynamic content. An example of a dynamic page is the product page. Unlike a 'static page' like About Us, Contact Us and so on whose content remains the same, the single product page displays the 

content of any of multiple products. The liquid file however has a fixed set of rules that apply for all products about what will (not) be shown, how and where. When customers visit the product page, they see the product that interests them in with element details that was prescribed in the product page like the unique product title, image, description and so on.

Liquid files borrows from other protocols. For instance, it includes many elements that are familiar: to those with HTML experience, like h2; to programming logic and so on. The liquid file extension is .liquid. Examples of file names include index.liquid, theme.liquid and so on. You can use it in any text editor (like Notepad). Each liquid file will have 'placeholders', like this {{ and }} for example within which page elements are named.

Its terminology is as follows.

• 'Liquid objects' (aka liquid variables) are attributes, ie similar to attributes that exist within html tags. In Shopify terminology, these attributes are called 'output'. Liquid objects are contained within brackets like {{ and }}. For instance, when you type inside Shopify's wysiwyg page editor, appears wherever the {{ product.content }} appears. Consequently, if you placed a contact form below that object code, the form will appear underneath anything you type inside the page editor.

{{ product.content }}

{{ product.title }}

{{ product.description }}

<h2> {{ product.title }} </h2>

• 'Tags' comprise the programming logic that appear within {% and %} in the beginning and then {% endif %} . Programming logic is a language that instructs computers what to display based on a set of rules. The rules comprise several sentences. In layman terms, the rules essentially say 'if .... then do .... Otherwise, do ...'.

To access liquid files

• Log in to Shopify
• Online store
• Themes

• Edit HTML/CSS

--

--

RELATED CONTENT

• Shopify's help center on liquid file basics
• Directory of Shopify experts
• Create a template and add custom code (like javascript) after liquid objects
• Apply javascript to Shopify static pages