Shopify Theme Kit で Shopify のテーマ編集を行う

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は、以前にもご紹介したEコマース用のプラットフォームである Shopify のテーマ編集用ツールである Shopify Theme Kit について、概要をまとめてみたいと思います。

Shopify については以前の記事をご参照ください。

Shopify Theme Kit とは？

Shopify Theme Kit とは、 Shopify のテーマ（テンプレート）を編集するコマンドラインツールです。

これを導入することにより、Shopify テーマのローカルでの編集、プレビュー表示、Shopify サイトへのデプロイ（アップロード）を行うことが出来ます。

導入は Homebrew で行います。（macOSの場合）

$ brew tap shopify/shopify
$ brew install themekit

また、前もって Shopify 側でのAPIキー発行が必要です。

以前の記事で紹介した方法で、サイトの管理画面からプライベートアプリを作成してキーを発行します。

今回はテーマへのアクセス権が必要なので、テーマへの読み取りおよび書き込みを有効にします。

テーマを取得する

テーマの編集を始めるには、新しくローカルでテーマを作成するか、既存サイトのテーマを編集するかの2通りの方法があります。今回は既存サイトテーマの編集を行います。

APIキーの発行を終えた後、サイトの管理画面から オンラインストア > テーマ に移動します。

現時点ではデフォルトの Debut テーマが設定されていますが、これを一旦アクションメニューから複製します。

詳しくは後述しますが、 Theme Kit では development (開発用) と production (本番用) に環境を分けてテーマを編集することが出来るため、開発用のテーマを新しく用意します。

複製後、コマンドラインで以下を叩きます。

$ theme get -l -p=[APIパスワード] -s=[example.myshopify.com]

このコマンドで現在サイトに追加されているテーマIDの一覧を確認することができます。

その後、リストの中のIDをどれか1つ選んで以下のコマンドを叩きます。

$ theme get -p=[APIパスワード] -s=[example.myshopify.com] -t=[テーマID]

コマンドを実行するとローカルへのテーマのダウンロードが始まり、完了すると config.yml が生成されます。

config.yml で前述の development と production それぞれのテーマの設定を行います。

production:
  password: [APIパスワード]
  theme_id: [本番用のテーマ]
  store: example.myshopify.com
development:
  password: [APIパスワード]
  theme_id: "[開発用のテーマ（複製したテーマ）]"
  store: example.myshopify.com

これで development と production に分けてテーマを開発することが可能になります。

テーマを編集する

Shopify のデフォルトテーマである Debut テーマをローカルに取得したので、試しに中身の theme.css に追記をしてみます。

body {
  background-color: blue;
}

これをプレビューで確認するには、以下のコマンドを叩きます。

$ theme deploy
$ theme open

deploy コマンドを叩くと、development に設定したテーマに編集した内容がデプロイされ、 open プレビュー画面が開かれます。

プレビュー画面のURLは example.myshopify.com と、本番と同じURLになっていますが、実際には本番環境に反映はされていません。

右下の Share preview で、プレビューURLを発行して他の作業者に確認してもらうことも出来ます。

本番環境に上げるには、

$ theme deploy --env=production --allow-live

を叩きます。これで production に設定したテーマ にデプロイが行われ、本番のサイトに反映されます。

本番用テーマと開発用テーマに分けることで、ある程度安全に開発を行うことができます。

まとめ

今回はテーマの編集をプレビューするところまでをまとめました。今後の記事で、セクション単位での実装の仕方や、SCSSを使う方法など深堀りしていきたいと考えています。

Shopify テーマ編集の参考にしていただけるとありがたいです。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。