Skip to content

Our Shopify Theme Development Workflow

Posted by Ryan on

Key Features:

  • Use your favorite text editor
  • View all your files at once
  • Use SASS/SCSS and componentize files
  • Live browser reload
  • Version control with GitHub

Step One:

Install theme kit here (https://shopify.github.io/themekit/) and run the following command:

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

Once installed, run the following command to see that you’re up and running with the latest version

theme version

Step Two:

Make a directory that you’re going to be working out of and then move into that directory so something like this

mkdir mynewshopifysite
cd mynewshopifysite

The create a config file using vim:

vim config-example.yml

Once in vim, insert the following and then write and quit.

development:
store: example.myshopify.com
password: secret
theme_id: "live"
bucket_size: 40
refill_rate: 2
ignore_files:
- "*.swp"
- "*~"
- “config/settings_data.json"

Step Three:

Initialize your git repository:

git init

Then create a gitignore file and ignore the following files:

config.yml
config/settings_data.json
prepros.config

Step Four:

Copy the example config file that we create so that we can put our secret information in there. Notice that it’s ignored above so that it won’t be exposed to the public.

cp config-example yml config.yml

Edit config.yml via vim just the same way we did earlier. Assuming you’ve create a development shop through your Shopify Partners account. You’ll want to update this config file with the actual info like so:

development:
store: NAMEOFYOURSHOP.myshopify.com
password: secret
theme_id: "live"
bucket_size: 40
refill_rate: 2
ignore_files:
- "*.swp"
- "*~"
- “config/settings_data.json"

The password you’ll get by creating a secret app in the backend of Shopify:

Apps > Manage Private Apps

Create a new app and then you’ll want to copy the password right underneath the API key:
Also while you’re in here, go down to Permissions and make sure that Theme templates and theme assets are set to “Read and write”

shopify-theme-development

Now, back in config.yml go ahead and paste that password in where we had the word “secret”

Viola! Now we can run theme commands that interact with the store.

Step Five:

Download the theme that’s on shopify so we have it for local development:

theme download

Now we should have everything up and running so that we can use our favorite text editors and do things like search and replace the entire project which is something you can’t do using shopify’s text editor. It also lets us utilize all of our favorite text editor extensions for rapid development. Not only that, we can commit all of our changes to GitHub and have a backup of our work.

Step Six:

Run:

theme watch

There you have it! Oh ya, if you want to to set up Live Browser Reload, download this app (https://prepros.io/) and drop your Shopify project in there. Make sure to configure the settings once it’s in there.

Did you like this article?

Share it on these social networks!

Leave a Reply

Your email address will not be published. Required fields are marked *

So now what?

We’re ready! Let’s do this.

Milano Design: Branding, Web Design, Ecommerce, Graphic Design, Marketing, Santa Cruz, Monterey, Los Gatos, San Jose