Hierarchy suggestion

[jeremschelb]

Prerequisite

• NPM Packages:
  • tailwindcss
  • @studiometa/tailwind-config
  • @studiometa/js-toolkit
  • @studiometa/ui
  • @studiometa/webpack-config
• Base theme : Dawn
• Shopify CLI

Suggested file hierarchy

./
├── src/
│   ├── css/
│   │   ├── atoms/
│   │   ├── components/
│   │   │   ├── article-card.scss
│   │   │   ├── card.scss
│   │   │   ├── cart-drawer.scss
│   │   │   ├── cart-items.scss
│   │   │   ├── cart-notification.scss
│   │   │   ├── cart.scss
│   │   │   ├── facets.scss
│   │   │   ├── list-menu.scss
│   │   │   ├── mega-menu.scss
│   │   │   ├── menu-drawer.scss
│   │   │   ├── pagination.scss
│   │   │   ├── price.scss
│   │   │   ├── product-model.scss
│   │   │   └── totals.scss
│   │   ├── molecules/
│   │   ├── organisms/
│   │   ├── sections/
│   │   │   ├── blog-post.scss
│   │   │   ├── collection-list.scss
│   │   │   ├── contact-form.scss
│   │   │   ├── footer.scss
│   │   │   ├── main-blog.scss
│   │   │   └── password.scss
│   │   ├── app.scss
│   │   └── base.scss
│   └── js/
│       ├── atoms/
│       ├── molecules/
│       ├── organisms/
│       ├── app.js
│       ├── cart-drawer.js
│       ├── cart-notification.js
│       ├── cart.js
│       ├── customer.js
│       ├── facets.js
│       ├── global.js
│       ├── password-modal.js
│       ├── product-form.js
│       ├── quick-add.js
│       └── theme-editor.js
├── web/
│   ├── assets/
│   ├── config/
│   │   ├── settings_data.json
│   │   └── settings_schema.json
│   ├── layout/
│   │   ├── password.liquid
│   │   └── theme.liquid
│   ├── locales/
│   │   ├── en.default.json
│   │   ├── en.default.schema.json
│   │   ├── fr.json
│   │   └── fr.schema.json
│   ├── sections/
│   │   ├── cart-drawer.liquid
│   │   ├── cart-notification-button.liquid
│   │   ├── cart-notification-product.liquid
│   │   ├── footer.liquid
│   │   ├── header.liquid
│   │   ├── main-404
│   │   ├── main-account.liquid
│   │   ├── main-active-account.liquid
│   │   ├── main-addresses.liquid
│   │   ├── main-article.liquid
│   │   ├── main-blog.liquid
│   │   ├── main-cart-footer.liquid
│   │   ├── main-collection-banner.liquid
│   │   ├── main-collection-product-grid.liquid
│   │   ├── main-list-collections.liquid
│   │   ├── main-login.liquid
│   │   ├── main-order.liquid
│   │   ├── main-page.liquid
│   │   ├── main-password-footer.liquid
│   │   ├── main-password-header.liquid
│   │   ├── main-product.liquid
│   │   ├── main-register.liquid
│   │   ├── main-reset-password.liquid
│   │   └── main-search.liquid
│   ├── snippets/
│   │   ├── article-card.liquid
│   │   ├── card-collection.liquid
│   │   ├── card-product.liquid
│   │   ├── cart-drawer.liquid
│   │   ├── cart-notification
│   │   ├── facets.liquid
│   │   ├── icon-account.liquid
│   │   ├── icon-cart-empty.liquid
│   │   ├── icon-cart.liquid
│   │   ├── icon-close-small.liquid
│   │   ├── icon-close.liquid
│   │   ├── meta-tags.liquid
│   │   ├── pagination.liquid
│   │   └── price.liquid
│   ├── templates/
│   │   ├── customers/
│   │   │   ├── account.json
│   │   │   ├── activate_account.json
│   │   │   ├── login.json
│   │   │   ├── order.json
│   │   │   ├── register.json
│   │   │   └── reset_password.json
│   │   ├── 404.json
│   │   ├── article.json
│   │   ├── blog.json
│   │   ├── cart.json
│   │   ├── collection.json
│   │   ├── gift_card.liquid
│   │   ├── index.json
│   │   ├── list-collections.json
│   │   ├── page.contact.json
│   │   ├── page.json
│   │   ├── password.json
│   │   ├── product.json
│   │   └── search.json
│   ├── .theme-check.yml
│   ├── LICENCE.md
│   ├── README.md
│   └── translation.yml
├── .env.example
├── .eslintrc.js
├── .gitignore
├── .gitlab-ci.yml
├── .nvmrc
├── .prettierrc.js
├── .shopifyignore
├── .stylelintrc.js
├── .stylelintignore
├── CHANGELOG.md
├── README.md
├── meta.config.mjs
├── package.json
└── tailwind.config.js

Some ideas

• Reduce the number of locale files by defining the required languages and the default language during installation.
• Add the files related to the blog (assets, template and liquid) only if they are necessary.
• Install Shopify CLI as an NPM package?

[titouanmathis]

Thanks for the proposal @jeremschelb, this looks great!

On the folder structure:

• We should have atomic design folders in src/css and src/js along with the sections and snippets which are specific to Shopify
• The web/.gitignore and web/release-note.md files can be deleted (the content of web/.gitignore can be backported to .gitignore)
• The StyleLint configuration files should have a leading . in their name: .stylelintrc and .stylelintignore

To answer your ideas:

• Reduce the number of locale files by defining the required languages and the default language during installation.

I think that EN and FR locales are a nice start. Having them both can help add more by following their example.

• Add the files related to the blog (assets, template and liquid) only if they are necessary.

I think we can start this project with these files and see our usage before taking strong decisions like this.

• Install Shopify CLI as an NPM package?

This is a good idea! But if I am not mistaken, Shopify CLI is not available as an NPM package, it must be installed globally via Homebrew. Could you check the doc to confirm this?

Could you open a PR implementing your suggested structure?

[jeremschelb]

This is a good idea! But if I am not mistaken, Shopify CLI is not available as an NPM package, it must be installed globally via Homebrew. Could you check the doc to confirm this?

I think it can be installed as a dependency : https://www.npmjs.com/package/@shopify/cli

[titouanmathis]

I think it can be installed as a dependency : https://www.npmjs.com/package/@shopify/cli

I am not sure this version is fully working with themes, the list of available commands is missing the one to pull/push themes.

The official Shopify doc seems to still be referencing the CLI v2, which needs to be installed with Homebrew: https://shopify.dev/themes/getting-started/create#step-1-install-shopify-cli.

You can look for more information on the v3 available via NPM and how it could work with themes.