Announcing Ziplines: a new dev tool for Shopify

Michael on May 20

At Pixelcabin, we have used Shopify with great success over the past couple of years to deliver projects for clients looking for ecommerce solutions. With Shopify's rock-solid hosted ecommerce platform, we can spend our time focusing on building great user experiences, and developing out more bespoke functionality built on top of the Shopify API. However, we initially struggled with applying some of our standard software development practices to building Shopify stores, and while the situation has improved since we first started, we needed to look for ways to improve our workflow.

This led us to Grunt, a great task runner built with Node - which allowed us to easily integrate CSS/JS preprocessing, version control, and other features into our workflow. Having used this successfully for over a year, we wanted to help other developers benefit from these advantages, which lead to Ziplines.

Ziplines

Ziplines (ziplines.pixelcab.in) is a command line tool to help navigate the various setup requirements to get started with our Grunt-based workflow, launched this week in beta.
In a single command, Ziplines will create a new project folder and download a starter template, and then set up a new theme on your store to work with. It will configure the necessary Grunt settings to ensure that once complete, all you need to do is open the folder, start grunt watch, and get on with developing your theme. Following the simple folder structure of Ziplines, all JS and SCSS assets will be automatically compressed, concatenated and uploaded to Shopify as a single javascript and stylesheet file.

To read more about what Ziplines does, check out the project readme on Github. We will also be writing a couple of more in-depth posts in the coming weeks covering some of the benefits, implementation decisions, and how you can further customize it to fit your needs.

Foundation

Since the release of v5, we have become big fans of Zurb's Foundation framework - in particular, with its comprehensive Sass support, we can use as much or as little of the framework as we need on a given project, and keep clean, maintainable markup, that removes the need for non-semantic class names and element structure.
We decided to include Foundation as an optional flag when setting up a new Ziplines project, to further streamline the process for those that want to use it - this will install the latest version of Foundation via Bower, and configure the file structure to mean it works out of the box. Crucially, by addressing Shopify's lack of support for Sass @import directives, we can now use the full features of frameworks like Foundation, and this can be included without cluttering up the developer's primary project folders.

Timber

While we have developed our own set of internal templates for building Shopify themes, we wanted to ensure that Ziplines supported Timber from launch - if you would like Ziplines to create a new project with Timber instead of its default blank template, simply include the --timber flag when running ziplines new.

 

To read more about the new command, check out https://github.com/pixelcabin/ziplines#new


 

Ziplines has launched with all the functionality to get started and test it out, and we plan to expand the feature set to cover the full end-to-end project workflow in the coming weeks.
While currently marked as in beta, we hope to remove this soon once we have had some community feedback, so please do check it out and let us know your thoughts here in the comments, on Twitter at @pixelcabin, or in an issue on Github.