Shopify Liquid Best Practices

What I’ve been thinking about:

I've been thinking about improving my liquid writing habits a bit recently - which usually just means digging a bit further into liquid docs, stackoverflow and other resources to improve. Here are a few good habits (which you may already know).

Wrap your conditional outputs

Always wrap dynamic outputs in an if setting != blank statement.

eg.

Replace:

This helps ensure that empty html or broken features don't get rendered on the front end.

Important Side note - using != blank instead of != '' is preferred.

blank also checks for whitespace only strings, and undefined variables - not just an empty string.

An example of how this works below:

Simplify your liquid when checking multiple 'equals' conditions

When you need to check more than a few values against another variable - you could write out a lengthy if statement with each condition to be checked...

eg.

Or you could write it much more simply using a comma separated string and contains like below...

Break out of your loops after finding a match

If you're looping through an array to find one match, then be sure to break after that match is found so the loop doesn't continue running.

3 links you can’t miss:

• Shopify 2.0 Data Converter: Take your legacy settings-data.json file and pop it into the data converter. Out comes your new index.json data for the OS 2.0. (Shameless plug on this one - built by my partner and I.)
• Shopify Schema Builder: A neat tool to help you generate schema for new templates and sections. Built by a fellow Storetasker Rahul Tulsiyani
• CSS Grid Generator: Another builder tool - this one helps you visually create layouts with CSS Grid. Pretty handy, especially for visual learners/builders.

One app I like:

Order Printer Pro by FORSBERG+two ApS

Order Printer Pro (OPP) is easily one of the most popular apps for generating invoices and other documents - I see it in almost all of my clients stores.

It lets you create templates for invoices, packing slips and anything else most businesses need to print out.

However, the reason I'm mentioning it is because it also generates dynamic links to all of these templates - the main use case for this is so merchants can add invoice links to their order confirmation emails.

We can also decide to leverage the publicly accessible URL for these PDF's in automation workflows inside software like Make/Integromat and Zapier.

I recently set up a workflow inside Make that makes a call to dynamic OPP URL, downloads the PDF file, and sends it off to a connected printer (amongst other things). Pretty handy and a quick route for an MVP feature.