もんちゃんブログ 
今回はMacBookでShopifyのローカル環境構築をまとめていきます。
環境の説明と前提
環境の説明
MacBook16インチ(2019)モデルでいわゆるインテルマックです。
前提
・VSコードは普段使っているのである！
・Shopifyパートナーになっている
・構築したいShopを作っている
・ショップに構築したいテーマを入れている
参考サイト
Shopifyの構築を学習してWeb制作の単価を上げませんか？
広告
1 Theme kit をインストールする
ターミナルで以下のコマンドを実行
brew tap shopify/shopify
brew install themekit
ここまではよかったのですが、この次にショップの管理画面、アプリの管理画面から「プライベートアプリ」で…
と説明しているサイトが多く、私の現在のShopifyの管理画面に、「プライベートアプリ」と言うものが表示されず困りました。
すると以下の方法を発見！
2 Theme kitのパスワードを取得する
Theme kit access アプリをインストールする
ショップのアプリ管理から Theme kit accessを開き、名前とメールアドレスを入力する
登録したメールアドレスにメールが来て、リンクをクリックでパスワードが表示される
このパスワードを今後使用していくため大切に保管する！
3 既存のテーマファイルに接続する
theme get --list --password=[your-password] --store="[your-store.myshopify.com]"
ここのpasswordに先程のTheme kitのパスワードを入力していきます。
注意点！
[ ]は削除する。
storeは””を消さない。またhttp:// などは入れない。
すると
Available theme versions:
[126770000000][live] Dawn
このような形で番号が出てきます。
こちらの番号もメモしておきましょう
広告
4 構築していくファイルを作成する
次に構築していくファイルを作成します。
ターミナルでコマンドを使って作成することもできますが、私はあまりコマンドに慣れていないため、Finderで作りました。
Finderから任意の場所にフォルダを作成（今回はデスクトップにShopify-testと言うフォルダを作成）
再度ターミナルに戻り、cd と打った後に先ほど作ったフォルダをドラック&ドロップ
またはコマンドで入力
cd desktop/shopify-test
指定のフォルダに移動できたら、下記のコマンドを入力
theme get --password=[your-password] --store="[your-store.myshopify.com]" --themeid=[your-theme-id]
前半2つは3のはじめに入力したのと同じもの。
最後のtheneidが3の最後に出てきた番号になります。
そうすると指定したフォルダの中にテーマファイルのデータがインストールされます
theme watch --allow-live
を入力すると、VSコードなどでテーマ内を編集し保存をするたびにショップに反映されます！
theme watch
ではエラーが出てしましました…
こちらを参考にしています。
私的理解としては、何をwatchするのかフラグを立ててね
という意味だと思っています！
↑以上がMac Book（Intel mac）でShopifyのテーマカスタマイズをするための環境構築になります！！
何かツッコミどころがあればぜひ教えてください！
最後まで読んでいただきありがとうございました。
広告
