Setting up a Development Environment for Shopify Themes

I recently started looking into designing a custom theme for a Tekbell, an shop with kettlebells for sale online, running on Shopify. Turns out getting started is a bit more complicated than it should be.

Getting started, I figured my options (in order of best to worst) were thus:

  1. Find some way of setting up a local test environment to develop my theme then upload to the shop.
  2. Find some way of easily pushing updates to an online theme so I can test as I go.
  3. Use the online editor in the Shopify store admin.
  4. Code it all locally then push and pray.

Near as I can tell, there’s no longer any way to run a Shopify dev environment locally. I found docs mentioning a program called Vision, but all links for that led to dead ends and mentions of it being outdated. Giving up on that, the next best option was finding some way of pushing the changes to the server. I found two ways of doing this:

  1. The Shopify Textmate Bundle
  2. The shopify_theme command line tools

I code in vi, so buying Textmate to accomplish what should have been a pretty simple task was somewhat distasteful to me. Textmate does offer a free 30 day trial though, so I got it to test the bundle.

I ran into an issue with both tools almost immediately. It doesn’t seem possible (or documented anyways) to edit a theme that’s not installed as your store’s default theme. Well, I can’t find my cowboy coder hat, so I this seems like a terrible idea. For shopify_theme, there’s actually an outstanding pull request on Github to address this issue by specifying what theme to work on in the config, but it’s been waiting for 2 months so I’m not going to hold my breath.

So there goes those options…

Wait, let’s not give up so easily! Doing some further research in tangentially related topics, I came across mentions of a way to create a test store. That would allow me to edit an in-use theme without actually being in a production environment, therefore solving my dilemma.

To set up a test account, create an account on the partner signup page, then do this:

This creates a dummy shop with some dummy data. From here you can use the Textmate bundle or shopify_theme docs to set up them up to push the theme to this shop. This post will continue with the shopify_theme tools.

Now that you have your shop set up, things are pretty simple:

  1. gem install shopify_theme
  2. Go to https://[your store].myshopify.com/admin/api and create a new app.
  3. Create a directory on you machine where you want to keep all the theme files
  4. cd into that directory
  5. theme configure api_key password store_url
  6. theme download
  7. From here you can edit your files and push them back to the server with theme upload assets/layout.liquid or theme replace
  8. Check the docs for additional commands or just type theme help.

Enjoy and good luck with your theme!

Comments

  1. And THAT is why they pay you the big bucks, sir.

  2. I find it funny this documentation is far better than anything on shopify’s website. You would think they would want to make 3rd party development as enjoyable as possible….not. Thanks for the help!

  3. It looks like the Desktop Theme Editor app that Shopify just released is a good option, too: http://apps.shopify.com/desktop-theme-editor

    I just downloaded it, but I think it essentially watches the files for changes and uploads them as you go. We’ll see how it works out.

    • I saw that in their newsletter recently. I haven’t played with it myself. It’s good to see that they’re working on improving this situation.

  4. solution: perfect.
    problem:
    society hasnt yet figured out when to use the web — and when not to.
    give em another 10 years of point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click, point click

Speak Your Mind

*