Back when we were PSXO, we used WooCommerce it required my engineering team to be very involved to develop all the things we wanted to build for our site and I believe that wordpress based ecommerce sites were just bloating the stack so much that the performance was taking a really big hit. With Shopify Plus I get almost everything I was able to get through WooCommerce minus certain liabilities and infrastructure maintenance.

That said, most people tend to think that Shopify is just quite turning on an ecommerce platform but that you have little control over it. To me, I needed to make sure that I had a way to do some interesting stuff but without sacrificing traceability, rollbacks, ease of deployment, etc.

Setup Development environment

First things first, we need a development environment and a production environment. To do that, we need to create a partner account, this will allow you to have a sandbox where to push.

Creating the store access tokens

Once you have the sandboxes you need, for each one of those and for production create the private apps that will give you access to connect to Shopify.

In the Admin Page go to the Apps menu, on the top right corner, select “Private Apps” then locate the button names “Create a Private app” in the top right corner. Once you fill in the title you will get an API Key.

Using Theme to upload and download Shopify template and assets.

One thing I wanted from the beginning was the ability to use whatever text editor I wanted as opposed to the web interface. Also I tend to prefer the ability to push things through the command line as opposed to a GUI.

Shopify Theme is a great way of uploading and downloading all the assets and themes. It provides all sort of filesystem operations and even includes a little daemon -theme watch- listens for and uploads local changes. This feature is quite handy while you work on things.

Once it is installed, set it up. You will need a config file where you can plug in the keys above and download the current theme to your computer using theme download

Version control

Prerequisites

Once you have downloaded the theme, setup your repo with the classic:
git init
git add *
git commit -m 'Initial commit'

Now lets make things easy for us. What we want to acheive with the following results is that every time we change a branch, we can switch the config to point to one of the sandboxes we have. Ideally allowing us to have the master branch pointing to production while other branches point to other sandboxes.

To accomplish this we need to install GitPython, shopify_theme and PyYAML

Here are the commands I used:

1 sudo easy_install GitPython
2 sudo gem install shopify_theme

Download PyYAML then run:

1 python setup.py install

Scripts

You need to create a $ROOT/tools/bin and $ROOT/tools/etc directories

Once that is done, place the scripts below in the right places. One is just the hook that happens after you switch branches. The other is the script that reads a YAML file (at the bottom) that contains all the API keys and branches mapped out. The example branches are master and devbranch.

.git/hooks/post-checkout
1 #!/bin/sh
2 `git rev-parse --show-toplevel`/tools/bin/branch_config.py
tools/bin/branch_config.py
 1 #!/usr/bin/python
 2 
 3 import os
 4 from git import *
 5 from yaml import load, dump
 6 try:
 7     from yaml import CLoader as Loader, CDumper as Dumper
 8 except ImportError:
 9     from yaml import Loader, Dumper
10 
11 REPO_HOME = os.path.abspath(os.path.dirname(__file__))+"/"
12 repo = None
13 while not repo:
14     try:
15         repo = Repo(REPO_HOME)
16     except:
17         REPO_HOME += "../"
18 
19 
20 branch = str(repo.head.reference)
21 
22 key_path = REPO_HOME + "/tools/etc/shopify_keys.yml" 
23 target_path = REPO_HOME + "/config.yml" 
24 
25 data = {}
26 empty_data = {":api_key":"", ":password":""}
27 target_data = {}
28 
29 try:
30     data = load(file(key_path, 'r') )
31 except:
32     pass
33 
34 try:
35     target_data = load(file(target_path, 'r'))
36 except Exception,e:
37     print e
38     pass
39 
40 config_data = data.get(branch, empty_data)
41 if config_data:
42     target_data.update(config_data)
43     output = dump(target_data, Dumper=Dumper,  default_flow_style=False)
44     with open(target_path, 'w+') as outfile:
45         outfile.write(output)
tools/etc/shopify_keys.yml
1 ---
2 devbranch:
3     :api_key: XXXXXXXXXXXXXXXXX
4     :password: YYYYYYYYYYYYYYYY
5     :store: devstore.myshopify.com
6 master:
7     :api_key: XXXXXXXXXXXXXXXXX
8     :password: YYYYYYYYYYYYYYYY
9     :store: mystore.myshopify.com

Develop

Before starting make sure you are getting the matching result of the config.

1 > git checkout devbranch
2 > cat config.yml
3 :api_key: XXXXXXXXXXXXXXXXX
4 :password: YYYYYYYYYYYYYYYY
5 :store: devstore.myshopify.com

As you are developing and as said above, now is the time to start theme watch to upload changes as they happen to your site.

Gotcha’s

Keep an eye on your shell when you are running theme watch as it won’t restart when the config switches and you may be pushing to the wrong repository. Make sure you CTRL+C or kill the theme process before switching branches.

Conclusion

Having a process that allows you to switch, deploy and track is one of the most important things you can do for any site. Using the patterns discussed here, allows us to switch and reconfigure automatically the site without having to think much of where we are deploying to.