How to automate your build and deploys for Shopify with Github and Codeship

Out of the box, developing themes for Shopify can be an onerous process, requiring the use of a web editor, and little ability to control changes to the code.

Modern development workflows include the use of a code versioning system, such as git, that provides the ability to create branches for specific environments and separate out features from the main trunk to be independently built. This has not been possible with Shopify, until now.

I am going to show you how we have integrated our standard git-flow with Shopify projects with repositories hosted on Github and deployments via Codeship. 

Prerequisites

• Github repository
• Codeship account
• Shopify shop

Overview

Before we get started, it will be useful to examine how we will pull off deployments, and do development work.

Do not get too excited yet! Though the code will exist in Github, there is not yet a good method for local development of Shopify sites. You will be able to use your IDE of choice to edit files, but will still need to deploy them to Shopify to see them in action for the time being.

Shopify has a tool called Themekit we will leverage to deploy. This tool was designed with local development in mind, I.E. runs this tool locally while editing files, not as a CI/CD solution. It will, however, perfectly suit our purposes.

Themekit replaces the Shopify_theme ruby gem.

Jump to the final step and see the Codeship deploy script #########

Step One: Create a new project in Codeship

From the Projects page, create a New Project

https://app.codeship.com/projects

Chose the repository host. In our case, Github

Pick the repository

Pick the Codeship plan

Step Two: Set Codeship for Ruby

Select Ruby as the technology and save.

Step Three: Pick the branch to deploy from

Codeship will be monitoring a specific branch. When it sees a new commit a deploy will be kicked off. Pick the branch now.

Step Four: Add a deployment

After choosing a branch, the page will refresh and a section called Add Deployment will appear. We want to select Script.

You will see a text area where we will be entering the script. For now, leave it as it- we need to detour to gather some additional details.

Step Five: Locate the Shopify API credentials

If you do not have one already, create a set of API credentials for a private app.

Credentials can be found at: https://MYSHOP.myshopify.com/admin/apps/private

Of importance to note is the password.

In the script, fill in the following lines:

SHOPIFY_API_PASSWORD={your-api-password}
SHOPIFY_STORE_URL={your-shop-url}

Step Six: Find the theme id

Shopify allows multiple themes to be uploaded to the site (only one is active!). When Themekit deploys it sends the uploaded files to a specific theme on the site. That theme is selected via its theme id.

The theme id can be tricky to locate. The best method I have found is to grab a JSON file from a “hidden” Shopify API endpoint.

Theme list, output as JSON

https://MYSHOP.myshopify.com/admin/themes.json

That ugly text is not very friendly. Passing it through a JSON linter will make it readable. I like this one

https://jsonlint.com

Here is an example of the result. You will have one or more of these, depending on how many themes are installed on your site.

{
  "id": 32243974247,
  "name": "Debut",
  "created_at": "2018-07-16T11:27:00-04:00",
  "updated_at": "2018-07-19T09:51:22-04:00",
  "role": "unpublished",
  "theme_store_id": 796,
  "previewable": true,
  "processing": false
}

The line starting with “id” is what we need. That number is the theme id.

Take special note: The them id will be hardcoded into the script. Changing the theme in Shopify’s admin may have unintended consequences. Be sure to come back here and update the theme id if the theme in your shop is changed.

In the script, fill in the following lines:

SHOPIFY_THEME_ID={your-theme-id}

Step Seven: Install Themekit

Themekit is a handy tool that can be used to deploy the theme. Please note that this tool takes a shotgun approach and will upload all of the theme files, not only the changed files. Understanding this becomes highly important when working with multiple developers. If each is running the command locally they will overwrite each other’s files. This is where git becomes powerful as all changes will be integrated together on the deploy branch.

Themekit has installation instructions for several operating system platforms available at

https://shopify.github.io/themekit/#installation

In the script, add the following line:

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

Step Eight: Tell Themekit to deploy

Now we get to the point where Codeship has the environment fully set up, the theme code checked out and is ready to be told how to deploy the files.

In the script, add the following line:

theme deploy -p="${SHOPIFY_API_PASSWORD}" -s="${SHOPIFY_STORE_URL}" -t="${SHOPIFY_THEME_ID}”

Step Nine: Deploy!

Congrats on making it this far! Now we get to deploy. Open a terminal and cd into the theme project folder.

tldr; Just give me the full script!

Here is the complete script we use. It has a couple of extra goodies in it not mentioned above. You can copy it, fill in your credentials, and go!

#!/bin/bash
# Deploy to Shopify
# Uses https://shopify.github.io/themekit/
# You can either add these here, or configure them in the environment variables section of your project settings.
SHOPIFY_API_PASSWORD={your-shopify-password}
SHOPIFY_STORE_URL={your-shop-url}
SHOPIFY_THEME_ID={your-theme-id} SHOPIFY_API_KEY=${SHOPIFY_API_KEY:?'You need to configure the SHOPIFY_API_KEY environment variable!'}
SHOPIFY_API_PASSWORD=${SHOPIFY_API_PASSWORD:?'You need to configure the SHOPIFY_API_PASSWORD environment variable!'}
SHOPIFY_STORE_URL=${SHOPIFY_STORE_URL:?'You need to configure the SHOPIFY_STORE_URL environment variable!'}
SHOPIFY_THEME_ID=${SHOPIFY_THEME_ID:?'You need to configure the SHOPIFY_THEME_ID environment variable!'}
# Exit on non-zero return
set -e
# Snag the deploy tool.
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
# The prior ruby gem allowed for partial uploads. This new python method is all or nothing....
# Ready for this?
# Upload _everything_
theme deploy -p="${SHOPIFY_API_PASSWORD}" -s="${SHOPIFY_STORE_URL}" -t="${SHOPIFY_THEME_ID}”

Drop us a line and let us know how it worked out for you. If you would like help with your Shopify project from the pros, get in touch!

Happy deploying!

Featured Image by Vidar Nordli-Mathisen on Unsplash