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:
- Find some way of setting up a local test environment to develop my theme then upload to the shop.
- Find some way of easily pushing updates to an online theme so I can test as I go.
- Use the online editor in the Shopify store admin.
- 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:
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:
gem install shopify_theme
- Go to https://[your store].myshopify.com/admin/api and create a new app.
- Create a directory on you machine where you want to keep all the theme files
- cd into that directory
theme configure api_key password store_url
theme download
- From here you can edit your files and push them back to the server with
theme upload assets/layout.liquid
ortheme replace
- Check the docs for additional commands or just type
theme help
.
Enjoy and good luck with your theme!
And THAT is why they pay you the big bucks, sir.
LikeLike
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!
LikeLike
Yeah, I know what you mean. Glad this helped though.
LikeLike
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.
LikeLike
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.
LikeLike
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
LikeLike