Shopify Workflow

Getting started
Starting your workflow
Screencast Overview
How do I pull changes from Shopify?
Common questions

How does Beanstalk work with Shopify?

Shopify is an ecommerce platform that includes everything needed to create an online store. By making Beanstalk part of your Shopify process, you’ll be able to track changes made to your Shopify theme and deploy your code all in one place.

This help article will discuss how to setup a proper Beanstalk/Shopify workflow. It also answers common questions and how to get the most out of our Shopify integration.

Getting started

Beanstalk allows you to get setup with Shopify in a matter of seconds. You can create new Shopify themes or import existing ones as repositories.

Importing an existing theme. If you already have a Shopify theme, Beanstalk will fetch your theme files and convert them into a repository for you.

Create new themes. You can create new themes through Beanstalk using Timber frameworks or on your own previous work. If you’re building a theme for the first time, here are a few tips from the Shopify team.

Creating your workflow

Using Shopify is a bit of a different workflow than other end environments. We recommend setting up a local environment that allows you to test your themes locally, before pushing to Beanstalk, and then to your Shopify store. Let’s take each of these one at a time.

Setting up a local environment. Shopify has a guide that discusses 3 steps for setting up a local Shopify theme development environment. While this may sound like a lot of work, there are great advantages to setting up a local theme. One benefit is that your code will be in version control. Second, you’ll be able to work in a proper testing environment without the risk of damaging your live site. In this light, we strongly recommend setting up a development environment for testing. You can read more on how to do that here.

Using a testing environment. Beanstalk allows you to have environments that watch specific branches and deploy accordingly. But how do you have a staging or testing environment for a Shopify theme? Some customers will set up two stores, one that is not advertised and is only used for testing. The other is their "production" environment, their live store. But the Shopify Partner Program is the best method overall. The Partner Program allows you to create unlimited development stores for working on themes. The program is free of charge and great if you need to prepare a store for a client. You can learn more about the Shopify Partner Program here.

Deploying to Shopify. Once you’re happy with your theme locally, you can push your changes to Beanstalk and deploy. Deployments can be triggered automatically or manually. Its all up to you. If you’ve setup a store for testing purposes, you may want to deploy automatically. But when deploying to production, we recommend manual deployments.

Let's see it in action

Are you a visual learner? The following video shows you how to setup the Shopify integration.

How do I pull changes from Shopify into Beanstalk?

Shopify is a unique situation where you can only have a one way sync. If you make changes in your Shopify theme editor, you'd have to come up with a different workflow to get those changes into your repo. In this vein, we recommend customers to make all changes in the repo itself, not in the Shopify interface. At the moment, we have no plans to change this and it’s for a few reasons. Here’s one:

Pulling changes from Shopify into Beanstalk would defeat the purpose of version control. That would be the same type of scenario as changing files on a live, production server — something we never recommend. A proper testing environment where you can make changes, then test them before pushing to Shopify is the best overall workflow. Everything is in your repo and you enjoy all the benefits of a version control system.

With that said, what happens if you or a colleague makes a change in the Shopify editor and you want your repo to reflect those changes? Here’s one way to do it.

Let’s say you’ve made a change in the Shopify theme editor. Now you need to pull the theme as it is currently on Shopify into your local setup. Go to your Shopify theme settings and select “ Download theme file”.

Assuming you’ve already cloned your repo locally from Beanstalk — now you can create a new branch in your repo (on your computer) and add the Shopify theme files there.

Finally, push the new branch to your remote repo on Beanstalk and merge to your master branch when ready.

There are other options that would work, but the key here is that you cannot go straight from Shopify to your Beanstalk copy of your repo.

We recommend that Shopify users set up a robust dev environment so that you can test changes to your themes locally. This allows you to use the desired workflow:

Work locally > Push to Beanstalk > Deploy to production (your Shopify account)

Common questions about using Beanstalk with Shopify

I have Shopify sites for different geographical locations. Do you have a recommendation on how to keep the US, AU, and UK sites separate?

It depends. If the differences are small, having separate branches may work. But trying to remember to get all the new changes into each branch would be a constant headache. Another option is to keep a separate repo for each store.

In this scenario, you could keep all the common code in a submodule that each repo refers to.

Please note: Submodules add complexity and are not something we usually recommend to Git beginners.

Things to keep in mind

If Beanstalk has trouble deploying a file to Shopify, try to add it manually. Shopify has strict restrictions on what files can be uploaded to the theme. Only files in the following directory are allowed: assets, config, layouts, snippets, templates, and locales. No other directories are allowed. You can find out which file isn’t being deployed by viewing the deployment log on Beanstalk.

Did you know?

If you’re using another code host like Github, or Bitbucket you can use DeployBot to integrate with Shopify.