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🎉.
Top comments (5)
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?
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.
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!
@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
@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.