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:
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.
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:
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.