Shopify Workflow Tips and Tricks

By now, I’m sure you’re all aware that I’m a big-time shortcut and workflow-optimization junkie, as well as a big Sublime Text fan. In the interest of extolling the virtues of a better workflow, I’m going to give you guys a few tips that I’ve been using in my Shopify development to expedite things. If you have any other tip, tricks, or “hacks”, I’d love to read them in the comments, so don’t be shy!

Install Package Control

First thing’s first, you’re going to need something called Package Control. I’ve written about installing Package Control previously, but if you haven’t already installed Package Control, here are some instructions (which changes with every release of Sublime, although once it is installed you will not need to update).

sublime text

Alright, now that you have Package Control installed, let’s get an easy “win” under our belt. This one is super simple, and if you’ve never installed a package before is a great introduction to package installation. First, we’re going to press Shift + command + p (alternatively, you could navigate to Tools -> Command Palette, but this is all about efficiency, right?) and start typing “Install”. You’ll see that Sublime starts doing a fuzzy-search for you, and the first option will be Package Control: Install Package. Go ahead and press enter, and then start typing in Liquid, and again you should see that Sublime starts fuzzy-searching for you, this time giving you Siteleaf Liquid Syntax. Go ahead and press enter, and the package will be installed for you.

What this does is give you Liquid syntax highlighting, which while not a huge deal, can definitely help make your code more reader-friendly, and therefore speed you up in the long run. To have Liquid syntax highlighting (pending that the theme you’re using supports it – I’m a big fan of Cobalt2), you can set the syntax in the very bottom-right corner of your editor by selecting HTML (Liquid) OR View -> Syntax -> HTML (Liquid).

This, however, is only an incremental improvement, and I wouldn’t rope you along for just a small tweak, right? Thankfully for both of us, that’s correct. What I’m really here to talk to you about is Takana.

Takana

takana

Towards the tail-end of 2014, a module called Takana (which is currently only fully-compatible with Sublime Text, but I’m sure that’s a work in progress) made some noise in the dev-world, claiming to allow you to see SCSS changes instantly. The premise of the module being Libsass compilation (which is written in C/C++, much faster than Ruby) and some Node-magic. There was skepticism, there were nay-sayers, but gosh-darn-it, there was live SCSS editing!

Why is this a big deal, and how does it relate to Shopify?

Well, as anyone who’s developed a Shopify theme before knows, as you’re building the site at hand, all the files need to be pushed up to the Shopify server. This means that if you’re writing SCSS, you have to wait a few seconds for your SCSS to compile to CSS, wait a few more seconds to have the files pushed up to the Shopify server, and then wait a few more seconds to reload the page. To me, that’s way too much waiting.

Related: [Mini-Tutorial] Setting Up a Team Workflow for Shopify Theming

So, how do we go about getting to tearing it with Takana?

I’m glad you asked. First of all, I’m going to ask you to not follow the instructions on the Takana page. The reason being that following their directions will result in installing version 0.3.2, which for whatever reason, I’ve encountered problems with when it comes to getting to play nice with Shopify. This issue has, however, been addressed by the Takana team, so hopefully we’ll see a fix for that in the next release. If you’ve already got version 0.3.2 installed, but would like to follow along, please head to your terminal and type in npm uninstall -g takana, which will uninstall Takana globally. We’re going to install version 0.0.10, which I know will play nice with Shopify. To do this, head to your terminal and type in npm install -g takana@"0.0.10".

There’s still some work to be done, so don’t go anywhere just yet!

Now, we need to install the Takana package in Sublime Text. If you’ve been following along, you’re already a pro, but just in case: Shift + command + p OR Tools -> Command Palette and start typing in “Install”. Now, search for “Takana”, go ahead and press enter to install the Takana package, and restart Sublime (sometimes you need to restart Sublime for a package to take effect, I now do it as a rule every time I install a hefty package like Takana).

So how does this all work?

shopify

You’ve got two options, and both involve your terminal. You can either navigate to your project directory and then type in takana . or you can start anywhere in your file structure and type in takana path/to/your/project. Either way, this will start a server, and give you some directions on how to get started: Paste this snippet inside to live-edit your stylesheets:

Copy that script tag and head over to theme.liquid and paste it in the head of your project. I usually have two tabs open in my terminal, one with Takana running, and the other with my compilation going on (using whatever task runner – Grunt, Gulp, Broccoli, Diet Pepsi With A Twist of Lemon – whatever works for you). I edit my styles with Takana running until I’m happy, and then give everything a save, after which everything will start compiling and getting pushed up to the Shopify server. This means that you can effectively keep styling, (assuming you don’t have to stop to edit the markup, or refresh for whatever reason) until you’re done with a page. As you can see in my example below, it really is instant:

Hopefully you’ve learned a thing or two from this post, and you can start implementing Takana in your own workflow. As I mentioned at the start of this post, if you have any other tip, tricks, or “hacks” – I’d love to hear them, so please don’t be shy!

Keep your stick on the ice.

Related: [Mini-Tutorial] How to Add Subcategories in Shopify