If you've been in the Shopify universe for a while, you must have heard of this weird name: the Liquid" (with a capital L) but you may not know exactly what it is or what it serves ? Let's see it together and Liquid will have no more secrets for you or almost.
Liquid is Shopify's templating language
Wow, we'll explain, don't worry. Contrary to what one can read on other e-commerce blogs, visibly uninformed about Shopify, Liquid is not Shopify's programming language.
Shopify has a code base rather based on Ruby On Rails but that doesn't matter because apart from the Shopify team itself, no one touches Shopify's code.
"But Benoît, you say all over the articles that you are Shopify developers in your agence E-commerce when you don't touch the Shopify code, what do you do? "
Well first of all, thank you Jean-kévin for this excellent question. 10 points to Gryffindor.
So, at Pikka, we do have developers, but they work with the Liquid language, html, css and javascript, to create unique Shopify themes for our customers. They do not touch the Shopify code but "only" the "front office" part called the template.
The skeleton, the design, thegraphical integration, all this represents what it is possible to do as technical modifications on Shopify.
Well there are also apis but that's another topic. Let's focus on the Liquid.
Some other e-commerce solutions have templating languages in php or any other programming language. At the house of Shopify c'est du Liquid
What is Liquid used for?
The Liquid will be used to make the site dynamic and above all "variable". Let's take a simple example. On a page, you want to display the title of the page. In the code, we are not going to hard-code the page name. We will use a variable, for example {{page.title}} .
Shopify, every time it goes to load a page it will see this weird {{page.title}} thing (double brace, text, closing double braces) and will know to replace the word between the braces with the page value.
And on each page we will have a different title for each page displayed to the client, with a single line of code. Well this is the simplest example. Now imagine doing the same thing for each image, text, photo, banner, price, information, etc.
And there it starts to be a lot of work to code a custom theme for a client. This is why creating a theme represents a budget that can start from 15,000 € generally, see rates and prices of Shopify services for more information.
A theme made in Liquid will contain thousands of lines of code, combinations, iteration loops, Boolean logical conditions to display the right information at the right time. It's painstaking work, but it will make it possible to transform a simple idea into high-end graphic rendering for a luxury e-commerce site, for example.
What is the difference between Liquid, html, css and javascript?
But then, if the Liquid serves as a programming language for creating Shopify themes. What do html, css and javascript have to do with it?
And each has its usefulness and remains complementary.
Browsers do not understand the Liquid language. Shopify therefore serves as a translator to transform Liquid variables into information, but they must be presented correctly.
And Html
This is the role of Html for the "DOM" part, document object model, to put it simply, let's say the technical structure of the page. You know, the one you need to optimize to improve the loading speed of your e-commerce site.
The CSS
The CSS is the graphic layer. It will tell an html blog to become blue or red and to change design depending on the support, mobile or desktop for example.
Create thousands of lines of CSS is always a big part of our work at the agency when we create graphic integrations via mockups Figma for example.
Le JavaScript
The javascript will handle dynamic events. What happens if you click on this button for example. But it can also show or hide elements based on certain clicks, scroll or otherwise.
All three constitute the largest part of the graphic template(s) that can be found in a Shopify theme, whether it is a free theme or a paid theme, on the technical side it's the same inside.
If you need a Liquid expert to make graphic or technical changes to your Shopify site, you can request a quote from our sales team, we will be happy to support you in the evolution of your merchant site by putting our expertise at your service!
What resources to boost your knowledge of Liquid?
If you are interested in this topic, you can check out the following links to learn more about "Liquid" templating language and improve your knowledge:
Liquid on GitHub
Shopify has opened a Liquid documentation space on GitHub available here -> https://shopify.github.io/liquid/
Ideal for knowing everything about the main principles of Liquid and for the precise documentary base of loops and different elements of logic that can be used in Liquid. It lacks a few examples but it is a good basis for checking information or nomenclature.
Liquid sur Shopify Dev
The other great source of information, much more precise and more complete, can be found on the Shopify.dev site, a real bible of knowledge to deepen your knowledge of the Liquid language.
The Shopify .dev site is very complete and covers many topics (API, Headless, Payment etc...) . To access the Liquid part, it's here: https://shopify.dev/api/liquid
