Shopify Theme App Extension, Gulp

Last year Shopify introduced the ability to efficiently layer content or functionality into a theme via Theme App Extensions. Theme app extensions extend Shopify app capabilities by allowing app developers to provide the app extension directly in the theme customizer.

While building theme app extensions using the Shopify CLI, you must run the command shopify extension push each time you need to upload and view changes made to your code for the extension. This can get quite repetitive and redundant, especially when trying to solve problems or simply coding on a work in-progress.

shopify extension serve command is not supported for Shopify theme app extensions which is why we have to do this. As a solution, I created a simple Gulp task that automates pushing theme extension file updates automatically. With this approach, you will not have to cd to the theme-app-extension directory, nor will you need to run the shopify extension push command manually each time you make a change to your files.

Dependancies

node, npm, and npx

Add gulp.

If gulp is not already installed follow the quick start instructions at https://gulpjs.com/docs/en/getting-started/quick-start to install Gulp in your project.

Add gulp-run by running command npm i gulp-run.

gulp-run can be found at https://www.npmjs.com/package/gulp-run.

Install

Add gulpfile.js to root of your project.

Add "extension": "gulp" && "push:extension": "(cd ./theme-app-extension; shopify extension push)" commands to package.json file scripts.

example:

"scripts": {
 "extension": "gulp",
 "push:extension": "(cd ./theme-app-extension; shopify extension push)"
}

Update your files pathes in the watcher(); function. By default, we watch for theme-app-extension/assets/*, theme-app-extension/blocks/*' and theme-app-extension/snippets/*. You may add or change these depending upon your requirements.

example:

const watcher = async (cb) => {
 watch('theme-app-extension/assets/*', push);
 watch('theme-app-extension/blocks/*', push);
 watch('theme-app-extension/snippets/*', push);
 cb();
}

Usage

Open a new terminal in your project root and run npm run push:extension to manually push. To run the Gulp process to automatically push, run npm run extension. (Note: You stay in the main app project root, you do not need to cd into theme-app-extension)
Upon save the script will now push theme extension updates to Shopify accordingly.

If you are already are using Gulp, skip install step #1 and download & include the script into your existing gulpfile.js. Then continue from steps #2 onward.

// Imports
const { series, watch } = require('gulp');
const run = require('gulp-run');

const watcher = async (cb) => {
  watch('theme-app-extension/assets/*', push);
  watch('theme-app-extension/blocks/*', push);
  watch('theme-app-extension/snippets/*', push);
  cb();
}

const push = async () => {
  const pushExtension = new run.Command('npm run push:extension');
  pushExtension.exec();
}

// Exports
exports.default = series(watcher);

To save you time, I've organized this on Github so you can download or fork it here: https://github.com/akantro-engineering/shopify-theme-app-extension-gulp

Please keep in mind your local development environment setup may require you to alter the paths.

Shopify Theme App Extension, Gulp

Subscribe to new posts.