2.0.5 • Published 5 months ago
elbdev-shopify-kickstart v2.0.5
elbDev Shopify Theme-Development Workflow
This repository contains the source code of a shopify theme, based on the new Shopify theme CLI introduced with the OS 2.0 update. Please note that the webpack configuration is a work in progress and there is potential for further optimizations.
Introduction
This repository provides the necessary files and workflow to develop and deploy the theme efficiently.
Requirements for Installation
- Shopify CLI (Version > 3.0.0)
- Node.js and Yarn
- Python 3
Installation
Add the package to the package.json of your project:
yarn add -D elbdev-shopify-kickstart
Add the following scripts to your package.json file:
"build": "webpack --mode=development",
"dev": "webpack --watch --mode=development",
"serve": "python3 ./node_modules/elbdev-shopify-kickstart/.scripts/run_serve.py",
"deploy": "python3 ./node_modules/elbdev-shopify-kickstart/.scripts/run_deploy.py",
"pull-templates": "python3 ./node_modules/elbdev-shopify-kickstart/.scripts/run_pull_templates.py",
"clean-themes": "python3 ./node_modules/elbdev-shopify-kickstart/.scripts/run_clean_themes.py"
Ensure Project Structure
Make sure the following files and directories are present in the root of your project:
- webpack.config.js: Your Webpack configuration file.
- .shopifyconfig: A configuration file containing your Shopify store URL. Example content:
STORE_URL=https://your-shop.myshopify.com
- src/: A directory containing your source files. The expected structure is:
src/
├── js/
│ └── custom.js
└── scss/
├── modules/
└── custom.scss
Run Development and Build Commands
Use the following commands to manage your development and deployment workflow:
- yarn dev: Starts Webpack in watch mode for development.
- yarn build: Builds the theme assets in development mode.
- yarn serve: Starts the Shopify theme development server.
- yarn deploy: Deploys the theme to Shopify.
- yarn pull-templates: Pulls specific theme templates from Shopify.
- yarn clean-themes: Cleans up unused themes from your Shopify store.