Sotono.dev


何をするのか

環境

前提

WSL の準備

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 です。

ShopifyAPI を設定する

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

開発用アプリを作成

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

Admin API を設定する

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

Storefront API を設定する

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

Admin API トークンを取得

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

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

VScode と Shopify をつなげる

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

VScode にエクステンションを追加

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

プロジェクトを作成

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

mkdir shopify_project

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

テーマ ID の取得

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

参考

【Shopify】コラボレーターの権限付与(招待)の方法を解説します

shopifyのテンプレートをVSCodeで編集する - Qiita