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.
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/
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 :)
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.