A quick, messy, set of node scripts for Shopify development in this, the year of our lord two thousand and twenty one. This is really just the simplest wrapper around Themekit I could implement on the job.
Features:
- esbuild for snappy bundling.
- Postcss for styles (especially since Shopify is deprecating sass).
- Simple watch scripts to rebuild on changes.
- Have Themekit and Node installed.
- Setup your Shopify store and generate your API credentials.
- Download the repo.
- Our friend
npm install
. cd
into thesrc
folder.- Using Themekit start a new theme or get an existing one.
cd ../
back out to the root and runnpm run dev
to start developing your theme.- You're good to go ✨
Remember to update your script tag and stylesheet link to look for your built files! Named /index.css
and /index.js
by default.
Bonus step: move your environment variables into a variables
to excluded them from git. See reference.
npm run dev
Runs Themekit on watch inside src
exactly as described here. It will also watch your scripts and CSS for changes, rebuilding on save and pushing these updates to your theme (not as fast as I'd like tbh).
npm run deploy
Builds CSS and JS then pushes everything inside src
to Shopify using the Themekit deploy command. It runs with a production
environment variable which you can use to conditionally apply postproccessing (eg. only minify CSS in production), see postcss.config.js
.