Complete Guide To Shopify Custom Theme Development Using Theme Kit

There is no denying that Shopify’s custom theme development is gaining popularity in the eCommerce industry. It’s a hot topic among Shopify experts worldwide for creating top-notch online stores. As developers, we recognize Shopify’s significance due to its outstanding performance. It stands out as one of the best eCommerce platforms, making online selling and customization a breeze.

Offering essential features for startup and mid-level stores, Shopify has proven reliable in my 8+ years as a hired Shopify expert. Remarkably, I’ve never encountered downtime during maintenance or updates by the Shopify development team. The platform’s user-friendly admin GUI ensures even non-technical users can navigate it effectively. This means individuals with solid technical skills can effortlessly use it, making it worth considering, even for those from a non-technical background.

Creating a Shopify store or custom design is straightforward. However, as a hosting-based solution, source code editing occurs in the admin area, requiring developers to work in the browser. While this is common in hosting-based solutions, developers often prefer their code editors, such as ATOM and Visual Studio Code for JavaScript developers. Various code editors like Bracket for creative CSS or HTML developers and Sublime for everyone else are available in the market.

Shopify lets you download the theme source code, edit it, and then upload the theme or save the edited files in your preferred code editor before coding. Recognizing the inefficiency of this process, Shopify provides two different solutions for the same, catering to the needs of developers in the Shopify custom theme development and custom Shopify development landscape.

There are two solutions to consider in the Shopify custom theme development. The first involves coding in the admin area, offering relief as it avoids affecting the live store with syntax errors. However, developers always feel more comfortable with their code editor when using this custom Shopify development option.

On the other hand, the second solution revolves around the theme kit option. As a Shopify expert or Shopify solution provider, I select it. Although most developers are well aware of theme kits in custom Shopify development, there might be a few who are new to it and should know more about it. In this post, I will shed some light on this feature and walk you through how it works, eventually helping you understand why you should opt for it. We use this solution while working on our Shopify projects.

Crafting eCommerce stores is simplified with Theme Kit, a fantastic command-line tool designed for Shopify themes. It greatly eases developers’ lives, allowing them to download the entire theme to their local system. Utilizing an editor, you can make changes and, upon saving, witness seamless upload to your chosen theme. If you’re a Shopify expert yet to explore this method, the following steps can be immensely helpful.

Those good at the terminal 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.

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

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, download it from this link.

When I did not have the experience of this terminal, I used to find it hard to deal with these terminals. You can download it manually from here if you have the same fear or issue.

After completing the manual or terminal process of installing the Theme Kit, you can then connect your Shopify store with the 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 connect 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 also help you in the future if you want to become a Shopify expert.

Fill out the required information 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. Scroll down to the video that describes the process mentioned above.

Your browser does not support HTML5 video.

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

Note: Before running the command, you must reach the path to download your theme and assets. Once you do that, I will show you how to download the theme using the Theme Kit.

We all know that no Shopify developer works on multiple themes simultaneously. 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 important for you to understand that the theme ID and preview link ID are the same; however, why not see the preview link when you can have full access using Theme Kit?

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

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 make a note of the theme ID that you wish to configure.

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

Another quick note: The theme kit also has some required parameters and some optional parameters.

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 you probably need to run the code below:

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

I hope 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 run this command.

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

theme deploy

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

The complete theme will be retrieved if you call the command directly, like below.

theme download

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

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

Developers often make typo mistakes while creating the file in Shopify. Now, they can remove it by using the below 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:

Many other commands are provided by Theme Kit. To check them, you can use the help command.