Create a Shopify Theme Dev Environment

I’ve recently been working with setting up Shopify online stores. There are a few popular ecommerce services out there that are very powerful, inexpensive and really good but I just love the architecture and coding practices that Shopify use. For themes, Shopify use Liquid (resulting in files having the .liquid file extension) which is a Ruby programming language library. Using Liquid means a more secure theme environment.

How to edit Shopify theme files on Windows

For making minor Shopify theme changes there is a very basic editor included within the Shopify dashboard. If you’re into theme development or want to make quite a few changes to a theme then you really need a better code editor. For those that use Apple Mac then Shopify provides software that will make editing files locally simple. For Linux there are a few means of editing Shopify theme files locally and for Windows, well follow my instructions below. I use Windows 8.1 and I spent countless hours using Grunt, Subversion and everything in between and couldn’t  figure out how to edit theme files on my PC and have the changes uploaded to my Shopify development shop.

Fortunately I then figured out that using Git is the way to go. More specifically, the environment as described below is what works for me.

Windows development environment setup for Shopify themes

Below is the environment (configuration) that I successfully use to develop Shopify themes on my Windows 8.1 PC . I’ve setup my environment per the instructions below and then I merely edit, add or delete files locally from the Shopify theme on which I’m working and then commit and push the updates to Beanstalk and then deploy from there to my Shopify development store. I haven’t covered instructions on how to use each service or software as I’m sure you’ll figure that out 🙂 . Here are the instructions:

1. Create an account at Beanstalk. Follow instructions at Beanstalk to setup connectivity with Shopify (use the Git repository option rather than the SVN option).
2. Download and install msyGit package to your PC.
3. Download and install TortoiseGIT; Beanstalk provide good instructions (note: in the Clone Beanstalk repository section of the instructions use the HTTPS option rather than using SSH keys; this makes things a little less secure but is far simpler to setup).
4. To edit .liquid files install Sublime Text 2 code editor with the Liquid Syntax Mode package (I spent ages trying to get Notepad++, Brackets.io and other text editors to understand the .liquid syntax with no success but finally found that Sublime Text 2 with the noted package works very well).

Why use Shopify instead of WooCommerce

Yes, we’ve spent years building all sorts of WordPress websites. We still love WordPress and believe that for websites and blogs WordPress is by far the best way to go. For ecommerce however my customers have found Shopify simpler to use and I have to say that I really like the secure environment that Shopify provides. In a separate post I’ll describe more on why I believe Shopify to be a (much) better choice than WordPress if you sell online.

If you need help with setting up a Shopify online store then contact me.