Writing Code Properly Using Shopify’s Desktop Theme Editor

By November 12, 2015Creative

Shopify is a powerful, easy-to-use website platform that we love.  It allows for rapid development of an e-commerce store, but it does have its shortcomings.  Sometimes customization can be a little complicated, and the lack of “free” plugins (compared to other CMS platforms like WordPress) can be disconcerting.  This month’s tip is (hopefully) helpful and also totally free.

In a previous article, we discussed one of Shopify’s glaring issues (a lack of a standardized grid system across different themes), and how to extend it using an external grid system. When I first started building sites with Shopify it seemed the only way to write HTML, CSS or Liquid code was through the in-browser code editor:

shopify_editor_1

Editing code using Shopify’s in-browser text editor

This can be okay for small changes, but leaves a lot to be desired if you’re used to writing code using a dedicated text editor (like Atom, Sublime Text, etc.). There are a whole host of reasons why using a proper text editor is better than an in-browser version, like shortcuts, plugins/packages, autocomplete and more (see my post In Praise of Atom for a list of my favorite Atom packages).

This is where Shopify’s Desktop Theme Editor comes to the rescue. After installing the software, Desktop Theme Editor allows you to sync a local copy of the entire Shopify theme and edit those files using your text editor of choice.  

Opening a project in Desktop Theme Editor

Opening a project in Desktop Theme Editor

You can also use the Find in Project feature in your text editor to search through the entire project for a word match. When we open our Shopify project in a text editor, we’re greeted with a fantastic sight:

A Shopify project opened in Atom

A Shopify project opened in Atom

Now, with our project opened in Atom, we can use all the powers that a dedicated text editor gives us – autocomplete, syntax linting, and all the shortcuts and hotkeys you’re used to. When you make a change and save, the saved file is automatically pushed up to the Shopify site.  

Desktop Theme Editor can be a little buggy, and as of this writing it’s unclear if there’s a way to 2-way sync the projects (so changes made to the theme files online are then pulled to your local copy).  All in all it’s still a great solution for writing HTML, CSS, JavaScript and Ruby (Liquid) code using your favorite text editor.

© 2017 | All rights reserved Hawke Media.