5 Liquid hacks that will improve your workflow
Here are 5 Liquid hacks that will improve your workflow as a Shopify developer ๐ค
I hope you had a good start to the new year and are ready to become even better and more successful as a Shopify developer.
To start things off in 2026, I prepared 5 Liquid hacks I use regularly to write better code.
๐. ๐๐ฎ๐ซ๐ง ๐ ๐ฌ๐ญ๐ซ๐ข๐ง๐ ๐ข๐ง๐ญ๐จ ๐ ๐ง๐ฎ๐ฆ๐๐๐ซ
Various scenarios during theme development can result in numbers being returned as strings! The disadvantage of storing numbers as strings is that they won't work with math filters for calculations.
To turn a number-string into a number, you can use the | ๐๐๐ข๐ : 0 filter
๐. ๐๐ฎ๐ซ๐ง ๐ ๐ง๐ฎ๐ฆ๐๐๐ซ ๐ข๐ง๐ญ๐จ ๐ ๐๐ฅ๐จ๐๐ญ
The same goes for having numbers instead of floats! This can get tricky when calculating percentages, e.g., while building progress bars or compare_at_price/price savings.
If you have a number and actually want to calculate with a float, you can useย | ๐ก๐๐๐๐ : 1.0ย to turn a number into a float.
๐. ๐๐๐ง๐๐ซ๐๐ญ๐ข๐ง๐ ๐๐ฎ๐ฌ๐ญ๐จ๐ฆ ๐๐ซ๐ซ๐๐ฒ๐ฌ
Liquid does not allow us to create custom arrays from data. We have some filters, likeย ๐คโ๐๐๐ ๐๐ ๐๐๐,ย that can create arrays from already existing arrays. But to create arrays with our own data we can do the following:
- Assign a variable to an empty string
- Append desired data to that empty string, seperated by a comma
- Split that string at the comma to get an array
๐. ๐๐๐๐ฎ๐ ๐ ๐ข๐ง๐ ๐ฐ๐ข๐ญ๐ก ๐ฃ๐ฌ๐จ๐ง ๐๐ข๐ฅ๐ญ๐๐ซ
I already mentioned this in another post! Debugging in Liquid is 99% of the time just outputting data to check what it actually contains. And many people use plain output to do that.
But this is bad practice!
Plain output in the frontend is hard to read and can leave clutter behind if you forget to remove the debug.
A much better approach is to useย <๐ ๐๐๐๐๐ก> ๐ก๐๐๐ /๐๐๐๐ ๐๐๐.๐๐๐()ย in combination with theย ๐๐ ๐๐ย filter to output data in the console of your browser.
๐. ๐๐๐๐ญ๐ข๐จ๐ง/๐๐ฅ๐จ๐๐ค ๐ฌ๐ฉ๐๐๐ข๐๐ข๐ ๐ฌ๐ญ๐ฒ๐ฅ๐ข๐ง๐
Did you know that every section and theme block is automatically wrapped by a <๐๐๐ฃ> with a unique ID that you can use to give that section/theme block specific CSS? The structure is simple and uses theย resource's ID. See below for an example.
Use these hacks to improve your workflow ๐
