My first task for my work experience was to learn Shopify , specifically to make a slideshow feature on the website. As a complete beginner, this was a bit intimidating but also exciting. There is a language similar to PHP that Shopify uses called Liquid.
What is Liquid?
This direct quote sums it up:
Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
From what I can see, a .liquid file uses this liquid language along with HTML and CSS to bring everything together. It acts a bit like PHP but of course it is a different language. I watched a couple of tutorials on Ruby before encountering this, but I honestly don't really see how they are related at this point. Maybe that is a shortcoming on my part - we will see once more investigating is done.
It has similar features to other languages like variables and loops, but one thing that stood out to me is the use of filters. A filter is a vertical line followed by a keyword that transforms the data in some way. For example, if a product costs $20.35, then typing something like {{product.price}} would make sense to display the price, right? Well, not so easy. product.price would output 2035. In order to make it a nice $20.35 format with the dollar sign and decimal point, we would have to add a filter. For what we want, the correct code would be {{ product.price | money }} where the vertical line | indicates a filter, and the name of the filter is "money".
Liquid Quirks
The first thing that stood out to me is that this languages loves percent signs. Most code is located between curly braces and percent signs like this: {% some code %}
Schemas were a new concept I had to learn. There is a feature in Shopify where you can design the website using widgets, sort of like Elementor for WordPress. The schema is the code you write for the features on the widget menu. As far as I can tell, it does not directly place anything on the website - it is for building the tool you will use to place information on the website. For example, if you want to add a slideshow to your website you would choose a slideshow widget from the sidebar, pick your settings, and then it would appear on the page. The schema is what put the slideshow widget there as an option for you to use in the first place, along with whatever settings are defined.
Blocks are like sections, but smaller. They can be reused and reorganized based on your preferences.
As previously mentioned, the use of filters is something I have not seen before. Filters transform the data into a different format. {{product.price}} returns a number in cents but without any symbols. Adding a filter would change the format into a readable price. Example: Price of the product is $25.90. Code below is in the format of "liquid code" => "output of code"
{{product.price}} => 2590
{{product.price | money }} => $25.90
{{product.price | money_with_currency }} => $25.90 CAD
What Does the Code Look Like?
I can't copy and paste what my mentor has written because it is part of his business, but I can give a general idea of the format of a .liquid file that we worked with.
For the example of a slideshow, a slideshow.liquid file would be structured as:
- Comments at the top. Comments are shown like this:
{% comment %}
say what you need to say
{% endcomment %}
- Then you can import some custom CSS if you need to.
{{ 'slideshow.css' | asset_url | stylesheet_tag }}
- Next you can add some liquid variables and HTML code. The "assign" keyword is associated with variables.
{% assign my_var = false %}
<div>
{% for block in section.blocks %}
//do something
{% endfor %}
</div>
- A schema can come next with whatever information you want to add.
{% schema %}
{
"name": "Slideshow",
}
{% endschema %}
Resources That Are Helping Me Learn
Everyone learns differently, but there are some resources that got me going in the right direction.
Shopify Cheat Sheet - This helped me understand the nuances of things like {{ product.price }} or {{ 145 | money }}. It contains Basics, Tags, Filters, and Objects. Very handy!
Shopify Crash Course from "Code from Chris the Freelancer" (video) - a general overview of Shopify
Various videos from "Coding With Jan - Shopify Developer" (video) - Coding a slider
Shopify Dev Themes - overall information on the segments of the Liquid language.
JSON Schema from "Automation Step By Step" (video) - for how JSON relates to Liquid schemas
Where To Go Next?
The only way to keep moving forward is to keep moving forward. I will continue to research this subject and experiment with different objects, tags, and filters to see what I can create on my own. My work experience mentor has provided me with some working code and a test shop to play around with. It only makes sense to keep adjusting things on there until I am comfortable with how all the bits and pieces fit together. I am excited to see where this will end up heading!