Shopify Theme Kitをダウンロードしてコードエディタでテーマ編集する

Shopifyテーマとは

Shopifyをご存知の方はもちろん、最近ノーコードが注目される中でプログラミングなしでECサイトが作れちゃうということで人気になっているShopify
Shopifyのアプリケーション開発を担当する中でテーマの方をお手伝いしたこともあり、ブラウザ上でコードを見るのが非常に辛かったので、自分のコードエディタで作業するために必要なことをまとめます。

はじめに

Shopifyはテーマ開発においてLiquidという独自の言語を使用しています。今回のテーマ開発に関しては、このLiquidを使用して作られた既存のテーマたちとそのテーマにカスタムCSSを加える際に活用できる環境整備についてお話します。
まずはじめに、こちらよりShopify Theme Kitをダウンロードしてください。

ローカル環境の整備

Shopify Theme Kitでは、新たなテーマをCLIで1から開発する際、下記のようなコマンド

theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

が必要となっていますが、実際にテーマを購入したり、選んだりしてストアに入れてみてから、管理画面上でセクション等をカスタマイズしてみて初めて構築・CSS編集となることが多いかと思います。
なので、ここでは既存のストアにテーマを入れてある状態で、ローカルにそのテーマを落としてくるところから解説します。

• ローカルにテーマ構築のディレクトリを作成

mkdir "project_name"
cd "project_name"

• config.ymlを作成

touch config.yml

• config.ymlにAPIシークレットを記載

development:
  password: "Password from Admin API"
  theme_id: "Theme_id from URL"
  store: "https://<store_name>.myshopify.com"

編集するテーマのAPIアクセスを取得

Shopifyストアの管理画面にいき、Appsをクリックします

プライベートアプリを作成する箇所から、アプリを作成します

Admin APIの箇所で全てのAPI許可を表示し、テーマの読み取り・書き込みを許可します

API作成で表示されるPasswordがconfig.ymlに記載する"Password from Admin API"になります

テーマIDとストアのURLを取得

ストアの管理画面からテーマのカスタマイズ画面に進みます

カスタマイズ画面で表示されるURLが該当箇所になります

ローカルで現行のテーマを編集する

config.ymlに必要な箇所を記載したあと、下記のコマンドでローカルに現行のテーマをダウンロードできます

theme download

実際に作業する際、ローカルで編集したものをリアルタイムで現行のテーマに反映させるには

theme watch

を実行してからコード編集をしてください。

注意点

上記のtheme watchを実行することで、ローカルで編集したコードは直接テーマに反映されますが、
テーマをストア管理画面上で編集した場合、theme downloadを実行しない限り、ローカルには反映されません。
管理画面上で現行のテーマを編集した場合には、ローカルのテキストエディタで編集する前にtheme downloadを実行されることをお勧めします。

また、現行のテーマをそのままローカルで編集するのに抵抗がある場合には、編集前のテーマを複製しておくのが良いかもしれません。