11 Easy-to-Learn Tips For Using Liquid (Shopify's Template Language)

At Shopify, we have many tutorials and introductions to Liquid, our open-source, Ruby-based template language. Liquid is the backbone of Shopify themes and is used to load dynamic content on storefronts. Our Shopify Partners work with Liquid all the time, and we thought it might be useful to seek out some of their favourite tips and tricks to working with Liquid. Below are a collection of some of our favourites.

At Shopify, we have many tutorials and introductions to Liquid – our open-source, Ruby-based template language. Liquid is the backbone of Shopify themes and is used to load dynamic content on storefronts.

Our Shopify Partners work with Liquid all the time, and we gathered a bunch of their favourite tips and tricks to share with you.

1. Grant Eagon - Bongo Themes

Sometimes you have to hot-fix a live site, but you don’t want to mess up the site for users.  Just dump your data out inside a hidden div to see what’s going on.

2. Charlie Friedemann - Conjectural Technologies

I shared my Liquid tip a while ago on the forums, but I think it's pretty novel. It's an implementation of search autocomplete using Liquid and JavaScript, and leverages the SOLR search Shopify uses. 

The original implementation of this tip can be found here.

3. Dan Gold - Dan Gold

My tip is how to update the product subtotal when the quantity changes (jQuery).

Sometimes you want to show a subtotal when a user chooses more than one quantity of a product. This updates a div on the page '.subtotal' with the new dollar amount. Simply put, it multiples the quantity chosen by the user with the product price.

You might also like: The Power of Link Lists

4. Tony Vanderzanden - VZ Tech Solutions

Here are my tips:

A code snippet that displays the product/collection feature image when the when the user hovers over the navigation link.

And a code snippet that allows an admin to divide the product description into multiple named sections that can be displayed as tabs on the products page when there is content in the specified section.. More verbose then just using the split function.

Or a code snippet that produces a running total in the cart is there is a minimum total for free shipping.

1. For product images in the navigation, add this to the Navigation Snippet:
   
   and add this to the js file
   and style as appropriate.

2. For the division of the description into multiple tabs, First you would need a theme that supports tabs. Then add this code where appropriate. (Note, the tab names are specific to our needs and can be made to be more generic.)
   

3. And for the running cart total:
   Nothing too fancy and can definitely be improved on.

5. Brian Jones - Web Work Garage

Here is my tip – nothing fancy or difficult but hopefully useful: How to list links to all collections in Shopify (and how to leave out certain collections from that list).

Sometimes in Shopify you might want to have a certain piece of content or a specific design element on only the homepage of your Shopify store, or on every page except the homepage of your Shopify store. You can do this by putting some conditional statements in your code using Shopify’s Liquid templating language.

Let’s say we wanted to add some kind of home feature image thing to the homepage only. I won’t write out all the code for the feature image, but I published a full tutorial on my website, which you can take a look at here.

6. Rick Davies - Tricky3 Web Mangling

I think the best tip I have learned is to follow Shopify's liquid Github repo. Comprehensive docs are all linked from the readme file and understanding how it works obviously helps no end. Seeing bleeding-edge developments provides a lot of high-level insight. You can see where and how bugs arise, what other people are getting stuck on and why, and sometimes contribute, which is nice (I am not an expert programmer by any stretch of the imagination!).

My Blog Date Archive loop is pretty cool, although a lot of links in that post are dead / not relevant, it’s a shame I can’t update some of those posts any more. Tricky3’s Infinite Scroll plugin that my team developed works pretty well too. My all-time favourite trick though is your Ordinal Date madness.

7. Caroline Keim - Milk & Pixels

I think one of the best tips I learned was using the fields and data you have to manipulate other areas. For instance, you can define variants and colors – so to display color swatches, you could name the swatch images exactly the same as the variant and spit out a color swatch list.

I think this type of engineering and backwards thinking is the key to creating complex and innovative themes. See below.

8. Cory Gwin - Analog Forest

Not really a Liquid trick, but I have created a grunt workflow for working with Bower, Shopify, Compass, jshint  etc.

This starter tool utilizes many tools I have used over and over for development and attempts to wrap them all into a sensible starting place. It includes the following tools:

1. Bower - for js package managment http://bower.io
2. Grunt - to run processes like jshint, compass, live reload etc.. http://gruntjs.com
3. Bootstrap 3 - don't just use it on its own it is a framework :) http://getbootstrap.com
4. Watch with Live reload - Runs all the grunt tasks and reloads the webpage once upload to shopify is completed. https://github.com/gruntjs/grunt-contrib-watch
5. Compass - This Sass add on comes with sass and a bunch of helpers to make your life easier.http://compass-style.org
6. Grunt Shopify - Once configured this will upload the updated files to shopify.https://github.com/wilr/grunt-shopify
7. Shopify Skeleton theme - The skeleton template theme is included although slightly altered to work with above technologies. https://github.com/Shopify/skeleton-theme
8. Grunt modernizr - Custom modernizr build based on what your are usinghttps://github.com/Modernizr/grunt-modernizr
9. jshint - offers useful advice about how to improve your js https://github.com/gruntjs/grunt-contrib-jshint
10. grunt concat - concatinates all js files into a single file - https://github.com/gruntjs/grunt-contrib-concat
11. grunt concat bower - same thing but understand bowers folder structure -https://github.com/sapegin/grunt-bower-concat
12. grunt uglify - minimizes your javascript - https://github.com/gruntjs/grunt-contrib-uglify

You can find my Shopify Starter here.

9. Phill Tran, Divine Apparitions

My client primarily sells downloadable files using Shopify. We were saddened when Shopify ceased sending live web hook data to Fetchapp once a sale was completed.

The client didn't like having to make the customer wait for an email to download the file they purchased.

I used a jquery timed function to display an "order processing" animation for 120 seconds then displays the fetchapp download link.

Here is the code for https://wordoffaith.myshopify.com:

10. Amine Ouahidi - NINE15

This isn’t a complicated trick but our clients love it. Several of our clients always ask us if there is an easy way to modify a product or page directly from the website, instead of going to the admin > Products > Search for the product > Edit & Save.

I think the harder part is finding the correct product as some of our clients have thousands of them.

So what we do is create a customer account for the client and add something like this to the liquid templates (products, articles, pages):

...And so on for the pages and articles.

This adds an edit link to the product pages, articles, etc. when the client is logged in. They can easily switch back and forth between the admin and front-end interface.

11. Matt Haff - Matt Haff

One tip/trick that I’ve done is in the .css.liquid files. I put the styles using variables last in the list so that all the regular ones will have proper syntax highlighting. On top of that I use the .liquid syntax highlighting package for Sublime Text.

Thanks to our Shopify Partners for these tips!

We received these Liquid tips in response to a giveaway for a pass to AEA Orlando. Our winner was Amine Ouahidi who will be attending the conference from Oct. 27-29. Congratulations, Amine!

Do you have a favorite tip for working with Liquid that you don’t see above? Share yours in the comments below.