ローカルでテーマを開発するためのShopify Theme Kit導入方法

Shopifyのテーマを開発・カスタマイズする方法として、

• テーマエディタ
• コード編集

の2つの方法があります。

これはどちらもオンラインの状態でShopifyの管理画面で作業する必要があります。

しかし、Shopifyは、ローカル環境でShopifyのテーマを開発・カスタマイズできるツールである「Shopify Theme Kit」を提供しています。

公式Shopify Theme Kitページ

https://shopify.github.io/themekit/

Shopify Theme Kitとは？

特徴的なTheme Kitの機能は次のとおりです。

• 複数の環境にテーマをアップロード
• 高速アップロードとダウンロード
• ローカルでの変更を自動でShopifyにアップロード
• Windows、Linux、macOSで使用可能

つまり、いつも使い慣れたエディタで、ローカル環境で作業することができるのです。

Shopify Theme Kitの開発環境構築の流れ

1. Shopify Theme Kitをインストール
2. 認証APIの設定
3. Shopifyストアとローカルを接続し、アップデートをプッシュする

Shopify Theme Kitのインストール（Windows）

インストールの方法は2種類あります。

• Chocolateyインストール
• マニュアルインストール

Chocolateyの場合、Chocolateyをダウンロード、インストールし、

のコマンドを実行します。

マニュアルインストールの場合、公式Shopify Theme Kitページ

https://shopify.github.io/themekit/

にあるURLからダウンロードします。

そして、Program Files配下に「Theme Kit」というフォルダを作成し、ダウンロードしたtheme.exeを移動します。

システムのプロパティからシステム環境変数の設定で、作成した「Theme Kit」フォルダのパスを追加し、"theme"のパスを通します。

インストールができたら、正常にインストール出来ているのか確認してみましょう。

のコマンドを実行すると、Shopify Theme Kitのコマンド一覧が表示されます。

認証APIの設定

Shopify Theme Kitがインストールできたら、Shopifyストアとローカルテーマを連携させるためのAPIキーの設定を行います。

ストア管理画面の「アプリ管理」を開き、「プライベートアプリを管理」をクリックします。

「アプリの詳細」で、アプリ名とメールアドレスを記入します。

Admin API権限の「Theme templates and theme assets」を「Read and write」に設定し、保存します。

新規作成するとAdmin APIの項目にAPIキーとパスワードが表示されます。

パスワードをコピーしてどこかに保存しておきましょう。

Shopifyストアとローカルを接続

まずは、テーマIDの確認します。

テーマIDの確認方法は2つあります。

• Shopify管理画面での確認
• コマンドでの確認

管理画面での確認方法は、「アクション」→「コードを編集する」をクリックし、テーマのカスタマイズ画面を開くと、カスタマイズ画面のサイトURLにテーマIDが割り振られていることを確認することができます。

「mystore.myshopify.com/admin/themes/」の後に続く数字がテーマIDです。

APIパスワードとストアURLが分かれば、コマンドで確認することができます。

のコマンドを実行すると、利用可能なテーマとテーマIDが表示されます。

テーマIDが確認できたら、次にローカル環境に編集作業用のディレクトリを作成します。

最後に、config.ymlというShopifyストアとローカル環境を連携するための設定ファイルを作成します。

以上で初期設定は完了です。

Theme Kitでよく使うコマンド

Deployコマンド

すべてのファイルをShopifyサーバーにアップロードするコマンドです。

Downloadコマンド

Shopifyのテーマファイルをローカル環境にダウンロードします。

Openコマンド

ShopifyテーマのURLをブラウザで開きます。

Watchコマンド

ローカルで開発中のファイルを監視します。

ローカル環境での変更内容がリアルタイムにShopifyサーバーに反映されます。