11tyとviteをつかったShopify開発環境。
この開発環境では、Shopifyのテーマをカスタマイズ、もしくはスクラッチで構築できます。
- 静的サイトのコーディング
- Shopifyテーマのカスタマイズ、構築
[root]
├ .env
├ .vscode
│
├ src
│ ├ js
│ │ └ lib
│ ├ liquid
│ ├ liquid
│ └ scss
│
├ _site
│
├ shopify
│ ├ assets
│ ├ config
│ ├ layout
│ ├ locales
│ ├ sections
│ ├ snipetts
│ └ templates
│
│
├ .eleventy.js
├ .browserlistrc
├ package-lock.json
├ package.json
└ vite.config.js
srcフォルダ内で開発します。
このリポジトリをクローンして、必要なパッケージをインストールしてください。
npm install
下記コマンドを入力してください。
npm run dev
Shopifyのテーマをカスタマイズする前に、ストアにログインする必要があります。
下記コマンドを入力
shopify login --store ストア名.myshopify.com
下記コマンドを入力して、新しいテーマを作成できます。
Dawnが Shopify フォルダにコピーされます。
npm run newtheme
ストアにログインし、下記コマンドを入力してください。
npm run shopify
ストアにプッシュするには、下記のコマンドを入力してください。
npm run deploy
コマンド実行後、どのテーマに上書きするか選択し、Enter キーを押下します。
お役立ちサイトを立ち上げるには下記コマンドを実行してください。
npm run opendoc
下記、３サイトが立ち上がります。