Shopify provides more than a hundred themes that entrepreneurs can use for any ecommerce business that they want. In most use cases, the themes (the way they are) are enough to build a successful online business. But to web developers who want more functionalities, they use Shopify code editor to elevate the features of a template.
There is a theme for every business on Shopify. And most, if not all, Shopify themes come complete with every functionality that you will need to conduct an ecommerce business. The way they differ in a big way is the design and execution of each one of the themes that you can find.
In real-world situations, there are templates that could have been fit for a certain business idea but lack a specific feature. There are themes that are good enough but need a little bit more customization to make them better. Ordinarily, these issues can be addressed from the Shopify theme editor.
But in situations where the template does not provide for further tweaking through the theme editor, web developers have another recourse. And that is the Shopify code editor which provides access to the “DNA”, if you may, of every Shopify store.
Outline
- Before Anything Else…
- Overview of Shopify Code Editor
- Learn More About Liquid
- Stop! Do These Before Using Shopify Code Editor
- Learn Shopify Liquid
- There Is An Easier Way Than Editing The Code
- Bottom Line: Focus On What Really Matters
Before Anything Else…
Before moving forward, let us first set things straight…
Our goal in this article is not to teach you how to code using Shopify’s templating language – Liquid. Editing Shopify theme files requires a lengthy discussion and one article would not be enough to do that. Rather, we will shed light on the things you need to know before you edit code on your store’s back end.
Nevertheless, if you are determined to learn how to edit code using Liquid, we will point you to the right online resources via links throughout this article to make sure that you are headed in the right direction in your coding journey.
The learning materials linked in this article will take hours to learn and fully internalize. Thus, it is important to only take what you can. Do not binge on the learning materials in a single day. Instead, take it one step at a time.
Now that that’s out of the way, let us begin.
Overview of Shopify Code Editor
A Shopify theme is the one responsible for the entire functionality of an online store. Underneath these templates are theme files written in programming languages that work in unison to provide the experience as we see it in online stores.
Shopify uses Liquid as its main templating language along with HTML, CSS, JavaScript, and JSON. By using all these programming languages, web developers can develop a template from the ground up according to the desired look and feel of their clients.
Additionally, by using the code editor to input commands or logic, developers can modify Shopify theme files to change other elements or add features that are not natively available on Shopify theme editor.
Take note the Shopify code editor and Shopify theme editor are two different things. The first one is what you use to access theme files by typing in codes. The latter is what you access through your Shopify dashboard without the need to input or edit code.
Learn More About Liquid
Liquid is the main templating language implemented in Shopify themes. As such, it is important to know the logic behind the programming language and the effect of each input you make.
What Happens When Editing the Theme Code?
While editing the theme code in a Liquid file lets you achieve the look and feel that you want out of a template, there are possible drawbacks to doing so.
Shopify cautions developers that:
“If you edit your theme's code, then you might make it ineligible for updates. You should only edit your theme's code if you can't make the changes that you need by using a Shopify app or by using the theme editor.”
It is also worth noting that as mentioned, Shopify contains four types of programming languages. As such, it is crucial that you know how all these languages work together and individually to avoid making mistakes that might not be evident now but will be detrimental to your online store in the future.
Stop! Do These Before Using Shopify Code Editor
Because editing Shopify theme files may have detrimental consequences if mistakes were committed, it is important to take the necessary precautions before editing the theme code. This is especially important if you are dealing with a live website. A mistake could cost you lost opportunities if you don’t know what you are doing.
Here are 4 things that you should do before using the code editor:
01. Try To Edit Using Shopify Theme Editor
Using Shopify code editor should be your last option when looking to customize the functionalities of your website. In most online stores, the tools in your Shopify theme editor are enough to optimize the store to improve user experience.
Step 1: On the left-most panel of your Shopify dashboard, click “Online Store”.
Upon clicking, you will be redirected to the “Themes” menu by default. On the center of your screen, you will see the theme that you are currently using, as well as other themes that you have under “Theme Library”.
Step 2: On your current theme, click the green button named “Customize” to open your theme editor.
In the “Home page” menu of your theme editor, you will see different tabs to edit different sections of your home page. Depending on the theme that you chose, these tabs may be different and there may be other kinds of sections that are only available on a certain theme. Thus it is important to explore the Shopify themes before committing to one.
If you want to edit the colors, typography, buttons, and other variables of your store, you can do that by clicking “Theme settings”.
Lastly, you can install third-party apps in your online store by clicking on the “App embeds” button. Here, you can add apps to help you upsell, remind customers about their checkout cart, implement email marketing, and more.
02. Duplicate Your Current Theme Settings
If you are truly determined to tinker with your code editor, it is best to save the current settings of your theme so that when things go sideways, you can always revert back to your old settings that are fully working on your online store.
Remember that when editing your theme code, changes go live as soon as you click “Save”. Therefore, it is best to leave nothing to chance when doing this as mistakes are bound to happen as a beginner.
To duplicate your current theme settings:
Step 1: go back to your main dashboard and click “Themes”
Step 2: Click the three-dot button beside Customize
Step 3: Select “Duplicate”.
After selecting “Duplicate”, a copy of your theme will be saved under Theme Library. Make sure that you rename the duplicate file so you won’t have a hard time looking for it when you need to revert.
We advise renaming the file using the current time and date so it is easier to track your progress as you move along.
03. See If A Custom CSS File Can Do The Job
In your theme editor, you are given another option to quickly implement customizations before going deeper into your Shopify code editor. These come in the form of Cascading Style Sheets or CSS.
You can access "Custom CSS" in your Shopify theme editor under the Theme setting menu.
Here is a quick 12-minute guide in learning CSS.
If you want to dive deeper into CSS and HTML, here is a full course for you.
We know, learning HTML and CSS is a huge task. But if you want to learn the basics of coding, this will be your first step. Take your time in learning these things now to save yourself from hours of confusion, head-scratching, and frustration when you start to add and edit code.
04. One Change At A Time
Now that you know how CSS and HTML work, you can now start implementing changes directly in your theme code. But while you have this renewed confidence to edit code, it is tempting to edit multiple files at a time.
STOP.
Do it one step at a time and see the changes as they happen. Do not edit multiple files at a time. Better help your mind internalize the cause of errors and the effect of codes as they happen.
Learn Shopify Liquid
While you can make changes using CSS in your theme editor, it is worth remembering that CSS and HTML are only parts of the entire Shopify theme code. There is still the elephant in the room which is Liquid – the main templating language of Shopify.
Now, we are moving one step deeper toward Shopify code editor.
Basics of Liquid
This article by Keir Whitaker, a Shopify expert, will help you understand Liquid on the surface. It also explains the effect of different types of Liquid files and codes in your store.
Shopify Liquid Crash Course
To help you even further, here is a crash course for beginners who want to learn how to learn more about Liquid files.
This video contains four (4) parts:
- Liquid tags and filters
- Objects
- JSON schema
- Scope and limitations of Liquid.
Be sure to follow along with your own code editor to better internalize the procedures. Open a Liquid file and implement the exercises in the video.
Click on the video to begin with the crash course:
More Learning Materials
Have you finished reading the article and watching the crash course? It is now time to practice what you have learned throughout your journey.
Before that, have you made a duplicate of your online store? If not yet, now is the best time. Below, we have included a Liquid Cheat Sheet (**hush don’t tell anyone**) to give you access to all the codes you need as you move along.
There Is An Easier Way Than Editing The Code
The truth is, you don’t have to learn how to edit Liquid files to improve your website’s user experience.
Shopify code editor is a tool mainly used by experienced developers to design new templates or improve existing themes. In fact, using the code editor is only the last option when improving your online store.
If your chosen theme does not meet your demands and expectations, there are third-party apps that you can use to unlock more customization capabilities in your website without the need to edit code.
One kind of app that you can use is a page builder like PageFly.
PageFly lets you customize your store in a drag-and-drop process. You can add clickable elements, animations, increase website speed, and other things that your theme won’t ordinarily let you accomplish.
Here’s a 9-minute video explaining some of the things that you can do with PageFly:
Bottom Line: Focus On What Really Matters
As an entrepreneur, focusing on things that matter most and aspects that will benefit the bigger picture of your business is paramount in order to succeed. If you are solely doing your business through ecommerce, your website must be one of your top priorities.
However, this does not mean that you need to learn all the things that make it work – including how to edit code. Yes, it is important to know how to use and make small changes to your website through the theme editor or using page builders. But technical stuff like Liquid must be left entrusted to professionals to make sure that mistakes are avoided and the execution is proper.
Besides, if you are just starting out on your ecommerce business, or even if you are already doing it for a while, chances are you do not ever need to touch your code editor. But just in case you need to, you can always hire subject matter experts via Shopify Experts.
When you focus on what matters most and leave the technical stuff to professionals, you free up a huge amount of time so you can take your business to the next level. A step closer to success.
