Osiset Code ramblings.

Developing Shopify themes with teams

This is a simple write up to explain how a team can utilize Git versioning to manage a Shopify theme successfully. It’s not a complicated process but will require patience! As a side-note, this is simply a personal recommendation based on my experiences, there are of course other ways to go about this process.

Step One: Installing Shopify’s Theme Manager

No, not the GUI - that doesn’t work very well for what we need to do (many GUIs don’t!). What you’re going to do instead is open your Terminal.

Run gem install shopify_theme - it’s Shopify’s Ruby Gem for managing themes with advanced options.

terminal shopify

Step Two: Creating your own shop

Citation: This is only my personal recommendation

Each developer working on the theme will need their own shop to push changes/to test changes. Because we can not run Shopify locally, we need to view it somewhere and the problem is that multiple developers can not push changes to the same shop because we will overwrite each other and create a mess.

So creating your own shop will allow each developer to be independent but still work on the same codebase.

It’s time to register a private app in your development shop to let the Shopify Theme Manager communicate. Go to https://[your store].myshopify.com/admin/apps/private and generate a private application; call it anything you like… “Theme Dev”, “Rickyisms”, doesn’t matter. What Shopify will give you API information. Keep that API key and password on hand for step three.

api setup

Step Three: Setting up the theme files

Step Three-A: Setting up a new dev theme

If there is no theme created for your development team yet, simply open the Terminal and cd into the directory where you wish to develop.

terminal output

Now that we’re in our place of development, let’s pull Shopify’s Timber theme using the gem.

Run theme bootstrap api_key password shop_name theme_name master

theme setup output

In my case, I called my theme porte_mode. This command will do three things…

Now that we have Timber ready and registered with our dev shop we can go ahead and get this baby up on Github/Bitbucket (keep the repository name the same as your theme name).

Be sure to create a .gitignore file and add config.yml to it. This ensures no developer’s Shopify Theme Manager configurations will clash when working on the repository code.

theme gitignore output

Now commit this code to the repository (ex: git add -A && git commit -m “First commit” && git push -u origin master).

That’s it. In under 5 minutes, you’re ready to develop with other developers. A review of what we did…

Note: You may need to publish the newly uploaded theme in your Shopify backend to see it.

Step Three-B: Using an already created dev theme

If a developer has made a dev theme for this project on GitHub/Bitbucket already, simply clone it (ex: git clone git@bitbucket.org:[your-username]/[theme_name].git</span>)

Next, we need to configure Shopify’s Theme Manager to use our dev shop. Open the Terminal to the repository location and run theme configure api_key password shop_name

After this is done, run it. Last but least, push the theme code to your dev shop. Open the Terminal and run theme replace this will push all changes and register the theme on your shop (this command will take some time).

theme replace output

That’s it, you’re done. In a couple of minutes, we’ve downloaded the dev theme from Github/Bitbucket and pushed it to our dev shop to work on.

Note: You may need to publish the newly uploaded theme in your Shopify backend to see it.

Using the Shopify Theme Manager

There are several commands we can use to manage the theme of your dev shop.

Upload a theme file

theme upload assets/logo.gif

Remove a theme file

theme remove assets/logo.gif

Completely replace shop theme assets with the local assets

theme replace

Watch the theme directory and upload any files as they change

theme watch

Final Thoughts

So that’s it! This document simply outlines how to set up a development theme on GitHub/Bitbucket and Shopify, how to pull a theme from Github/Bitbucket, and develop with it as well as a list of useful commands to manage the theme as a team.

The viewable Google Doc of this is available here: https://docs.google.com/document/d/1fRCxDG7fCE4YjCVSXFZ5CsGhhpvj-PgrDPauDdjrwW8/edit?usp=sharing

yes!