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
, andnpx
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, runnpm run extension
. (Note: You stay in the main app project root, you do not need tocd
intotheme-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.