Shopifyテーマファイルをローカル環境で編集するための方法

こんにちは。

Shopifyについて勉強したことを備忘録としてまとめます。

今回はTheme kitを使ったローカル環境でのテーマファイル編集方法について説明します。

■前提条件

・Mac環境

■事前準備

Theme Kitをインストールするための事前準備です。
「Homebrew」と「Xcode」のインストールが必須です。

・Homebrewのインストール
・Xcodeのインストール

・HomeBrewのインストール

下記のサイトを参考にHomeBrewをインストールしてください。

Homebrewのインストール - Qiita

・Xcodeのインストール

（１）ターミナルで以下のコマンドを実行します。

xcode-select --install

（２）ポップアップ画面が表示されるので、「インストール」を選択します。

（３）使用許諾の確認画面で「同意する」を選択します。

（４）「完了」を選択します。

以上でXcodeのインストール完了です。

■ステップ1：Theme Kitをインストール

（１）ターミナルで以下のコマンドを実行します。
Homebrewにshopifyのリポジトリを追加します。

brew tap shopify/shopify

（２）ターミナルで以下のコマンドを実行します。
shopifyリポジトリからThemekitをインストールします。

brew install themekit

以上でTheme Kitのインストール完了です。

■ステップ2：shopifyストアとTheme Kitを接続するパスワードの取得

パスワードを取得する方法は、下記の２パターンあります。
⬜️プライベートアプリを作成するパターン
⬜️Shopify公式アプリ（ThemeKitAccess）を利用するパターン※推奨

各パターンの手順を説明しますね。

■プライベートアプリを作成するパターン

（１）管理画面の左メニューから「アプリ管理」をクリックし、アプリ管理画面でページ下部にある「プライベートアプリを管理する」を選択します。

（２）「プライベートアプリの開発を有効にする」を選択します。

（３）全てチェックをつけて「プライベートアプリの開発を有効にする」を選択します。

（４）「プライベートアプリを作成する」を選択します。

（５）「アプリの詳細」の項目で、アプリ名とメールアドレスを入力します。

（６）「Admin API」の項目で、テーマを「読み取りおよび書き込み」に変更します。

（７）ページ下部の「保存する」を選択します。

（８）「アプリを作成する」を選択します。

（９）「Admin API」項目 にアクセス資格情報が表示されます。
※パスワードはのちほど使用します。

■Shopify公式アプリ（ThemeKitAccess）を利用するパターン

（１）Theme Kit Accessをインストールします。

（２）「アプリをインストール」を選択します。

（３）ThemeKitAccessの管理画面から「ThemeKitのパスワードを作成する」を選択します。

（４）APIでアクセスする開発者の名前とメールアドレスを入力し、「パスワードを作成」を選択します。

（５）先ほど入力したメールアドレス宛にパスワード生成確認のメールが届きますので、メール内の「ThemeKitのパスワードを確認する」を選択します。※有効期限があるので早めに確認しましょう！

（６）Shopifyの画面に遷移します。そこで「パスワードを表示する」を選択します。

（７）表示されたパスワードを確認します。

以上がAPIのパスワード取得方法になります。

アプリを利用する方法が推奨されていますし、簡単なのでオススメです。

■ステップ３：shopifyストアとローカル環境を接続

（１）ターミナルにて、生成したAPIのアクセス資格情報をもとに、以下のコマンドを入力します。

theme get --list -p=[APIのパスワード] -s=[接続するshopifyのドメイン名]
（コマンド例）theme get --list -p=abcdefgh -s=xxxxxx.myshopify.com

↓コマンド結果
接続するshopifyサイトにあるテーマがリスト形式で表示されます。
※[]で囲まれている数字がテーマIDです。

（２）以下のコマンドで作業用フォルダ（ここではshopify）を作成して、その直下に移動します。

mkdir shopify
cd shopify

（３）以下のコマンドを入力してローカル環境とShopifyストアを接続します。

theme get -p=[APIのパスワード] -s=[接続するshopifyのドメイン名] -t=[テーマID]
（例）theme get -p=abcdefgh -s=xxxxxx.myshopify.com -t=123456789

接続されるとローカル環境にテーマファイル一式がダウンロードされます。

（４）作業用フォルダ（shopify）にテーマファイル一式がダウンロードされていることを確認します。

以上でshopifyストアとローカル環境の接続が完了です。

■ステップ４：ローカル環境でのファイル編集方法

（１）ターミナルで以下のコマンドを実行します。

theme watch --allow-live

現在使用中のテーマを触る場合は「—allow-live」オプションを追加します。

（２）編集したいファイルをローカル環境のエディタで編集します。
ファイルを編集すると自動でアップロード反映してくれます。

終了するときはcontrol+cを実行します。

今回はShopifyテーマファイルをローカル環境で編集するための方法についてまとめてみました。

▼WEB制作のもっと具体的なノウハウについては、下記のブログで発信しています。

TERUBLOG

以上です。