Starter kit for Shopify theme developers
Tags: shopify, webdev
Published: 2022-03-07 04:45:08

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](https://github.com/Kazuki-tam/shopify-quick-theme)
[🚀 shopify-quick-theme-mix
](https://github.com/Kazuki-tam/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](https://shopify.dev/themes/tools/cli#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](https://shopify.dev/themes/tools/cli/installation) 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](https://github.com/Kazuki-tam/shopify-quick-theme)
[🚀 shopify-quick-theme-mix
](https://github.com/Kazuki-tam/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`.

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

### Install packages

Install all dependencies for a project with bellow command.

```shell
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.

```shell
pnpm newTheme
```

### Customize an existing theme

Use pull:new command to customize an existing theme.

```shell
pnpm pull:new
```

### Add CSS and JavaScript into your theme files

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

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

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

### Start development

Run a start command.

```shell
pnpm dev
```

### GitHub integration
[shopify-quick-theme](https://github.com/Kazuki-tam/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](https://github.com/Kazuki-tam/shopify-quick-theme-mix).

[shopify-quick-theme-mix](https://github.com/Kazuki-tam/shopify-quick-theme-mix) supports Shopify GitHub integration.

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