Ziplines is a quick command line tool to help you get set up with an integrated Shopify workflow that supports a stable multi-developer workflow, VCS, the full feature-set of SASS, JS hinting and compression, and much more!
You'll need the following software installed to get started.
sudo npm install npm -g
sudo npm install -g bower.
npm install -g grunt-cli
ziplines is installed through npm.
npm install -g ziplines
This will add the
ziplines command to your system.
ziplines store_setup new_store)
ziplines store_setup new_app --store=STORENAME), and take note of the api key and api password
ziplines new STORENAME APIKEY APIPASSWORD(see the new docs for optional flags)
ziplines env production
src/scss, and included via
The CLI periodically gets updates that add features or fix bugs. Use npm to upgrade the CLI to the newest version.
npm update -g ziplines
To check what version you currently have, use
The primary goal of this tool was to streamline the process of getting set up with the tooling we have found useful. In summary, this does the following:
theme_id, and API credentials
At this stage, your folder will be all set up to start development.
The folder structure in a newly created project will look familiar, but has a few nuances.
├-- [shop]│ ├-- [assets]│ │ ├- application.css│ │ ├- application.js│ │ ├- third_lib.js│ ││ ├-- [config]│ │ ├- settings_data.json│ │ ├- settings_schema.json│ ││ ├-- [layout]│ │ ├- theme.liquid│ ││ ├-- [snippets]│ ││ ├-- [templates]│ │ ├-- [customers]│ ├- _template liquid files_│├-- [src]│ ├-- [js]│ │ ├-- [app]│ │ ├-- [third_party]│ ││ ├-- [scss]│ │ ├- application.scss│├- .gitignore├- .jshint├- Gruntfile.js├- bower.json├- credentials_template.json├- credentials.json├- package.json
The main driver of day-to-day development,
grunt watch, will do the following (view in the Gruntfile):
src\js\app, and compile (and compress) all .js files within to
src\js\third_party, and compile (and compress) all .js files within to
src\scss, and compile (and compress)
jshintwill be run before compilation (using the rules defined in
.jshint), and block compilation if jshint fails
shop, and will upload any changes to the configured theme (this will also trigger a call to livereload - if on Chrome, this can be used with this extension)
NB: Where possible, Ziplines will attempt to identify the relevant store and theme in question, by looking at the contents of the Gruntfile and credentials.json. This means that if running commands such as
adminfrom within the project folder, no store name needs to be provided.
Downloads and installs a new Ziplines project, into a folder named after the store.
ziplines new <store-name> <api_key> <api_password>
If you have issues with this command, try running as root.
You can include Zurb's Foundation with the
ziplines new <store-name> <api_key> <api_password> --foundation
You can include Timber with the
ziplines new <store-name> <api_key> <api_password> --timber
You can also provide the path to a public github repo as the fourth argument (in the format
username/reponame), providing you the flexibility to build your own template into this workflow:
ziplines new <store-name> <api_key> <api_password> pixelcabin/blank_ziplines_template
If any arguments are missing,
newwill take you through an interactive prompt
Outputs the Ziplines config for the current folder
Opens your theme in your browser
ziplines view [theme_name|--live]
Can optionally open any other theme on your store by passing the theme name as the first argument, or can open the live theme by adding the
ziplines view Staging
Opens the store's Shopify admin page in your browser
ziplines admin [sub-page] [--store=STORE_NAME]
You can optionally open any subpage of your store's admin by passing the page name as the first argument. i.e. If wanting to view the products admin page, run:
ziplines admin products
You can also jump straight to your configured theme's theme settings page, by append
ziplines admin themes:
ziplines admin themes customize
Opens the documentation for Ziplines (currently this page)
Switch the built tools environment between development and production
ziplines env <environment>
Important: requires a restart of
grunt watchafter execution
A set of shortcuts to speed up creating a new store
ziplines store_setup <command>
new_store- shortcut to the new dev store page [only available if you have a partner account]
new_app [--store=STORE_NAME]- shortcut to the new private app page
show_apps [--store=STORE_NAME]- shortcut to the private apps page
--store flag can be added if running outside of a configured project folder
Lists all available commands in the CLI.
Add a command name at the end to learn how a specific command works.
ziplines help new
The workflow we have adopted is modeled off normal VCS-based software development, where each developer has a version of the code running locally on their machine, and then synchronises with the rest of the team via their VCS. However, with Shopify, there is no way to run a store locally, meaning that to run the code you have been working on, it must first be uploaded to Shopify.
Our workflow is as follows:
Ziplines sets up a new project with this direction in mind - it creates a new theme on your store that Grunt will upload to, and initialises a new git repositiory. Crucially,
credentials.json, which holds the config for both your API settings and the theme to push to, is excluded from the repo, ensuring that the theme_id setting doesn't sync to other developers, allowing each dev to have their own theme (it also stops the sensetive API credentials from being comitting to git).
One of the great advantages of this approach is that the Shopify theme no longer becomes the authoritative record of the codebase, and instead becomes a temporary snapshot of what is stored in Git - this greatly reduces the fragility of the theme on Shopify, as you can always restore from Git if necessary.
[COMING SOON] Making your work live is then achieved as follows:
ziplines synclive down- downloads the live theme into your project folder, allowing you to compare it against your last commit, reverting any changes that are old, and committing any changes from the live theme that need to be preserved (such as changes to the theme settings) - this is particularly useful if you have clients that may make changes to the theme settings or the files themselves without going through you
ziplines synclive up- uploads the merged contents of your project folder to your theme, ensuring that it has any changes brought over from the live theme
Ziplines is currently in beta - please feel free to get in touch on Twitter (@pixelcabin), or raise an issue here.
Ziplines wouldn't have been possible without the awesome work on the following tools:
If you'd like to contribute, please feel free to fork and submit a pull request. In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
MIT License. Copyright 2015 Pixelcabin. www.pixelcab.in
You are not granted rights or licenses to the trademarks of Pixelcabin, including without limitation the Ziplines name or logo.