https://github.com/dlerm/shopify-themecraft
A Shopify theme development workflow using Liquid, AlpineJS, Tailwind CSS, Vite & Shopify CLI
https://github.com/dlerm/shopify-themecraft
Last synced: 10 months ago
JSON representation
A Shopify theme development workflow using Liquid, AlpineJS, Tailwind CSS, Vite & Shopify CLI
- Host: GitHub
- URL: https://github.com/dlerm/shopify-themecraft
- Owner: dlerm
- License: mit
- Created: 2024-02-17T19:00:08.000Z (over 2 years ago)
- Default Branch: develop
- Last Pushed: 2024-02-17T19:19:18.000Z (over 2 years ago)
- Last Synced: 2025-02-16T11:16:20.742Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 64.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shopify ThemeCraft
- [Shopify ThemeCraft](#shopify-themecraft)
- [Getting Started](#getting-started)
- [Theme Architecture](#theme-architecture)
- [Shopify](#shopify)
- [AplineJS](#aplinejs)
- [TailwindCSS](#tailwindcss)
- [Icons](#icons)
- [File Structure](#file-structure)
- [Build Tools](#build-tools)
- [Vite](#vite)
- [Developer Tools](#developer-tools)
- [AlpineJS Devtools](#alpinejs-devtools)
## Getting Started
In order to work on this theme codebase, you must install some prerequesite software on your machine.
**Prequisites**: [GIT](#git) | [Homebrew](https://brew.sh/) | [NVM](https://formulae.brew.sh/formula/nvm) | [Node](https://github.com/nvm-sh/nvm/blob/master/README.md#usage) | [Shopify CLI](https://shopify.dev/docs/themes/tools/cli/install#install-shopify-cli) | [VSCode](https://code.visualstudio.com/)
**Optional**: [iTerm](https://iterm2.com/)
> ##### GIT
>
> Run the following command to install git: `xcode-select --install`
Once all neccessary software is installed, you can **download the project dependencies** by running this command:
```
npm install
```
Next you must update `shopify.theme.toml` to include a **store** value. See [Shopify Docs](https://shopify.dev/docs/themes/tools/cli/environments) for more info.
Now you are ready to begin working. You can start up the development environment and tooling by running this command:
```
npm run dev
```
At this point you can begin building features by editting local files and previewing the changes on the generated development theme.
See [package.json](package.json) scripts for a list of all project commands
## Theme Architecture
### Shopify
This theme is built upon the [Shopify Online Store 2.0](https://shopify.dev/docs/themes/os20) theme structure and is meant to be built in a way that enables non-tech users to customize many aspects of the site ([see here](/shopify)).
### AplineJS
The codebase interface logic and interations are handled primarly by [AlpineJS](https://alpinejs.dev/start-here), which is a lightweight framework for composing behavior directly in your markup. Alpine components can be written directly in the shopify liquid templating code ([see here](/shopify)), or abstracted into individual component module JS files ([see here](/src/alpine/components)).
### TailwindCSS
The theme is styled using [TailwindCSS](https://tailwindcss.com/docs/theme), which is a utility-first CSS framework that can be composed to build any design, directly in your markup. See the [Tailwind configuration file](tailwind.config.cjs) for our utility defaults, extensions, and plugins. Standard CSS can also be utilized, particularly in cases when we do not have direct control over certain markup ([see here](/src/styles)). An optional animation library is available to use, see [TailwindCSS Animated](https://www.tailwindcss-animated.com/configurator.html) for usage references.
### Icons
In order to easily add and re-use SVG icons throughout the codebase, there is a [sprite plugin](https://github.com/vbenjs/vite-plugin-svg-icons) added into the build tool.
Add a new icon: Include the svg file in the `src/icons/` folder ([see here](/src/icons)). This svg file will be combined with the other svgs into a single symbol spritesheet with optimized icons that can be referenced anywhere.
Output an icon: Reference the [icon snippet](/shopify/snippets/icon.liquid), and pass it a parameter for the **name** of the icon (svg filename) and an optional CSS **class** (or classes) you would like to attach.
### File Structure
```markdown
├── shopify
│ ├── assets/
│ ├── config/
│ ├── layout/
│ ├── locales/
│ ├── sections/
│ ├── snippets/
│ ├── templates/
│ ├── .shopifyignore
├── src
│ ├── alpine
│ │ ├── components/
│ │ ├── stores/
│ ├── icons/
│ ├── styles/
│ ├── main.js
├── package.json
├── tailwind.config.js
└── vite.config.js
```
## Build Tools
### Vite
This repo utilizes [Vite](https://vitejs.dev/config/) to bundle and optimize our javascript. When the `dev` command runs, Vite will watch the project and re-compile assets anytime a local file is changed. See the [Vite configuration file](vite.config.js) for the build options, plugins, and path aliases.
## Developer Tools
These tools can expedite development of our Shopify theme code.
### AlpineJS Devtools
[AlpineJS Devtools](https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk) is a browser extension to detect, inspect and edit AlpineJs data and components in the Chrome Developer Tools.