Shopify Duck Tape

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.

Before You Get Started

1. Have Themekit and Node installed.
2. Setup your Shopify store and generate your API credentials.

Getting Started

1. Download the repo.
2. Our friend npm install.
3. cd into the src folder.
4. Using Themekit start a new theme or get an existing one.
5. cd ../ back out to the root and run npm run dev to start developing your theme.
6. 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.

Commands

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.

Structure

• Configure Postcss in postcss.config.js
• Configure esbuild in esbuild.config.js
• Edit your templates in src
• Write CSS in src/styles, this builds to src/assets/index.css
• Write JS in src/scripts, this builds to src/assets/index.js