Articles in Shopify

Upgrade your existing Shopify theme with Slate migrate

If you haven’t read about Shopify’s new theme development toolkit, Slate, check out the introductory post here. It provides you a starting set of files for developing your own custom Shopify theme along with handy build tools to speed up and optimize your workflow.

But what if you’re not starting from scratch? Whether you’re basing your work off an existing theme or supporting a client’s existing theme, there’s no doubt you’ve wanted to improve your development workflow at some point.

With Slate installed (npm install -g @shopify/slate), you can run slate migrate to convert an existing theme into the folder structure compatible with Slate.

SVG Icon Workflow with Gulp and Shopify

We are no longer developing our free Shopify themes to support IE8 and it has been fantastic so far. No more media query polyfills (an absolute nightmare when dealing with a CDN – though Gavin Ballard figured it out) and no more fear of CSS3 selectors has been great. One of my favourite perks, however, is leaving behind icon fonts and moving toward SVG icons.

We’re currently using a few Gulp tasks for our themes development process right now, but in this post I’ll focus on how we generate an SVG sprite sheet with the help of Gulp and gulp-svg-sprite and gulp-cheerio.

Github Metadata with Jekyll and JavaScript

Last week Github announced that organization and project metadata would be available to Jekyll templates in the site.github namespace, rather than relying on client-side API calls.

Their documentation lacks real world code examples, so here is what I used to restructure Shopify’s Open Source page (mostly) away from JS API calls in favour of Github metadata. Be warned, this data is only available when the page is live, so I had to work on hidden code on our live page until it was bug free.

Introducing Shopify Timber

After pitching the idea for a responsive framework that made learning the basics of theme development on Shopify late in 2013, I got a chance to make that a reality. Today we launched Shopify Timber, the ultimate Shopify theme framework.

Follow @cshold to stay updated on the status of Timber, or join in on GitHub to have your say what makes it in. To see it in action, take a look at the demo store.

Sublime Text 2 Syntax Highlighting for Custom File Extensions

I’ve started using Liquid for some Shopify theme editing but was having some issues getting the custom extensions playing nicely with the syntax I wanted. For example, .scss.liquid and .css.liquid were using the same syntax highlighting as .liquid html templates.

Trying to force the open file to always use a certain syntax the normal way didn’t work. The normal way being View > Syntax > Open all with current extension as…. This would make all files ending with .liquid open the same way.