How to develop Shopify Themes with Theme Kit

by Frantisek Friedl



Shopify Theme Kit is a simple tool enabling you to automatically synchronize changes you made to a theme in your favourite text editor, with the actuall Theme that resides in your Shopify Store account. Without this clever utility, the
development of Shopify Themes would be very inconvenient as you would need to manually upload the local repository of your theme into your Shopify store every time you want to preview your changes. 


Getting started

You can install Shopify Theme Kit using a package manager depending on your operating system and the environment you operate. You can find specific instructions how to install Theme Kit on your machine using here.

Once installed, open your command prompt and type 'theme' to check that your installation has been successfull.

Shopify Confirmation of Instalation

If not, you may need to add path to your Theme Kit under Environmental Variables.

Environmental Variables

Setting up Theme Kit

To use Shopify Theme Kit we will need to create a configuration file in our Shopify Theme repository. This file will need to tell Theme Kit in which Shopify Store the theme resides (store), which specific Theme in that store should be updated (theme ID) and we will also need to authenticate Shopify Theme Kit to access our store and make changes to our theme (password). The configuration will look like the following and will be placed in the main Theme directory.


Theme Kit Configuration

Let's now go into our Shopify store to look for all the necessary information. to find the URL of our store, we simply go to our store's homepage, and copy its URL.

 

Store Domain Name


To find the ID of our Theme, we can do this from the Homepage by navigation to the 'Online Store - Themes', selecting the appropriate Theme and pressing 'Customize'. This will take us to the Theme's page. The 'Theme ID' is simply the number in the URL of this page.

Getting Theme ID


Finally we need to create a password to authenticate Shopify Theme Kit with our Store. Shopify Theme Kit communicates with our Store via API. We will therefore need to setup a private application by navigating to the 'Apps' tab. Here we can 'Create new private app'. Give it a name and make sure to give it 'Read and write' permissions for the theme.

App Permisions


Finally copy the 'Password' from the 'Admin API' section into your configuration file. You are all set now and we can start using our Shopify Theme Kit.


Using Shopify Theme Kit

To use Shopify Theme Kit, first navigate to the repository of your Theme using the command line. From there you can start using Theme Kit. It will automatically use the information from the config.yml file that we have created previously, to access our Store. List of all commands is available here

Some of the most useful ones are:

theme new - this will create a new Theme on our local machine with all the repositories (visit the documentation to see what parameters this command takes).

theme watch - this will automatically propagate changes from our local repository into the Shopify store.

theme get - this will download the specified Theme from our Shopify Store (useful for synchronizing changes made to the Theme in the Store. Refer to documentation)

You are now ready to start developing your Shopify Themes!


Leave a Comment: