Blank slate Shopify theme for Developers, packaged with Gulp.js for processing SCSS, JavaScript (ES6), images and fonts
Liquid JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
config
dev
layout
snippets
templates
.gitignore
LICENSE
README.md
config.yml

README.md

Gulp + Shopify

Version: 1.0.1

Author

Jase Warner ( https://jase.io )

Synopsis

Gulp + Shopify is for those Developers wishing to use Gulp.js and Shopify’s Theme Kit to develop their Shopify theme – a tidy solution to the problem with Shopify not allowing sub-directories within the /assets directory.

The theme is packaged with Gulp for watching and compiling assets in the /dev directory, including SCSS, JS, images and fonts. When modified, said assets are moved across to the /assets directory.

A selection of helpful mixins is also included, most of which are featured in this useful article by @seb_ekstrom.

You may also write your JavaScript in ES6 – The Gulp scripts task uses Babel, so you can use new syntax without worrying about browser support!

The default theme files have been brought across from Shopify’s Skeleton theme.

Installation

Gulp.js

Clone the repo into your project root.

In Terminal, cd into the /dev directory and install the Gulp packages (if you haven’t already installed Gulp, you’ll need to do so first):

npm install

Note: you may need to run the command as sudo npm install, depending on your permissions.

Once you have installed the packages, in Terminal, run gulp watch.

Any changes to the SCSS files in /dev/sass/ will lead to the creation of theme.scss.liquid in assets.

Any alterations to the JS files in /dev/js/functions/ will be concatenated and uglified in /assets to theme.js and theme.min.js.

Images added to /dev/image will be copied across to the /assets directory. Similarly, any fonts added to /dev/font will be copied across to /assets.

Theme Kit

To get Theme Kit up and running, follow the instructions here.

The config.yml file is included in the repo, ready to be filled in with the necessary details.

To get started on your theme, follow these instructions.

Features

The Gulp build features the following helpful packages:

Credits