shopifyでコードを使ってページを編集するには、ローカル環境で編集するのがおすすめです。
まずは、ローカル環境を整えるやり方をまとめてみます！
必要なもの
1. Google Chrome
当たり前ですが、画面を見るのに必要なWEBブラウザー。
なぜChromeなのかというと、shopifyが推奨しているからだそうです。
2. shopifyパートナーアカウント
通常のストア作成では、14日間の無料トライアルが終了後、続けて利用するのに月額利用料が発生します。
しかし、shopifyでストアを構築するデザイナーやエンジニアは、Shopifyパートナーアカウントを作成すると、専用のパートナー管理画面からストアを無料で、無制限でストアを構築したり、様々な機能を試したりすることができます。
なお、構築したストアを公開する場合には、公開するタイミングで月額料金を支払う必要があります。
shopifyパートナーのアカウントは以下のページから作成できます
shopify partners
開発ストアを作成
- Node.js（ノード・ジェイエス）
- Node js のパーケージマネージャー
- Git
Shopify CLIをインストール
Shopify CLIを使ってみる
VScodeの「ターミナル」ウィンドウ
開発環境にログイン
shopify theme info
開発環境からログアウト
shopify auth logout
開発環境（ターミナル）を閉じる
Ctrl + C
開発環境での編集を、オンラインストアに反映
shopify theme dev
ローカルファイルの変更をストアのプレビューに反映（ローカル → ストアの一方向の同期。）
テーマエディタファイルを自動同期し、ライブプレビューする
shopify theme dev –theme-editor-sync
双方向の同期（ローカル ⇄ テーマエディター） テーマエディターでのカスタマイズ内容がローカルファイルに保存される
--theme-editor-sync オプションを付けて使用する方が便利ですが、テーマエディターを使用しない場合は基本コマンドで十分。
ローカル開発環境にダウンロード
Shopify theme pull
ローカル開発環境からアップロード
shopify theme push
