WSL に Ubuntu は入れてあると思うので、準備します。
まずなにはともあれ、apt
をキメておきます。
sudo apt update
sudo apt upgrade
Shopify にドキュメントがあるので、それに沿って Linux 版をインストールします。
Getting started with Theme Kit
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 が必要となります。 そのためには以下の情報が必要となるので、これを取得しておきます。
~~.myshopify.com
の形式これらを取得したら、下記コマンドを叩いてテーマ 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