There is a reason why Shopify is quickly becoming the global powerhouse of eCommerce platforms. It provides almost everything you need to get your online store started for an affordable monthly fee. But for every Shopify user, there will likely come a time when customization is required to take your theme beyond its default design and functionality. Keep reading to find out more about Shopify’s Liquid framework, the skills required to customize it, and resources to get you started.
What Is Shopify liquid?
Liquid is the language used by web developers to build Shopify sites. Since its creation in 2006 by Shopify co-founder and CEO Tobias Lütke, it has been improved and extended by the Shopify platform to support Shopify theme development. Liquid framework is now available as an open source project on Github to facilitate other platforms, which means you can customize it to your needs and even help extend the functionality by contributing to it through Github. Today there are many other hosted platforms that use Liquid frameworks including static site generators and content management systems (CMSs).
Shopify Liquid Language
You need knowledge of C++, PHP, JavaScript or any of the basic languages as a base to learn to code Shopify Liquid. You can’t do core programming or extend the functionality, but you can use already existing functions to achieve the desired functionality.
Code Parameters
- {{ }} denotes logic. Anything between these medium brackets does not print / display but builds the logic.
- (% %) denotes output. Anything between small brackets and percentage signs shows output of the logic.
A simple example of logic and output would be
{% for image in product.images %}
<img src=”{{ image | img_url: ‘300×300’ }}”>
{% endfor %}
Liquid File Extensions
File extensions are kept as “.liquid”. A Liquid file can be a combination of HTML / JavaScript and Liquid code. A simple file example would be product.liquid and theme.liquid.
Shopify Theme Development
Shopify gives you control over the look and feel of your store’s theme as well as lets you integrate custom functionality into your store. You can start with the free default theme that comes with Shopify called “Debut,” you can choose one from the Shopify Theme Store, or you can download one from Themeforest if you want to have custom theme design.
We recommend starting with a paid theme that has a similar look and functionality that you desire and then customize it to exactly match your brand vision. Though Shopify gives very limited access to themes, you can always improve functionality by integrating different apps from the Shopify App Store.
If you want to adopt Shopify as a front-end developer or back-end developer, you must have a good understanding of the Liquid framework. You also need to have a good understanding of HTML, Liquid, SCSS, and CSS languages to make a perfect theme.
Shopify Theme Structure
- Layout: Contains a single file called theme.liquid, which calls all external files and also defines the <head> tag. You can reference CSS / JavaScript files and also define the website’s meta tags in this file.
- Templates: Contains different templates for index page, product page, cart page, etc. You can create custom templates for custom pages.
- Sections: In a template, you can create different sections to perform different functionality. This is to make the theme manageable and organize different sections into separate files.
- Snippets: A snippet may have a small chunk of code that extends the functionality of a section. It can only perform a small task.
- Assets: Contains all static assets that build the theme like CSS, JavaScript, images, etc.
- Config: Contains all the theme settings and configurations that have been done to date.
- Locales: Contains language files. If you have multiple languages on your Shopify site, you need to upload file language shortcodes. For example, you need to create a file called fr.json for French.
Platforms for Creating and Customizing Shopify Themes
Since Shopify is a hosted platform, it doesn’t allow you to set up a local environment for theme development. This means you are left with two platforms to create and customize Shopify themes.
Customize the Theme Code Inside Shopify
Custom code is the traditional method for developing a Shopify theme. You can build the code locally, upload the files into Shopify, and test your code. Or, if you have a good understanding of HTML / CSS and can write code without needing any code editor, you can do the editing inside the Shopify platform. This method has its advantages, like you don’t need any third party softwares and there is no command line interface that you need to learn.
Use Theme Kit to Customize the Theme Code
Theme Kit is designed for Shopify themes and is available on all major operating systems. It has a command-line interface that builds a connection between Shopify and your local theme files. There is a misconception that Theme Kit is a development tool used for coding, which is completely based on false assumptions. Theme Kit is created and maintained by Shopify. Once you install Theme Kit, you need small configurations to make command work with Shopify. Within a few minutes, you will be all set to work with your theme creation and customization.
To do local development using Theme Kit, you need to connect your local project to the Shopify system. This connection is made through API keys, which you get from the Shopify store. These API keys allow Theme Kit to communicate with and access your store, as well as its theme files. You need your API password, store URL, and theme ID to get started.
Theme Kit’s key features include:
- Working with Shopify themes locally
- Uploading themes to multiple Shopify accounts
- Synchronizing themes in real time, which eliminates the need for manual downloads/uploads
Theme Kit Works on all major operating systems including Windows, Arch, Ubuntu, Linux, and macOS. You can install it manually by downloading a ZIP file from the Theme Kit site and using these instructions to install.
Shopify Liquid Programming
When we talk about Liquid programming, the first question that comes to mind is if .liquid is a programming language like .PHP? The answer is no, it’s a template language written in Ruby. It’s the backbone of Shopify themes used to load dynamic content onto the storefront and write logic for the dynamic content.
Only through Liquid code it is possible to communicate to the Shopify system. HTML, SCSS, and CSS are used to style the output generated by Liquid code.
Mastering Liquid to Create the Perfect Shopify Site
Because so many eCommerce stores are now being built with Shopify, it’s important to differentiate your site from your competitors. Understanding Shopify Liquid gives you the edge to go beyond the template. To get started, our best recommendation is to begin with Shopify’s Liquid Cheat Sheet, consider hiring a Shopify Expert, or finding a more affordable freelance Shopify developer through platforms like Upwork.
