Recently, I was in charge of building a new e-commerce site, Everything Home Grown. It’s built using Shopify.
Shopify offers an in-browser HTML/CSS editor. It’s great for making small changes to your theme. But when you’re building an entire e-commerce store from scratch, the in-browser editor just doesn’t cut it.
It was important to me to get a decent development environment up and running. One that would allow me to use version control and the text editor of my choice.
Have no fear, Theme Kit is here!
Theme Kit is a CLI tool that helps with building Shopify Themes.
Theme Kit boasts the following features:
- Upload Themes to Multiple Environments
- Fast Uploads and Downloads (no really, they mean it, it’s almost instant)
- Watch for local changes and upload automatically to Shopify
- Works on Windows, Linux and OS X
If you’re using OSX or Linux, run this command in Terminal:
$ curl https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | pythonAfter running that command, follow the instructions in your Terminal to change your bash profile. This will give you access to the theme commands.
If you’re using Windows, head over to Theme Kit’s website to download the .zip files. Once downloaded, unzip and install Theme Kit manually.
To authorize Theme Kit with your Shopify store, you’ll need to create a Private App.
Head over to:
https://[your-shopify-store].myshopify.com/admin/apps/private
It will look something like this:
Click ‘Create Private App’ and you will see a page like this:
Add a Title for your app. I usually use the name of the project or client.
You’ll also need to change the permissions for Theme templates and theme assets to Read & Write.
Click ‘Save App’. Then copy your API Password, you’ll need it in the next step.
To set up your config.yml file, you’ll need the following pieces of information:
- Your API password from Step 2
- Your Shopify store’s URL
- Your Theme ID
The easiest way to find your Theme ID is to go to your Shopify Admin Themes page, click on the theme you want to use, and copy the ID from the URL.
Once you have those three pieces of information, just plug them into this command and run it inside the local folder you want the theme in.
# creates configuration file
$ theme configure --password=[your-api-password] --store=[your-shopify-store.myshopify.com] --themeid=[your-theme-id]# example cmd: theme configure --password=c1641cecb37bb6420dfc6b9bdee9c063 --store=example-store.myshopify.com --themeid=11926024# this will download entire theme to current directory
$ theme download
At this point you should have successfully downloaded your Shopify theme to your local folder.
The last step is to run this command inside that folder:
$ theme watchWhen you edit your theme locally, Theme Kit will watch for changes upload them to your live site.
Note: These changes will upload directly to your live site. Tread carefully.
This is part 1 of 3 in our Shopify development environment series. Check out part 2 here.
)
