The Shopify Desktop Theme Editor is a really big step forward for anyone who builds Shopify themes. Before this Mac app came out, you would either need to edit your code in Shopify’s built-in online template editor or edit your theme files locally and then zip the theme before uploading into your Shopify store/website. Now, with the Desktop Theme Editor (sometimes referred to as the Theme Sync App), you can edit your files locally in your code editor / text editor of choice and then when you save a file, it automatically syncs with the remote version of the theme in your Shopify store/website.
This is a big time saver and generally makes working on Shopify themes more comfortable by making it more similar to how you probably work on other projects (at least that’s the case for me).
At this time, the app is only available for Mac OS X. I don’t know if there are any plans for other versions.
Let’s take a quick look at how to get rolling with this new addition to the Shopify toolbox. Once you download and install it you’ll need to do a few things in the way of set up.
- Enter the URL of the Shopify store you want to work on. There is an Add Shop button in the main interface of the app so you can add more stores to work on anytime. You will of course be asked for login credentials when you add a shop.
- Select any themes you plan to work on using this app. If you add a store that has 5 themes installed on it, you don’t necessarily have to sync all 5 of the themes to a local version using this app (although you can if you want to).
- For each theme that you add, you’ll be asked to select a local directory where the local copy of the theme will reside.
- You’ll also need to select a text editor / code editor of choice that your files will open in when you get ready to edit them.
Once you have all this set up, your themes will show in a clean little list in the main interface screen of the app. Just to the right of the theme’s name, you’ll see a gear icon. When you click that, you’ll be presented with several options, including Open in [whatever code editor you chose earlier]. For example, if you chose TextWrangler as your default code editor, you’ll see a menu item that says Open in TextWrangler.
If you select that item, your code editor will open and you can use it to open any theme file you wish to edit. Then just make a change and save the file. When you do that, a little box will pop up on your screen informing you that the file was uploaded. You can then browse to your Shopify store and see that the change has been made in the remote version. If the theme you’re working on is live, the change will be published to your live site immediately.
If the theme you’re editing is not the live theme, the file will still be changed in the remote version, it just won’t publish to the live store since that theme isn’t active anyway. However, you can still preview the theme quickly from the Desktop Theme Editor by choosing View Theme from the gear icon menu.
By the way, the theme list in the main interface of the app will remind you which theme is your live one. Each theme is marked labeled either “[main]” or “[unpublished].” As you might guess, the one labeled “[main]” is your live, published theme.
If you need to change your code editor / text editor of choice after the initial setup of the Theme Sync App, just go to the app’s main menu (at the top of your screen) and select Utility >> Choose ‘Open In …’ Editor. Your Applications folder will open and you can select a different code editor from there.
I’ve only just started using the Desktop Theme Editor but it’s worked well for me so far. Simple, to the point, does just what it needs to do.