【Shopify】ローカル開発環境の構築方法

shopifyでのローカル環境開発の備忘録です。
開発方法は「Shopify Slate」と「Shopify Theme Kit」の2種類ありますが、今回はShopify Theme Kitでの開発方法を記載します。

ローカル開発環境の構築方法

Theme Kitのインスール

Shopify Theme Kitはローカル環境を行うためのミドルウェアです。
まず、コマンドプロンプトで以下コマンドを実行しTheme Kitをインストールします。
※MacとWindowsでインスト方法が違います。

Macの場合

Windowsの場合

Private APPの作成

APIトークンを取得のため、shopify管理画面からPrivate APPを作成します。

アプリ管理　＞　ページ下部の「プライベートアプリを管理する」クリック　＞　新しいプライベートアプリを作成する

入力項目を変更後、保存
・プライベートアプリ名：適当な名前をつける（「テーマ_ローカル開発用」など）
・緊急連絡用開発者メール：適当なメールアドレス入力
・Admin APIの「▼ 無効になっているAdmin API権限を確認する」をクリック、
Theme templates and theme assetsを「Read and Write（読み取り及び書き込み）」に変更

Private APPが作成されますので、「パスワード」をメモしておきます。

テーマIDを取得

ローカル環境構築したいテーマのIDを調べます。

テーマ　＞　カスタマイズ

★数字の部分がテーマIDなのでメモしておきます。
https://〇〇.myshopify.com/admin/themes/★/editor

shopifyからローカルにテーマをダウンロード

shopifyのテーマをローカル環境にDLしていきます。

コマンドプロンプトを管理者権限で開く（管理者権限でないと、コマンド打ってもアクセス拒否になるので注意）

テーマをDLする作業ディレクトリをTheme Kit直下に作成し、そのディレクトリに移動します。

・Private APPのパスワード
・shopのURL
・テーマID
をそれぞれ下記コマンドに入力して実行します。

■補足
「Error: Invalid configuration: invalid theme_id,invalid store domain must end in ‘.myshopify.com’」
こんなエラーが出た場合、書き方間違っている可能性あり。下記項目見直してみてください。
・各オプション名のハイフンは必ず2つつけること「–」。1つだとエラー
・[]つけたまま実行してない？

すると、config.ymlというファイルが生成されます。

上記のように、先ほど実行した内容がかかれています。

これで、Shopifyプライベートアプリと紐づき、データのやり取りができるようになりました。

※config.ymlが生成されれば、コマンドプロンプトを閉じても大丈夫です。

以下のコマンドでテーマをダウンロードしましょう。

テーマを更新しアップロードする

あとは、下記のようなコマンドで開発をすすめていきます。

アップロード

プレビュー

リアルタイム反映

※Ctrl+Cで監視解除

他に使えるコマンドは、「theme –help」で確認できます。

エラー時の対処方法

上記のように簡単にローカル環境開発はできますが、最後にエラーが起こった際の対処方法をまとめておきます。

・「内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません」
⇒環境変数設定できてないので変更する

・「Invalid configuration: invalid theme_id,invalid store domain must end in ‘.myshopify.com’」
⇒theme configure･･･の箇所で[]とか入ってないか確認　※[]は不要

・config.yml生成の際に、「open C:\Program Files\Theme Kit\〇\config.yml: Access is denied.」で生成されない。
⇒コマンドプロンプトを普通に開いてないか確認。必ず管理者権限で開くこと

・「Unable to save file: Permission denied」
⇒ファイルの編集権限がない（読み取り専用になっている）

まとめ

テーマライブラリーのテーマでも問題なくローカル構築できるので、リニューアル案件でも対応可能です。