VScodeでLinuxでShopify Theme Kitをいじる | Sotono.dev

Sotono.dev

VScodeでLinuxでShopify Theme Kitをいじる

WSL に Ubuntu は入れてあると思うので、準備します。まずなにはともあれ、apt をキメておきます。

sudo apt update
sudo apt upgrade

Shopify にドキュメントがあるので、それに沿って Linux 版をインストールします。

curl -s <https://shopify.dev/themekit.py> | sudo python3

インストールしたら theme とだけタイプして動作確認をします。動作確認できたら OK です。

Shopify と接続するには API を利用しますが、これには Shopify 側でアプリを立ち上げる必要があります。といっても、なにかインストールするわけではなく、API を使えるようにするだけです。

2024-06 現在、権限があるアカウントを使って下記の方法でアプリを新規作成します。権限があればコラボレーターでも OK です。

AdminAPI アクセススコープの設定から、開発に必要な権限を設定していきます。

同じく StorefrontAPI を設定します。こちらは、全部オンでいいと思います。

API 資格情報から Admin API トークンを取得します。

これ、一回だけしか表示できないらしく、リフレッシュの方法もわからないので慎重にコピーしてどこかに保管しておいてください。

というわけで、一旦 Shopify の設定は終了しました。ここからはエディタ側でやっていきます。

シンタックスハイライトなどを有効にするため、Shopify Liquid をインストールします

Linux でプロジェクトフォルダを作成します。

mkdir shopify_project

そうしたら、VScode でそのフォルダを開きます。

Shopify のテーマに接続するには、固有のテーマ ID が必要となります。そのためには以下の情報が必要となるので、これを取得しておきます。

これらを取得したら、下記コマンドを叩いてテーマ ID を取得します。

theme get --list -p=ADMIN_API_TOKEN -s=STORE_URL

すると、下記のように出力されると思います。

Available theme versions:
  [000000000000][live] テーマの名前
  [000000000000] テーマの名前
  [000000000000] テーマの名前
  [000000000000] テーマの名前

この左側の数字がテーマ ID となります。

テーマ ID を取得したら、テーマをダウンロードします。

theme get -p=ADMIN_API_TOKEN -s=STORE_URL -t=THEME_ID

ダウンロードが終わると、テーマが色々追加されますが、ここで注目すべきは、config.yml です。

ここにはパスワードやテーマ ID などの情報が記載されているので、 .gitignore にいれるなりして気をつけましょう。

テーマを編集したら、下記のコマンドで Shopify にアップロードされます。

theme watch