After our last post about Shopify, we decided to contribute to the open-source community and build our Shopify Slate alternative to scaffold projects much more quickly while still retaining some of the things we love, like SVG icons, Sass, and ES6 with Browserify.

We took an in-depth look at Shopify’s Slate Project to learn what makes it so great so we could adopt some good practices as we set the goal to create our version of Slate in the form of a Yeoman Generator.

So, without further ado, you can take it for a spin by just doing two global installs:

$ npm i -g yo generator-pixel2html-shopify

After that cd Into an empty folder and run:

$ yo pixel2html-shopify

And you should be all set and ready for the magic that’s about to happen.

Here’s a quick video showing how this works:

What it does

Start-Up Shopify Theme/Skeleton will guide you to Scaffold a Gulp 4-based development kit to start creating Shopify Themes using gulp-shopify-upload-with-callbacks

All your credentials are kept locally in a .env file that will NOT be pushed to the platform; we suggest each team member has its sandboxed development store and credentials to develop. All in the name of safety.

Start-Up Shopify Theme/Skeleton will get you hooked up with auto-reloading using Brower-Sync, which does a Proxy to your preview theme, so no more manual reloading for you on that area ⚡.

To align with best practices in front-end development, we believe it’s time to embrace ES6 (aka ES2015) and beyond truly, so we have included Browserify with Babel right out of the box. You can also add more plug-ins as needed to the project, doing a simple $ npm install and adding some quick tweaks to the .babelrc file.

We know jQuery is still king of the wetland (and will probably remain as such shortly). And apps can use it should they need to. So we included the latest jQuery out of the box and already exposed it as a global variable. So other plug-ins.

For our styles, we love using Sass as it gives plenty of tools that standard CSS alone doesn’t have, like mixins, variables, and functions. Start-Up Shopify Theme/Skeleton will give you three files to split your styles into a vendor, primary, and fonts. Speaking of the latter, you can also opt to work with the excellent WebFont Loader so we can asynchronously load them to keep things extra crispy.

Regarding SVG icons, you can drop them in the src/icons the folder will be automatically added in-line in the pages as needed, so you can use them as you wish, making it easy to animate or color them using CSS.

Liquid Skeleton will provide you with a set of very tiny files. That will cover all the basic needs so that you can go ahead. And focus on what matters for the project by filling in the blanks. We aim to keep this as it is so the tool is as pure and blank as possible. Any extensions or forks are welcome.

Since many of our projects involve stores running on Shopify Plus, start Up Shopify Theme/Skeleton includes those files to give you a good starting point.

After you are done with your coding, you can run the following:

$ npm run build

And that will bundle everything up in a zip file ready to upload or share. That command will also minimize everything to improve the render experience for your users and customers while in production.

Pro-Tip: CI Rejoice 🦄

Since we have custom .env files and commands that keep the theme in sync; it can be easy to set up a CI system in which, for example, you can have a protected branch that only the lead developer could merge to master, and on with each push, this will build and deploy the theme to a staged (recommended) or live theme. Shopify is only supporting just 20 unpublished themes at the maximum at the same time. We think this will be helpful for use cases which every developer is. That can have its very own theme to work in development. Without colliding with the CI or with the other team members.

More to come soon…

We want to add lines to the liquid files like Slate is doing. However, we noted the current implementation in Node of the Theme Linter is only linting translations, so for the time being, the last word is still server-side on Shopify’s end. We are sure that tool will evolve more with time to have more linting powers. So stay tuned for an upgrade on Start Up Shopify Theme/Skeleton as soon as that is available.

I hope this tool can be helpful to the Shopify Development community as it helps us daily. If you have any comments, feedback or questions, we welcome all issues/pull requests to the GitHub Repo, or you can tweet us at @Pixel2HTML.