"i only speak liquid" #8: Liquid Best Practice 💧

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Anthony) share learnings we face daily. 

PS: I'm an expert on Storetasker and work with some pretty great clients on the platform, alongside some external clients in Australia. Storetasker allows me the freedom to scale up and down my workload to suit my business. Whether you're after a full-time workload, or a part-time gig. Apply here if you want in.

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.

One learning as a freelancer:

You deserve some time off.

The best and worst thing about being a freelancer is that you have freedom over your hours. A lot of the time this means you inadvertently overwork yourself to bring in more income - especially given its been a very busy year in eComm for us all.

The flip-side of this freedom is that you need to actively acknowledge that balance is healthy, and you also deserve time off. What good is freedom over your time if you don't use it to live?

This is the last of my 4-edition stint. I learnt a bunch while researching for the various editions, and I hope you got some good takeaways too!

If you have any suggestions or feedback, please feel free to reach out to me at [email protected]

Until next time,

AV