A Comprehensive Guide To Using Theme Kit In Shopify Custom Development

There is little dispute that the popularity of Shopify is increasing by leaps and bounds in the global e-commerce industry. It remains the talk of the town among developers across the world when it comes to building the best online stores. As developers, we all understand the significance of Shopify based on the output it provides. It is, by far, one of the best e-commerce platforms that makes it easier for users to sell online; you can customize it as per your requirements.

It provides all the essential features that are significant for startup and middle-level stores. In my 8+ years of experience, I have never seen that Shopify is down due to some maintenance issues/work. And the best part is that even when the Shopify development team updates it, it doesn’t affect the performance of your store.

Considering that Shopify provides an easy and interactive admin GUI, even non-technical people can use it effectively. And it eventually means that people with sound technical skills can use it effortlessly, without any doubt.

To develop a Shopify store or set the custom design is very easy, but as it is a hosting based solution, it provides the source code editing from the admin area. Therefore, the developer needs to work in the browser only.

It is a common thing in every hosting based solution as far as I know. However, developers always feel comfortable with their code editors such as ATOM, which is a remarkably impressive tool and Visual Studio Code, which is very good, especially for the javascript developers. Apart from that, Bracket is for the creative CSS or HTML developers and Sublime for everyone. You will also find plenty of other code editors in the market.

Shopify allows you to download the theme source code and then edit it. Once you finish doing that, you need to upload the theme again, or else, you can copy the edited files and save it on your editore before you start coding. However, since developers find this process quite exhausting and inefficient, Shopify provides two different solutions for the same.

The first solution: it is possible to do the code from the admin area because the admin editor provides the necessary suggestions for the property. Once you try saving the code, it will give you the syntax error, right away; it does not save the error generation file, so your live store does not get affected with the developer’s code. Choosing this option can provide a certain level of relief; however, developers always feel more comfortable with their code editor, which I have mentioned above.

The second solution: it is nothing but the Theme Kit option, and as a Shopify expert or Shopify solution provider, I select it. Although most developers nowadays are well aware of the Theme Kit, there might be few who are new to it and hence should know more about it.

In this post, I will shed some light on this feature and will walk you through how it works, which will eventually help you understand why you should opt for it. We use this solution while working on our Shopify projects.

What Is Theme Kit?

Designed for Shopify themes, Theme Kit is a fabulous command-line tool, which plays a significant role in developing e-commerce stores. Believe it or not, but it simplifies the life of the developers to a great extent. It allows you to download the entire theme on your local system, and you can use it on your editor. When you save the file, it automatically gets uploaded to your desired theme. You can then check how effectively it is working with the command line.

So, as a Shopify developer, if you haven’t tried this method so far, and you want to know how it works, then the following steps can prove to be super helpful for you.

For macOS Installation Using The Terminal :

Those who are good at the terminal, they all know that Homebrew is extremely useful. However, if you are someone who is not very familiar with it, you can install it quickly by referring to this link.

Once you have Homebrew in your system, you just need to follow the below steps to install the Theme Kit.

brew tap shopify/shopify
brew install themekit

For Linux/Ubuntu :

For this well known operating system, you need to run the following command from your terminal to have the latest version of Theme Kit.

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

For Windows Installation :

For Windows, which is one of the most popular operating systems of all time, you need to have Chocolatey in your system. Maybe, you can install it without Chocolatey, but, as a Shopify expert, I use it, so I would like to show you how I go about the installation process.

If you want to try Chocolatey, then you can download it from this link.

choco install themekit

When I was not having the experience of this terminal, I used to find it hard to deal with these terminals. If you are having the same fear or issue, you can also download it manually from here.

After completing the manual or terminal process of installing the Theme Kit, you can then connect your Shopify store with Theme Kit. Shopify will not allow you to upload any plugin from the admin panel. However, ‘where there is a will there’s a way.’ Shopify allows you to get connected with your store by using API. You can develop the Shopify app (private app).

You can consider the following steps to create the app to connect with your store

