Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Getting a good development flow going on for Shopify will make the development process that much more enjoyable. Shopify is already a great platform to work on, but there a few little gotchas since you give up a little control in the development environment.

First is the text editor. Shopify offers editing the theme right in your online store. Most developers, however, have a preferred text editor with snippets and syntax highlighting set up exactly how they want. For this reason, there’s also a Desktop theme manager . But this is only available on Mac, and, in my experience, is slow to upload and crashes often. This leads us to the third and best option - the Shopify Theme Gem

If you don't already have a theme for your store up and running, here is a great place to start. Tetchi takes you through the full process of setting up and building a theme from scratch.

The Shopify Theme Gem

The shopify gem allows you to set up a watch task in your terminal that will continuously upload your changes to the theme on file save. This gem works on any OS X or Windows machine with at least ruby 1.9 installed.

Installation

1. Create a private app in Shopify

• Navigate to your_store.myshopify.com/admin/apps/private

• At the top right-hand side click create private app

• Give it a name, I called mine ‘Shopify Theme’ and click save

• Now if you go back to your_store.myshopify.com/admin/apps/private, you’ll see your app

• Click on the app and you’ll see an Authentication section. In there you will find your API key and your Password

2. Configure the App in the Terminal

• Now in your Terminal, navigate to the root directory of your theme

• Enter the following command to configure the gem

  $ theme configure api_key password store_domain

  Note: put in the actual values for api_key, password, and store_domain, leave out (https://), eg. 'example.myshopify.com'

3. Configuration File

• The previous command will create a config.yml file in the root directory. Just take note that this has your correct info as well as a whitelist of all the directories in your theme

  ---
  :api_key: xxxxxxxxxxxxxxxxxxxxxx
  :password: xxxxxxxxxxxxxxxxxxxxxxxx
  :store: example.myshopify.com
  :theme_id: 
  :whitelist_files:
  - layout/
  - assets/
  - config/
  - snippets/
  - templates/
  - locales/
  

Usage

• Then in the terminal, while still in the root of your theme, put the following command

  $ theme watch

  Now every time you save the theme will be uploaded

• Added Bonus: if there’s an error in your theme, it won’t be uploaded and you’ll get a (hopefully) detailed error message :)

Possible issues

If you type in theme watch into your terminal and nothing happens, it may be a permissions issue. Go back into your private apps and click on the theme gemapp you created. Scroll down to the permissions section and make sure all the permissions are 'Read and Write' up to and including Theme templates and theme assets. Now try theme watch again.

Next - Improving your SASS experience

Now check out our post on improving your sass experience.