何をするのか
- Shopify の開発をしやすくしたいので
- VScode で開発したい
- それには色々入れなきゃいけないので
- 入れて開発ができるところまで進める
環境
- Windows 11
- Ubuntu
- Cursor(VScode で以下統一)
前提
- WSL で Ubuntu インストール済み
- Shopify アカウント用意済み
- ショップのコラボレーター申請済み
- VSCode インストール済み
- コラボレーター申請済み
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 アクセススコープの設定から、開発に必要な権限を設定していきます。
| 権限名 | 読み書きの権限 |
|---|---|
| スクリプトタグ | write, read |
| テーマ | write, read |
| ストアコンテンツ | read |
| 商品リスト | read |
| 商品管理 | read |
| 在庫 | read |
| ディスカウント | read |
Storefront API を設定する
同じく StorefrontAPI を設定します。
こちらは、全部オンでいいと思います。
Admin API トークンを取得
API 資格情報から Admin API トークンを取得します。
これ、一回だけしか表示できないらしく、リフレッシュの方法もわからないので
慎重にコピーしてどこかに保管しておいてください。
VScode と Shopify をつなげる
というわけで、一旦 Shopify の設定は終了しました。
ここからはエディタ側でやっていきます。
VScode にエクステンションを追加
シンタックスハイライトなどを有効にするため、Shopify Liquid をインストールします
プロジェクトを作成
Linux でプロジェクトフォルダを作成します。
mkdir shopify_project
そうしたら、VScode でそのフォルダを開きます。
テーマ ID の取得
Shopify のテーマに接続するには、固有のテーマ ID が必要となります。
そのためには以下の情報が必要となるので、これを取得しておきます。
- Admin API トークン
- そのテーマがインストールされているストアの URL
~~.myshopify.comの形式- http とかはいらない
これらを取得したら、下記コマンドを叩いてテーマ 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