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",
  "jira": "python3 ./node_modules/elbdev-shopify-kickstart/.scripts/run_jira.py",
  "commit": "python3 ./node_modules/elbdev-shopify-kickstart/.scripts/run_commit.py"

Ensure Project Structure

Make sure the following files and directories are present in the root of your project:

1. webpack.config.js: Your Webpack configuration file.
2. .shopifyconfig: A configuration file containing your Shopify store URL. Example content:

STORE_URL=https://your-shop.myshopify.com

3. 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.