This experience is based on the time I got tasked to build a website based on Shopify for the first time. TL;DR, Shopify is an paid e-commerce platform that has all its hosting done on their servers. Similar to wordpress.com, Shopify also uses  a web-based code editor. The editor comes with features like code and matching tags highlighting which is pretty good.

However, for me, this standard is too simple because I’d rather code it on my own machine. So after a couple of hours of searching, I found what I had been looking for, Theme Kit.

What is Theme Kit

A couple of weeks ago, it was an open source project, but it’s now currently an official tool from Shopify. Using Theme Kit, you can…

1. Upload themes to multiple environments.
2. Have fast uploads and downloads.
3. Watch for local changes and upload it automatically to Shopify.
4. Works on OS X, Windows, and Linux.

Installation

There are 2 methods of installing Theme Kit, automatic and manual. Only OS X and Linux can benefit from the automated installed however.

1) Automatic Installation

Run the following command on your terminal.

curl https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | python

Follow the directions outputted to your console to change your bash profile so that you will have access to the theme command.

2) Manual Installation

Download according to your machine’s architecture.

OS	Architecture
OS X	64-bit	Download
Windows	64-bit	Download
Windows	32-bit	Download
Linux	64-bit	Download
Linux	32-bit	Download

For OS X and Linux run this command in the terminal.

cp ~/Downloads/theme /usr/local/bin #install the command onto your path

For Windows follow these steps instead:

1. Create a folder inside C:\Program Files\ called Theme Kit
2. Copy the extracted program into C:\Program Files\Theme Kit
3. Navigate to Control Panel > System and Security > System. Another way to get there is to Right-Click on My Computer and choose the properties item
4. Look for the button or link called Environment Variables
5. In the second panel look for the item called Path and double-click on it. This should open a window with a text field that is overflowing with content.
6. Move your cursor all the way to the end and add the following: ;C:\Program Files\Theme Kit\
7. Click OK until all the windows are gone.

After you’re done finishing with the installation, run command ‘theme’ in the terminal. If the output is like image below, then your installation is a success.

Configuration

Get API access

1. Head to https://[you-store-name].myshopify.com/admin/apps/private it should look something like this:
   
2. Click on the Create private apps button. You will see this screen:
   
3. Fill out the information at the top and set the permissions of Theme templates and theme assets to read and write access. Click save and you will be presented with the next screen. In it you will see your access credentials. Just pay attention to the password. as Theme Kit only needs the password to work.

Use new theme

If you want to start developing a Shopify theme from scratch, then run this command.

theme bootstrap --password=[your-password] --store=[you-store.myshopify.com]

This will create a new theme based on the Timber template. It will then download all those assets from Shopify and automatically create a config.yml file for you.

Configuring existing theme

If you want to edit an existing theme, first get the theme id. You can get it from the number in the URL:

Run this command

# create configuration
theme configure --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]
# download and setup project in the current directory
theme download

After all the files have been downloaded, you want to start editing. But don’t forget to run this command.

theme watch

This will make all the changes you make will be automatically upload to Shopify server.

So there we have it, this is how you can get developing on Shopify without being restricted to the use of their web editor. Did this guide help you? Unclear about a specific section? Drop us a comment down below and we’ll get right on it.