ネットショップの作り方

ローカルでテーマを開発するための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をダウンロード、インストールし、

choco install themekit

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

 

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

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

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

 

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

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

 

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

theme help

のコマンドを実行すると、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が分かれば、コマンドで確認することができます。

theme get --list -p=[your-api-password] -s=[you-store.myshopify.com]

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

 

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

mkdir [your-theme-name]

 

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

theme get --p=[your-api-password] --s=[your-store.myshopify.com] --t=[your-theme-id]

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

 

Theme Kitでよく使うコマンド

Deployコマンド

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

theme deploy

 

Downloadコマンド

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

theme download

 

Openコマンド

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

theme open

 

Watchコマンド

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

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

theme watch

-ネットショップの作り方

Copyright© Growth Shop , 2020 All Rights Reserved.