shopify desktop theme editor windows linux

Shopify Desktop Theme Editor for Windows & Linux

If you have ever tried to develop a Shopify theme on a Windows or Linux machine, you know how terrible of an experience it can be. Using Shopify’s poor browser based theme editor, uploading single files one by one, not being able to use your favorite IDE or text editor, not so good version control, and I’m sure dozens of others. Lucky OS X users get a Desktop Theme Editor from Shopify which lets you sync your local theme files with your live Shopify store. If only Windows or Linux users could be so lucky.

Well you are in luck. Will Rossiter came up with an awesome Grunt plug-in that allows Windows, Linux, or yes even Mac users to upload or remove files with ease. The best part is you can use any editor you like. The plug-in uploads or removes files each time you modify a file in your local system. The best part is this can now be used with GIT and even continuous deployment tools like Bamboo or Jenkins.

If you’ve never heard of Grunt, head over to the official site and do a little reading about the JavaScript Task Runner. What does it do in one word? Automation. With hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. Luckily Will helped us out and wrote one of these plugins to make Shopify theme development a bit more tolerable.

Note: This will only ever update your currently published theme. We suggest creating a partner store as a development environment when developing or making changes anyway.

How to setup Shopify Desktop Theme Editor for Windows and Linux

Step 1:

Install Node.js for your operating system.

Step 2:

Setup your theme in a local folder on your machine. Create a folder named ‘shop’ and place the following 5 folders inside it. Shopify requires those 5 folders and only those 5 so do NOT add any other folders within ‘shop’.


/shop/
 - assets
 - config
 - layout
 - snippets
 - templates
   -- customers

Step 3:

In the root folder where ‘/shop/’ is, create a file called Gruntfile.js with the following:

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-shopify');

  grunt.initConfig({
    shopify: {
      options: {
        //You can find these in your Shopify Admin under Apps then look at the bottom for Create a private API Key
        api_key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        password: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        url: "YOUR-STORE-NAME.myshopify.com",
        base: 'shop/'
      }
    },
    watch: {
      shopify: {
        files: ['shop/**'],
        tasks: ["shopify"]
      }
    }

  });

  grunt.registerTask('default', ['shopify']);

};

<em><b>*Note: </b> Some users needed to change the ‘base’ and ‘files’ values to include a forward slash on Windows. Ex: “/shop/” instead of just “shop/”</em>

Step 4:

Create another file in your root folder called package.json

{
   "name":"ShopifyNameYouMakeUp",
   "version":"0.1.0",
   "devDependencies":{
      "grunt":"~0.4.2",
      "glob":"~3.2.3",
      "grunt-contrib-jshint":"~0.6.3",
      "grunt-contrib-nodeunit":"~0.2.0",
      "grunt-contrib-uglify":"~0.2.2",
      "growl":"~1.7.0",
      "grunt-contrib-watch":"~0.4.4",
      "grunt-shopify":"~0.3.0"
   }
}

Step 5:

Now in a terminal window (or Command Prompt or Powershell) cd into the root folder we’ve been using above where /shop/, Gruntfile.js, and package.json exist. Then using node package manager, setup Grunt Shopify. The version below is my recently forked version with the fix for Window’s filepaths. At the time of the writing, there is a pull request for the original repo with the fix.


npm install https://github.com/mjaverto/grunt-shopify/tarball/master

 


npm install

Optional: Should help resolve dependency that may be needed if uploads aren’t working. (We had this problem with Linux) It won’t hurt anything if you don’t need it so run it anyway.


npm install glob

Step 6:

Start the Grunt and watch it upload your theme files within ‘/shop/’ each time you modify and save them! Make sure you leave the terminal window open.

grunt watch:shopify

Now each time you save, you should see a 200 success response which means the file was updated in on your Shopify store:

successful shopify theme editor sync windows linux

Extras

Note you can do a few extra things like this from the command prompt. Just don’t forget to always start with grunt.

  • ‘shopify:download’, ‘Downloads a single theme file from shopify, or the entire theme if no file is specified’
  • ‘shopify:upload’, ‘Uploads a single theme file to Shopify, or the entire theme if no file is specified’
  • shopify:delete’, ‘Removes a theme file from Shopify’

Also press CTRL + C to stop any of the scripts including the grunt watch:shopify.

Now not only can you match the functionality of the official Shopify Desktop Theme Editor but you can actually extend and create different integrations. We use this with GIT and Bamboo to provide a continuous integration solution that makes managing Shopify a little easier.

{o}
Otreva is a custom software product development company focusing on user experience, responsive web development, & mobile application development.

Interested in seeing what it costs to build an app?

Start Quote See Stats
224 Wyoming Ave. #100
Scranton, PA 18503

You've found the secret footer!

Tweets about @Otreva

Or check us out on:

Shopify Experts
Awwwards