{"id":13477840,"url":"https://github.com/spiral/shopify-starter-kit","last_synced_at":"2025-06-19T23:06:30.285Z","repository":{"id":39752249,"uuid":"350025439","full_name":"spiral/shopify-starter-kit","owner":"spiral","description":"Starter theme and environment for the largest Shopify stores.","archived":false,"fork":false,"pushed_at":"2024-01-18T08:46:46.000Z","size":3549,"stargazers_count":24,"open_issues_count":9,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T06:34:51.502Z","etag":null,"topics":["boilerplate","liquid","shopify","template","webpack"],"latest_commit_sha":null,"homepage":"","language":"Liquid","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/spiral.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-21T14:39:11.000Z","updated_at":"2024-12-18T16:34:00.000Z","dependencies_parsed_at":"2024-06-12T15:50:42.813Z","dependency_job_id":null,"html_url":"https://github.com/spiral/shopify-starter-kit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/spiral/shopify-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiral%2Fshopify-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiral%2Fshopify-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiral%2Fshopify-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiral%2Fshopify-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spiral","download_url":"https://codeload.github.com/spiral/shopify-starter-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiral%2Fshopify-starter-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260845815,"owners_count":23071685,"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":["boilerplate","liquid","shopify","template","webpack"],"created_at":"2024-07-31T16:01:48.345Z","updated_at":"2025-06-19T23:06:25.272Z","avatar_url":"https://github.com/spiral.png","language":"Liquid","funding_links":[],"categories":["Liquid"],"sub_categories":[],"readme":"# Shopify-starter-kit\n\n**Shopify starter kit** is the starter theme and development environment for the largest Shopify stores.\nRepository makes it easier to work with the distribution of files in the project and automates some tasks.\n**Shopify starter kit** based on [Shopify Themekit](https://github.com/Shopify/themekit) and inspired by Shopify [Slate](https://github.com/Shopify/slate) and popular front-end frameworks like a React and Vue.\n\n\n**Shopify starter kit** was builded with using technologies and tools:\n\n- Node.js `^14.15.0`\n- NPM `^7.0.0`\n- Webpack \n- SASS \n- Eslint, Stylelint\n- Git hooks with prettier + lint-staged\n- Shopify Themekit\n- Github CI / Gitlab CI\n\n---\n\n## Table of contents\n\n* [General info](#General-Info)\n  - Shopify starter kit in [Basic mode](#basic-mode)\n  - Shopify starter kit in [Advanced mode](#advanced-mode)\n* [Getting Started](#Getting-Started)\n* [Shopify Themekit](#Shopify-Themekit)\n    - [Configuration for themekit](#configuration-for-Themekit)\n* [File Structure Contract](#File-Structure-Contract)\n  - [Folders descriptions](#folders-descriptions)\n* [Commands](#Commands)\n\n\n\n## General info\n\n**Shopify starter kit** is a tool for comfortable team development of Shopify stores. \nThe main goal of our team was to facilitate the start of new projects. \nFor us, this means a quick start, the use of latest js standards and the use of teamwork tools. \nWe tried to collect the most important things in one place - this is how the **Shopify starter kit** turned out.\n\n**Shopify starter kit** support 2 ways to use: [**basic**](#basic-mode) and [**advanced**]((#advanced-mode)) modes.\n\n### Basic mode\n\nBasic Mode allows to use a **Shopify starter kit** for existing Shopify repositories. \nFor using this mode, you need to follow a few simple steps:\n1. Clone this repo to own project folder\n2. Install dependencies\n3. Clean out src folder, only `scripts` folder needs to be keep.\n4. Set actual data to the config.yml file\n5. Download current shopify store with the command `npm run download:theme`\nThen all your store files will be placed into the `./theme` folder and everything is ready to go.\n\nAll new functionality (scripts and styles) you can add directly to `./src` folder. \nAfter the build they must be processed and placed in `./dist/assets` as build artifacts. \nWe are using webpack: `mini-css-extract-plugin` for build style files, and it should work at this point.\n\n❗**NOTE**: If you need to build only js scripts for theme, you don't need to clean up the whole src folder.\nYou should keep a `src/scripts`. The files in this folder were processed by linters and builders.\n\n\n### Advanced mode\n\nAdvanced Mode provides a powerful set for building Shopify stores.\nThis mode makes it easier to work with store pages.\nAn advanced file structure allows you to separate the code between pages and load only the necessary functionality on the page, which increases the speed of the site. \nThe structure also makes it easier to find and fix problems in the code, which speeds up the work of developers.\n\nThe advanced mode allows you to use all features of the **Shopify starter kit**:\n- Using the latest JS standard in script files\n- Fixed component structure support\n- CLI for generating components of this structure\n- Separation of styles between pages, which allows optimization loading of styles and scripts, code splitting\n- Placing page styles directly in templates to speed up page loading\n- Using linting and code styling tools\n- Customized auto-corrections style code at the time of commit creation\n- Prepared CI/CD for github and gitlab repos\n\nAll templates in `./src` folder are based on shopify starter theme and provide **BEM** naming methodology (Block, Element, Modificator).\nAdvanced mode supports partial relocation to the new structure and all files in `./theme` folder will work fine.\n\n❗**NOTE**: This mod is only suitable for those stores where no code changes are expected in the admin panel.\nIn advanced mode, at the moment there is no way to do full syncing with the existing store. \nAll files downloaded from the existing store will be placed in the `./theme` folder and there will be no replacement in the structure\n\n---\n\n## Getting Started\n\nFor starting core of project you need to do few simple steps:\n1. Clone this repo,\n2. Install dependencies using npm or yarn. `npm install`,\n3. Create config file: `config.yml` with correct settings. Can use the `config.example.yml` as example,\n4. Start you project using npm or yarn `npm run start` or `npm run start:prod`.\n\nAfter build all changes will be applied into you selected Shopify theme.\nAdditional information you can find in the [Shopify Themekit](#Shopify-Themekit) block.\n\n\n## [Shopify Themekit](https://github.com/Shopify/themekit)\n\nDon't forget to check theme ids before launching theme kit watcher❗\nThe command `watch` starts a process that will watch the directory for changes and upload them to Shopify.\n\n#### Configuration for Themekit\n\nAfter cloning the repo, copy `config.example.yml` and rename the copy to `config.yml`.\nThe file `config.yml` should contain development credentials (the current feature theme).\nThe production credentials (the current live theme) is optional.\n\nThe current feature theme is the developers's own theme. Starting to work on a new feature the developer must change the **development** `theme_id` to the corresponding one every time.\n\n```\ndevelopment:\n  store: [your-store].myshopify.com\n  password: [your-api-password]\n  theme_id: \"[your-theme-id]\"\n  ignore_files:\n    - config/settings_data.json\n```\n\n---\n\n## Commands\n\nThe **Shopify starter kit** contains many commands for working on a project. \nMost theme commands are short names for the Shopify [Themekit](https://github.com/Shopify/themekit). \nHowever, most of it allows you to work with the project itself. Just a few basic commands are described below. \nA complete list of commands can be found in the `package.json` file.\n\n#### Commands short list:\n\n* [Download](#Download)\n* [Start](#Start)\n* [Build](#Build)\n* [Deploy](#Deploy)\n* [Creating components](#Creating-components)\n* [Analyze](#Analyze)\n\n#### Download\n\nThe commands to download the existed shopify stores.\nWe have 2 commands to download theme:\n\n```bash\nnpm run theme:download\n```\n\nor \n\n```bash\nnpm run theme:download:prod\n```\n\n`theme:download` related to development environment part of your config.yml file, \n\n`theme:download:prod` related to production environment.\n\n---\n\n#### Start\n\nStart command will run a webpack watcher, the Themekit deploy watcher and open a development store in new browser window.\nBy default, this command runs only for development environment.\n\n```bash\nnpm run start\n```\n\n---\n\n#### Build\n\nThe `build` command prepare all files for deploy. \nAll files will be processed and placed into `./dist` folder.\nThere are supported development and production modes.\n\n```bash\nnpm run build\n```\n\nor\n\n```bash\nnpm run build:prod\n```\n\nThe `build` command is shorthand for `webpack` run script. \nBy default, it starts with a `--progress` flag.\n\n---\n\n#### Deploy\n\nCommand for uploading all files from `./dist` folder to your shopify store. \nBased on [Themekit](https://github.com/Shopify/themekit).\n\n```bash\nnpm run deploy\n```\n\nor\n\n```bash\nnpm run deploy:prod\n```\n\nDeploy command it is shorthand of few base commands: `lint`, `build`, and [Themekit](https://github.com/Shopify/themekit) `deploy`.\n\n---\n\n#### Creating components\n\nThe **Shopify starter kit** provides the CLI to creating new entities in own structures.\nCLI is based on `yeoman` generator and can be started with the `yo` command. \nCLI is supported to creating style, script and liquid files for templates, section, snippets.\nAll templates already used scripts and styles inside the `liquid` files.\nYou can expand or change it in the `generator` folder after cloning **shopify starter kit**.\n\n```bash\nnpm run gen\n```\n\n\n---\n\n#### Analyze\nIt is CLI command for profiling js assets.\nAnalyze is the shortcut for two commands: `webpack --profile` and run [`webpack-bundle-analyzer`](https://www.npmjs.com/package/webpack-bundle-analyzer).\nYou can find more details about profiling in webpack docs [webpack profile](https://webpack.js.org/configuration/other-options/#profile).\n\n```bash\nnpm run analyze\n```\n\nor\n\n```bash\nnpm run analyze:prod\n```\n\n## File Structure Contract\n\nThe file structure contract is the main feature of **Shopify starter kit**. \n❗This structure only supports with advanced mode \nThe synchronization between shopify store and file structure doesn't work yet.\n\n```\n/src\n ├── assets\n |    └── index.js\n ├── customers\n |    └── customer-template\n |         ├── section-name\n |         |    ├── section-name.js\n |         |    ├── section-name.liquid\n |         |    └── section-name.scss\n |         ├── customer-template.js\n |         ├── customer-template.liquid\n |         └── customer-template.scss\n ├── templates\n |    ├── common\n |    |    └── common-section-name\n |    |         ├── common-section-name.js\n |    |         ├── common-section-name.liquid\n |    |         └── common-section-name.scss\n |    └── template-name\n |         ├── section-name\n |         |    ├── section-name.js\n |         |    ├── section-name.liquid\n |         |    └── section-name.scss\n |         ├── template-name.js\n |         ├── template-name.liquid\n |         └── template-name.scss\n ├── scripts\n └── snippets\n      └── snippet-name\n           ├── snippet-name.js\n           ├── snippet-name.luqiid\n           └── snippet-name.scss\n/theme\n```\n\nJs files is optional for sections and template. \nPlease remove this files (and import them into the template) after generation for make you codebase smaller.\n\n---\n\n### Folders descriptions:\n\n`./src/assets` - folder for assets. They might be images, fonts, any necessary files for shopify store. \nThe same as default Shopify assets folder.\nBy default, files from this folder will be copied to `dist` without modification.\nIn production mode images will be compressed.\n\n`./src/customers` - folders for customer templates. Optional.\n\n`./src/templates` - include all store pages with necessary styles and scripts.\nEach page should include its own sections. \nBy default, all templates use scripts and styles as webpack entry points.\n\n`./src/snippets` - are regular snippets with own styles. \nThe styles of each snippet can be included in section, template or theme. \nBy default, snippets styles or scripts are unwatched.\n\n`./src/scripts` - the main folder functionality. \nAll js files in this folder will be processed with wabpack and placed in `./dist/assets`. \nCan't be empty.\n\n`./theme` - folder for all shopify files, used in base mode. \nAll files from this folder will be copied to dist without changes. \nIt is recommended to use the `npm run gen` command to add new components.\n\n---\n\n# Contributing\n\nFor help on setting up the repo locally, building, testing, and contributing please see [CONTRIBUTING.md](https://github.com/spiral/shopify-starter-kit/blob/master/CONTRIBUTING.md).\n\n# Code of Conduct\n\nAll developers who wish to contribute through code or issues, take a look at the [CODE_OF_CONDUCT.md](https://github.com/spiral/shopify-starter-kit/blob/master/CODE_OF_CONDUCT.md).\n\n# License\n\nCopyright (c) 2021 SpiralScout. See [LICENSE](https://github.com/spiral/shopify-starter-kit/blob/master/LICENSE) for further details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspiral%2Fshopify-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspiral%2Fshopify-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspiral%2Fshopify-starter-kit/lists"}