Using Git to Simplify Shopify Theme Deployment

Since this article was published, Wildbit has renamed Dploy.io to DeployBot. We've updated the references in the article to reflect that change.

If you build themes for Shopify, version control and deployment are two things you shouldn’t have to live without. Version control helps keep your projects organized in repos and branches and makes sure your changes are tracked to avoid cataclysmic overwrites. Deploying your code should be the icing on the cake of every project, but it can go from being a tedious chore to a nightmare scenario without the right deployment process.

At Wildbit, we think about version control and deployment all the time. Using Beanstalk, we host your code in Git repos, give you a code review workflow, and deploy your code when it’s ready. DeployBot is a natural extension of Beanstalk deployments that lets you use our deployment tools no matter where your Git repos are hosted.

Last year, some of our customers who build Shopify Themes asked us to consider creating an integration for Shopify on Beanstalk. These Shopify developers wanted a simple way to turn their themes into Git repos and then deploy their themes to Shopify when all the coding was done.

You might also like: An In-Depth Look Into Designing a Shopify Theme

The benefits of putting Shopify Themes in Git repos

If you’re familiar with Git, then you know what a difference it can make in any developer's workflow. As a matter of fact, it’s so life changing that there are devs who assume everyone knows about Git because they use it on a regular basis. But rather than assume you know Git, I want to share a quick summary of how it works for anyone who’s not familiar with it.

First, Git lets you work on projects locally, without the need to constantly check in your changes on a remote server somewhere. One of the first steps in any project is to clone your repository and make a copy of it on your local machine. Once you start working, you can commit your changes locally at any time. By doing this, your team has the flexibility to make changes with or without a connection to your Git server.

You can also stop creating a local copy of every file you are changing, and use branches instead. Your individual commits only update the files you’ve been working on and you can revert to a previous commit quickly if you run into a problem. At Beanstalk, we recommend using a new branch for each new feature or bug fix you work on.

Working with Git also means you can do better work as a team. You can stop worrying about someone overwriting your changes or losing track of what was changed and by whom.

There are a ton of great places to learn more about Git, including this great Quick Wins with Git video, Tower’s excellent step-by-step Git course, and Beanstalk’s guide on developing and deploying with branches.

Shopify Themes need Git + something

GetOutfitted is a Beanstalk customer that uses Git to manage their Shopify Theme. When they initially talked to us about their development workflow, they acknowledged that it was a very manual process. “One of the major challenges that we ran into during this process was finding a clean and systematic way to deploy changes to either staging or production," the told us. "We couldn’t just hook up a 1-to-1 FTP link or use the Shopify Theme Tool because we had to compile our assets.”

This was something many of the teams we talked with mentioned. We knew making it simple for Beanstalk to compile and deploy Shopify Themes would help Shopify devs focus on building awesome experiences on Shopify.

You might also like: The Power of Alternate Layout Files in Shopify Theme Development

Shopify+Beanstalk

One of our developers, Dima, built a process that creates a Git repo on Beanstalk connected to Shopify through the Shopify API. Developers can work in the repo, commit their work, and when they’re ready, deploy their work to Shopify with one click.

Creating a Git repo with a Shopify Theme in Beanstalk

We’ve covered the basics of Git, and talked a bit about our goal when we built Beanstalk’s integration with Shopify. Now I want to show you how easy it is to get started with Beanstalk+Shopify. If you don’t have a Beanstalk account, you can sign up for a free one here.

To begin, here’s a short video demo of how this integration can help you and your team.

For all my friends who don’t care to click on the video, here’s how the process works. Once you’re logged into Beanstalk, click through to the Repositories area. Once you're on this page, you’ll need to click on ‘Fetch from Shopify’ to get started. Since this is the first repo you’re creating from Shopify, you’ll be asked to connect your account to Beanstalk. You can copy and paste your API credentials into the field, or click 'Fetch from Shopify' for Beanstalk to grab this info automatically. After completing a couple of final setup steps, Beanstalk will copy over the files from the theme you selected.

Now that your theme is a Git repo, you can work locally in your favourite text editor and commit your changes with your command line-fu or by using your favourite Git client.

Shopify+DeployBot

After hearing so many Shopify teams talk about their deployment process, we realized we could take what we learned from Beanstalk and integrate Shopify into DeployBot.

DeployBot is a tool designed to let anyone use our deployment tools no matter where they host their Git repos. If you have Shopify Themes on Github, Bitbucket, or your own Git server, you can connect them to dploy.io and we'll send everything to your Shopify store.

To get started, you’ll need to create an account on DeployBot — it’s free for one repo. Once you’re logged in, connect your theme repo to DeployBot, and select Shopify as your server. DeployBot can fetch your API credentials, or you can provide them yourself. Once this step is done, you’re ready to start deploying your commits to Shopify.

You build it, we’ll help deploy it

Wherever you choose to host your code, we can help smooth out the deployment process. We’d love to hear about what you’re building!

Have any suggestions on how we can continue to improve the development workflow for Shopify developers? Leave us a comment below.

You might also like: How to Optimize Themes for Performance

Search results for

""

All results