shopify gulp autoprefixer sass babel themekit

Shopify Theme Boilerplate

🛒 A minimal Shopify theme boilerplate with support for Gulp, Autoprefixer, Babel and more.

Prerequisites

Node.js

Theme Kit

Setup

Setting up this boilerplate theme consists of two phases.

Creating the Shopify theme and finding the theme id

Clone the repository
Compress the folder into a .zip file
Inside the admin panel, go into Online Store > Themes
Click the Upload Theme button and pick your .zip file
To the right of the newly created theme, click Customize.
The XXXXXXXXXXX part of the URL is your theme id https://my-example-store.myshopify.com/admin/themes/XXXXXXXXXXX/editor

Setting up the development environment

Create a file named config.yml in the root, with the content of the already existing file config.example.yml
Replace the dummy-credentials with your actual ones
cd into the dev-assets folder and install the dependencies by running
```
npm install
```

Usage

Using the boilerplate theme is very smooth.

Open two terminal windows/tabs
In the first one, cd into the root of the theme and run
```
theme watch
```
In the second one, cd into the dev-assets folder and run
```
gulp watch
```

The theme watch command watches for changes in the theme files and will update the theme with the new files if any changes occur. The gulp watch command watches the files inside the dev-assets folder. When a file change occurs there, Gulp processes and copies the affected files into the assets folder of the Shopify theme. This triggers the theme watch command and the theme will be updated.

About