DEV Community

Cover image for Starter kit for Shopify theme developers
Kazuki Yonemoto
Kazuki Yonemoto

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

Install packages

Install all dependencies for a project with bellow command.

pnpm install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Create a new theme

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

pnpm newTheme
Enter fullscreen mode Exit fullscreen mode

Customize an existing theme

Use pull:new command to customize an existing theme.

pnpm pull:new
Enter fullscreen mode Exit fullscreen mode

Add CSS and JavaScript into your theme files

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

{{ 'custom-style.css' | asset_url | stylesheet_tag }}
Enter fullscreen mode Exit fullscreen mode
<script src="{{ 'custom-script.js' | asset_url }}" defer></script>
Enter fullscreen mode Exit fullscreen mode

Start development

Run a start command.

pnpm dev
Enter fullscreen mode Exit fullscreen mode

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πŸŽ‰.

Top comments (5)

Collapse
 
nickarrasate profile image
Nick Arrasate • Edited

Hi @tim_yone ! I've been using this tool to develop and it's been great! nice work. I wonder if you've had any luck integrating a theme developed inside this tool into the GitHub > Shopify integration?

Collapse
 
tim_yone profile image
Kazuki Yonemoto • Edited

Hi Nick! Thank you for your comment. This starter kit doesn't support the Shopify GitHub integration because Shopify allows only branches that match the default Shopify theme folder structure, as you mentioned. I recommend you to use git subtree. Shopify also recommends this strategy to manage both your source and compiled code in version control.

shopify.dev/themes/best-practices/...

I consider if I create a new starter kit which is simple structure for the Shopify GitHub integration.

Collapse
 
nickarrasate profile image
Nick Arrasate

So i set up a subtree repo to hold the prod theme that can be hooked up to the GH > Shopify integration and i think it'll work great for our purposes. Thanks again!

Thread Thread
 
pierrewebdev profile image
Patrick Pierre

@nickarrasate @tim_yone
I know this post is a few months old but you did say you managed to create a subtree repo
Would you mind sharing the resources you used to learn about how to use subtrees and connect the Shopify Github integration to it

Thread Thread
 
tim_yone profile image
Kazuki Yonemoto

@pierrewebdev
Here is the resource to use git subtree in Shopify theme development, although this doc is Japanese.
zenn.dev/sgrynd/articles/7b8b9e295...

However, it’s a bother to use git subtree.
I recommend using this repo if you consider GitHub integration.