To create a private app, go to the Shopify admin, find the apps option, and click on it. Once you do that, you will see ‘manage private apps,’ you can then create a new private app. It will help you in the future as well in the case you want to become a Shopify expert.

Fill out the required information atop and set the permission of the theme template and assets. You need to give permission wisely over here. Ideally, to utilize all the features of Theme Kit, you need Read and Write access. Select the read and write access from the drop-down and press save; you will get to the next screen. In it, you will see all the essential credentials, which we need later, while connecting the store using Theme Kit. If you are lazy like me, you should use the below images that contain all the above information.

Now, you are ready to use Theme Kit, now let’s check how you can see the existing theme list and configure it.

Note: Before running the command, you need to reach the path from where you can download your theme and assets. Once you do that, I will show you how you can download the theme with the use of the Theme Kit.

We all know that no Shopify developer works on multiple themes at the same time. So for theme customization in Shopify, you will have to use one theme at a time. However, to get that one theme, you must have the theme id for it. You can find the theme id from the preview link id. It is significant for you to understand that theme id and preview link id are the same. However, why to see the preview link when you can have the fill access using Theme Kit.

You can consider the below steps to get the theme list quickly:

theme get -list -p=[your-password] -s=[you-store.myshopify.com]

Here, remember your password; it will be your store password, so use a recallable password instead of a generic one. By the above command, you will get the theme id.

Now please have a note of that theme id that you wish to configure.

theme get -p=[your-api-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

Now you can run the above command to configure that theme, which you need to customize. Here in theme id, you only need to place your noted theme id.

Another quick note: Theme kit is also having some required parameters and some optional parameters.

Environment Commands

These commands are always useful to the developers. You can use the different environments by naming them with the -env flag or -e flag. Here -e is the short form of the environment command. Shopify’s default environment is ‘development’ just like other CMS. If you wish to deploy the production environment, then probably you need to run the below code :

theme deploy -env=production

Configure Commands

Once you have decided your environment, now it is time to configure those environments in the config files. Here, you can create and, of course, update the configuration file by following the below command.

theme configure -password=[your-api-password] -store=[your-store.myshopify.com] -themeid=[your-theme-id]

Now, I hope that I do not need to tell you about the parameters. You may know all of them. You can see the config.yml in your directory from where you are running this command.

Deployment Commands

Deployment is a well-known process in our industry. We do not need to elaborate on this; therefore, I am going to show you the command directly on this.

theme deploy

You can run the deployment command with files’ names or without names. If you provide file names, it will only replace or deploy those files. Also, you need to give the full path, for instance:

theme deploy section/product-grid.liquid

Download Theme

If you call the command directly like below, then the complete theme will be retrieved.

theme download

If you need to download specific files, then you need to give the exact path based on the Shopify architect. The example command is below :

theme download templates/theme.liquid templates/article-detail.liquid

Create A New Theme Command

To directly create the new theme, you can apply the following command.

theme new -password=[your-api-password] -store=[your-store.myshopify.com] -name=”Shopify Development Theme”

Remove File Commands

Many times, developers make the typo mistake while creating the file in Shopify. Now, they can remove it by using the below command.

theme remove templates/404.liquid templates/article.liquid

Watch Command

It is one of the most significant commands. Those who are node developers will be happier by seeing this command. This command will run continuously on the system. Whenever you make modifications, this command will have the watch on it. Once you save the file, it will save the file directly on the Shopify store.

Here is that superpower command:

theme watch

There are many other commands which are provided by Theme Kit, to check them, you can use the help command.

theme help
theme [command] -help

To conclude this blog, I would like to emphasize that at ZealousWeb, we use the Theme Kit to create custom themes for Shopify, and we like it tremendously for its developer-friendly commands. I would also like to say that we always have one copy of the code in the local system.

If you have any questions regarding this, you can reach us at opensource@zealousweb.com; We will solve your queries as soon as possible.

Originally published at https://www.zealousweb.com on May 7, 2020.