In order to work on this theme codebase, you must install some prerequesite software on your machine.
Prequisites: GIT | Homebrew | NVM | Node | Shopify CLI | VSCode
Optional: iTerm
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 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 scripts for a list of all project commands
This theme is built upon the Shopify Online Store 2.0 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).
The codebase interface logic and interations are handled primarly by AlpineJS, 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), or abstracted into individual component module JS files (see here).
The theme is styled using TailwindCSS, which is a utility-first CSS framework that can be composed to build any design, directly in your markup. See the Tailwind configuration file 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). An optional animation library is available to use, see TailwindCSS Animated for usage references.
In order to easily add and re-use SVG icons throughout the codebase, there is a sprite plugin added into the build tool.
Add a new icon: Include the svg file in the src/icons/ folder (see here). 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, 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.
├── shopify
│ ├── assets/
│ ├── config/
│ ├── layout/
│ ├── locales/
│ ├── sections/
│ ├── snippets/
│ ├── templates/
│ ├── .shopifyignore
├── src
│ ├── alpine
│ │ ├── components/
│ │ ├── stores/
│ ├── icons/
│ ├── styles/
│ ├── main.js
├── package.json
├── tailwind.config.js
└── vite.config.jsThis repo utilizes Vite 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 for the build options, plugins, and path aliases.
These tools can expedite development of our Shopify theme code.
AlpineJS Devtools is a browser extension to detect, inspect and edit AlpineJs data and components in the Chrome Developer Tools.