Setting up a Shopify Development Environment: Part 1

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 the text editor of my choice and production/dev environments.

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:

Step 1: Install Theme Kit

If you’re using OSX or Linux, run this command in Terminal:

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

After 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.

Step 2: Set up API Access

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:

Shopify Private Apps API Setup

Click ‘Create Private App’ and you will see page like this:

Shopify Create Private App

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.

Shopify App Setup Copy API Password

Step 3: Set up Your config.yml

To set up your config.yml file, you’ll need the following pieces of information:

  1. Your API password from Step 2
  2. Your Shopify store’s URL
  3. 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.

Shopify Copy Theme I D from U R L

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 theme watch inside that folder.

When 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.

Continue Reading – Part 2

Need help with a project? We'd love to hop on board. Hire Us.

Get In
Touch

Must be a valid email address.