It looks like you want to edit your Shopify store code! Alas, you came across some awful files called the “.liquid”. So, what is it? Is it html? Css, php, javascript or another form of shopify code or another language? Don’t panic, Shopify’s “.liquid” files aren’t that complicated to read and look like good old friends if you’ve already done a bit of development.
Where do I edit Shopify’s code?
To edit Shopify’s code, it’s easy:
- Sign in to your Shopify store.
- Go to the settings to manage the choice of your theme. (I recommend the Speedfly theme if you want to save time).
- Then, click on the small arrow next to the name of the theme you want to edit.
- You will find the word “edit code”.
- Click on it and you arrive on an interface composed of several files and an editor!
Once you get to this stage, you of course need some skills in coding and computer development. Know that the main features like changing a background color, moving a section and other are done through Shopify’s theme editor. In this case, no need to go into the code. Otherwise, I invite you to watch this little introductory video which of course allows you to understand what a .liquid, html, css, js and php is! You’ll know where to find the right files and code from Shopify with this tutorial!Understand Shopify and its html, css, js, and liquid code
But what is a .liquid?
A .liquid file is a language template that Shopify has created! Basically, it is through these files that you will be able to create the entire structure and framework of your theme. If you do html, you will of course find many tags that you already know! In reality, what is going to be the most annoying to understand. It’s the calling of functions and passing variables that allow Shopify to call content dynamically.
Houla, I think I lost 🙂 you I’ll make it simpler: you will find in these .liquid files:
- Parts of html that allow you to cut the structure of your page.
- CSS that allows you to make a nice design. It allows you to determine for example the size of your writing, the color and so on.*
- Javascript and php, it’s basically to make your site work so that it communicates with a BDD (database).
A database will contain, for example, the name of all your items, prices, product images. Thus, thanks to php, javascript and in particular thanks to the functions contained in this .liquid, you will be able to search for the data in the database and display them on your site. That’s why as soon as you put a promotion, all prices change and that’s why Shopify is disconcertingly simple. The “.liquid” file type allows you to write all the code that will make your online store work.
When and why go into Shopify’s code?
Only you know! But in any case, few e-merchants will edit the code of the Shopify store. It really has to be a very particular element that gets in the way of your page design, an incompatibility with an application or that you want to hijack a function.
Indeed, if you want for example:
- To change a color.
- Change the font and edit its size.
- To create a page, an article, to modify a product page.
- Change a session, reduce the size of an image
- Etc.
All this is done much more simply through the theme editor, the one that allows you to arrange the different sessions of your pages. You don’t need to go into computer code. Besides, I recommend you to always do a duplicate and save. I know far too many students who have tried to change a color and removed the wrong line! Well, I’ll show you a specific case where you need to edit the code: in order to remove the famous text “powered by shopify” or “powered by shopify”.
I show you how you can do it in this short video. This is one of the only reasons that should push you to go and edit the code. If it’s to do design, Shopify’s visual editor will suffice very well and if not, I even invite you to install Gempages to create custom landing pages as I explain in my dropshipping training.How to remove or remove “powered by shopify” or “powered by shopify”?
Shopify Code: Understanding the Basic Structure
The best way to start using the code in shopify programming language is to understand that it is a Template language. It is indeed a bridge between the data you find in the shopify dashboard and the shopify html template.
Even if you don’t understand anything about the majority of the language, it’s important that you still master the variables in the Template. Indeed, you will have access to them and you must master them.
When sending the Template to the level, the modification of the blocks is done by Liquid. The two main blocks you need to know are among others:
Double-parentheses for display;
The percentage sign that indicates the logic.
These blocks are the only parts of the language that you need to be interested in in this case. This is the basis of the construction of Liquid.
Shopify code: Learn how to handle .liquid
To begin with, there are:
Display
In terms of display, it will be a question of focusing on {{shop.name}}. Do not panic, it is something very simple that will change the output. You will just have to change the name of your shop and the space will be replaced by the new name.
Logic
It is defined by the “%” symbol that will allow you to control the rendering. For example, you may have a logic that X quantity of product B is sold. It will be displayed as follows: “A out of stock”. This is what makes your website interactive.
Loops
They are used to display the same code several times in the Template. For example, this can be used to display all the images associated with a given product. At first glance, it may seem complicated, but it’s easy to understand once you start using it.
Shopify code: How to use .liquid?
The reason learning .liquid is so important is that it allows you to maximize control over your subject. This will allow you to create the best store that suits you best. You can already start putting these courses into practice.
Randomly choose a theme on Shopify, and then start analyzing those many parts. So you can use Shopify’s preview to see what you’re doing without touching the production store.
Shopify code: Is .liquid an engine or a language?
It is not uncommon to see that many people consider . Liquid as a template language. Others, on the other hand, prefer to talk about engines. In either case, both parties are absolutely right.
Indeed, .liquid has a synthase similar to that of all languages in terms of programming and concepts. These include output, logic and loops. In addition, it interacts with data such as web languages (such as PHP).
Given its design, . Liquid can do a lot of things. For example, the concept of “state” does not exist. It does not allow access to the different layers of the platform and sometimes it seems counterintuitive even to experienced developers. But. Liquid has been well thought out. Moreover, what initially seemed to be defective turned out to be chosen voluntarily for good reasons.
Is it convenient to use Liquid in Shopify?
No one can deny that creating a shopify theme without any basis takes an enormous amount of time. However, you don’t have to.
For the average online store owner, learning the basics of Liquid can allow them to make minor changes to the standard theme.
Even small changes can make your online store unique. Research shows that this can make a big difference in sales.
Shopify code: What is the use of .liquid?
The .liquid or Liquid is, as in any language, a bridge between an html file and a set of data. This is obviously a Shopify store and for this Liquid gives access to the variables of the Template or a Liquid file using a synthase that is easy to read and use.
With shopify each Liquid file makes it easy to access variables. For example, the product.liquid template provides access to all data related to the selected product.
On the other hand, .liquid can display this data without first having to get product information. These variables are Template variables. So you can use .liquid to call data that shopify can’t access.
For example, you can ask Shopify to use all the products in a specific collection to populate the variables you create. Once you have the name of the variable you want to access or create, you can then use the Liquid structure (such as “output” or “loop”) to display the data in the Liquid file.
Shopify will then identify the data to be obtained and the format of the data displayed based on the theme’s Liquid code. This can simply display the product name, or something more complicated, such as displaying a series of images related to the product.
The main advantage of a Template language like .liquid is that the designer has no need to know anything about the store they are working on. Thus, the themes you have chosen will be 100% compatible.
You can therefore apply them to other shops without first knowing the content of the shops.
Shopify code: The different Liquid filters
Filters are some interesting features of the Liquid. These filters have three main functions. They initially allow you to modify and process the format of the output data.
They then have the function of making the themes tunable. This saves designers time by decreasing the amount of code they will have to write. The Filters of the Liquid are always attached to the output information.
To mention these different filters, there are the date, asset_url, style.cssasset_url, stylesheet_tag, script_tag filters. There is also pluralize, replace, money, money_with_currency. These different filters will be of great use to you.
The different operators
You have probably noticed the constancy of the operator “greater than” >. If the variable cart.item_count returns the number of items in the user’s cart, it is therefore possible to know if the number is greater than zero, in order to know if there are items in the cart.
If the answer is “true” (and therefore correct), a message indicating the number of items in the cart will be displayed. In addition, there is a wide variety of comparison operators in the .liquid. These are:
== equal to;
! = different from;
> greater than;
< Less than ;
>= greater than or equal to;
<= less than or equal to;
or condition A or condition B;
and condition A and condition B;
Etc.
It is possible to modify and change the code of each theme you have chosen. This will allow you to make further changes to your online store.
In reality, the majority of files that go into the composition of a theme are composed of Liquid. The latter is as you already know the language of Template of shopify. These files are also made up of (HTML, CSS, JavaScript).
Here we are at the end, I hope this article helped you better understand how to edit a code in shopify in order to easily use .liquid. I will see you very soon for a more interesting and informative issue.
