Starter kit for Shopify theme developers

I've created a starter kit for Shopify theme developers.
You can customize a theme and build a new one from scratch efficiently.

I've prepared two starter kits to develop the Shopify theme. I recommend you use shopify-quick-theme-mix if you want to connect your Shopify store with the GitHub repository.

🚀 shopify-quick-theme
🚀 shopify-quick-theme-mix

We've always used Shopify Slate and Shopify Theme Kit to develop the Shopify theme.

Shopify recommends using Shopify CLI at working on Online Store 2.0 especially. (2023/10)

📖 Choosing between Shopify CLI and Theme Kit

These starter kits work on Shopify CLI fundamentally.

Requirements

Node v18 or higher
Shopify CLI v3 or higher

Please refer to Install Shopify CLI if you haven't installed Shopify CLI yet.

Features

Abstracting Shopify CLI command
Bundle files with Rspack
Transpile SCSS to CSS with dart-sass
Lint TS files with ESLint
Lint SCSS files with Stylelint
Format code with prettier
Built-in test runner with Jest and Playwright

How to use

You can directly generate a new repository from this repository.

🚀 shopify-quick-theme
🚀 shopify-quick-theme-mix

Please click "Use this template".

Clone your project repository

Clone the repository you generated from shopify-quick-theme or shopify-quick-theme-mix.

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

Install packages

Install all dependencies for a project with bellow command.

pnpm install

Create a .env file

Create 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

Create a new theme

Use newTheme command to create a new theme from scratch. This command creates a copy of Dawn.

pnpm newTheme

Customize an existing theme

Use pull:new command to customize an existing theme.

pnpm pull:new

Add CSS and JavaScript into your theme files

Add these tags in <head></head> section.

{{ 'custom-style.css' | asset_url | stylesheet_tag }}

<script src="{{ 'custom-script.js' | asset_url }}" defer></script>

Start development

Run a start command.

pnpm dev

GitHub integration

shopify-quick-theme doesn't support the Shopify GitHub integration because Shopify allows only branches that match the default Shopify theme folder structure. I recommend you to use git subtree or shopify-quick-theme-mix.

shopify-quick-theme-mix supports Shopify GitHub integration.

That's all to do before you start your project🎉.