shopify-quick-theme is a starter kit for Shopify theme developers. This starter kit supports you to customize a Shopify theme and build a new one from scratch.
Please refer to shopify-quick-theme-mix if you want to use Shopify GitHub integration.
- Abstracting Shopify CLI command
- Bundle TS files with Rspack
- Transpile SCSS to CSS
- Lint TS files with Biome
- Built-in test runner with Vitest and Playwright
Note: Please refer to Install Shopify CLI if you haven't installed Shopify CLI yet.
📖 Upgrade or uninstall Shopify CLI
Clone this repository and install dependencies.
pnpm installCreate a .env file at the root directory, and then add your SHOPIFY_FLAG_STORE value at least. Replace the placeholder YOUR_STORE_NAME with your actual store name.
SHOPIFY_FLAG_STORE=YOUR_STORE_NAME
Use newTheme command to create a new theme from scratch. This command creates a copy of Dawn.
pnpm newTheme📖 Shopify CLI commands for themes - init
Use pull:new command to customize an existing theme.
pnpm pull:newAdd these tags in <head></head> section.
{{ 'custom-style.css' | asset_url | stylesheet_tag }}<script src="{{ 'custom-script.js' | asset_url }}" defer></script>Recommend you to check out these commands before you get started.
Start your project in development mode.
pnpm devBuild your project for production.
pnpm releaseBuild your project for development.
pnpm buildOther support commands
Retrieve theme files from Shopify without deleting local files.
pnpm pullUpload your local theme files to Shopify without deleting remote files.
pnpm pushPush to your development theme. If you don't have a development theme, then one is created.
pnpm push:devUpload the theme to the theme library as a new unpublished theme.
pnpm push:uploadBuild your local files and upload them to Shopify as production.
pnpm deployBuild your local files and upload them to Shopify as development.
pnpm deploy:devReturns links that let you preview the specified theme.
pnpm previewOpen Shopify Cheat Sheet.
pnpm cheatOpen Shopify theme document.
pnpm themeDocsLint this project code.
pnpm lintFix this project code.
pnpm lint:fixRun End-to-end testing and unit testing.
pnpm testRun unit testing.
pnpm unitpnpm unit:watchRun End-to-end testing in a headless.
pnpm e2eRun End-to-end testing with headed browser.
pnpm e2e:headedGenerate End-to-end test code.
pnpm e2e:codegenUploads your theme as a new, unpublished theme in your theme library.
pnpm sharePackages your local theme files into a ZIP file that can be uploaded to Shopify.
pnpm packageInstall missing TypeScript typings.
pnpm postInstallPlease create an env file and run this command if you want to do an End-to-end test.
Install supported browsers.
pnpm e2e:installPull requests are always welcome.
I'll be trying to keep this starter kit as up-to-date as possible. I hope you buy me a coffee if this starter kit is helpful for you.
MIT