{"id":23490087,"url":"https://github.com/dlerm/shopify-themecraft","last_synced_at":"2025-10-08T10:01:44.223Z","repository":{"id":223034168,"uuid":"759141703","full_name":"dlerm/shopify-themecraft","owner":"dlerm","description":"A Shopify theme development workflow using Liquid, AlpineJS, Tailwind CSS, Vite \u0026 Shopify CLI","archived":false,"fork":false,"pushed_at":"2024-02-17T19:19:18.000Z","size":66,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-02-16T11:16:20.742Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dlerm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-17T19:00:08.000Z","updated_at":"2025-02-05T19:35:01.000Z","dependencies_parsed_at":"2024-02-17T20:38:41.585Z","dependency_job_id":null,"html_url":"https://github.com/dlerm/shopify-themecraft","commit_stats":null,"previous_names":["dlerm/shopify-themecraft"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlerm%2Fshopify-themecraft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlerm%2Fshopify-themecraft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlerm%2Fshopify-themecraft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlerm%2Fshopify-themecraft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dlerm","download_url":"https://codeload.github.com/dlerm/shopify-themecraft/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248907927,"owners_count":21181433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-25T00:18:26.040Z","updated_at":"2025-10-08T10:01:39.171Z","avatar_url":"https://github.com/dlerm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Logo\" src=\"https://raw.githubusercontent.com/dlerm/shopify-themecraft/master/.github/img/logo.svg\" width=\"250px\" style=\"max-width: 100%\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Static Badge ShopifyThemeCraft\" src=\"https://img.shields.io/badge/version-1.0.0-FF4D4D\"\u003e\n  \u003cimg alt=\"Static Badge Vite\" src=\"https://img.shields.io/badge/vite-%5E4.0.0-646cff\"\u003e\n  \u003cimg alt=\"Static Badge AplineJS\" src=\"https://img.shields.io/badge/alpinejs-%5E3.13.3-259dbe\"\u003e\n  \u003cimg alt=\"Static Badge TailwindCSS\" src=\"https://img.shields.io/badge/tailwindcss-%5E3.4.0-06b6d4\"\u003e\n\u003c/p\u003e\n\n# Shopify ThemeCraft\n\n- [Shopify ThemeCraft](#shopify-themecraft)\n  - [Getting Started](#getting-started)\n  - [Theme Architecture](#theme-architecture)\n    - [Shopify](#shopify)\n    - [AplineJS](#aplinejs)\n    - [TailwindCSS](#tailwindcss)\n    - [Icons](#icons)\n    - [File Structure](#file-structure)\n  - [Build Tools](#build-tools)\n    - [Vite](#vite)\n  - [Developer Tools](#developer-tools)\n    - [AlpineJS Devtools](#alpinejs-devtools)\n\n## Getting Started\n\nIn order to work on this theme codebase, you must install some prerequesite software on your machine.\n\n**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/)\n\n**Optional**: [iTerm](https://iterm2.com/)\n\n\u003e ##### GIT\n\u003e\n\u003e Run the following command to install git: `xcode-select --install`\n\nOnce all neccessary software is installed, you can **download the project dependencies** by running this command:\n\n```\nnpm install\n```\n\nNext 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.\n\nNow you are ready to begin working. You can start up the development environment and tooling by running this command:\n\n```\nnpm run dev\n```\n\nAt this point you can begin building features by editting local files and previewing the changes on the generated development theme.\n\nSee [package.json](package.json) scripts for a list of all project commands\n\n## Theme Architecture\n\n### Shopify\n\nThis 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)).\n\n### AplineJS\n\nThe 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)).\n\n### TailwindCSS\n\nThe 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.\n\n### Icons\n\nIn 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.\n\n\u003cu\u003eAdd a new icon\u003c/u\u003e: 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.\n\n\u003cu\u003eOutput an icon\u003c/u\u003e: 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.\n\n### File Structure\n\n```markdown\n├── shopify\n│ ├── assets/\n│ ├── config/\n│ ├── layout/\n│ ├── locales/\n│ ├── sections/\n│ ├── snippets/\n│ ├── templates/\n│ ├── .shopifyignore\n├── src\n│ ├── alpine\n│ │ ├── components/\n│ │ ├── stores/\n│ ├── icons/\n│ ├── styles/\n│ ├── main.js\n├── package.json\n├── tailwind.config.js\n└── vite.config.js\n```\n\n## Build Tools\n\n### Vite\n\nThis 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.\n\n## Developer Tools\n\nThese tools can expedite development of our Shopify theme code.\n\n### AlpineJS Devtools\n\n[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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdlerm%2Fshopify-themecraft","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdlerm%2Fshopify-themecraft","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdlerm%2Fshopify-themecraft/lists"}