何をするのか
- Shopify の開発をしやすくしたいので
- VScode で開発したい
- それには色々入れなきゃいけないので
- 入れて開発ができるところまで進める
環境
- Windows 11
- Ubuntu
- Cursor(VScode で以下統一)
前提
- WSL で Ubuntu インストール済み
- Shopify アカウント用意済み
- ショップのコラボレーター申請済み
- VSCode インストール済み
- コラボレーター申請済み
WSL の準備
WSL に Ubuntu は入れてあると思うので、準備します。
まずなにはともあれ、apt
をキメておきます。
Shopify にドキュメントがあるので、それに沿って Linux 版をインストールします。
Getting started with Theme Kit
インストールしたら 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 でプロジェクトフォルダを作成します。
そうしたら、VScode でそのフォルダを開きます。
テーマ ID の取得
Shopify のテーマに接続するには、固有のテーマ ID が必要となります。
そのためには以下の情報が必要となるので、これを取得しておきます。
- Admin API トークン
- そのテーマがインストールされているストアの URL
~~.myshopify.com
の形式- http とかはいらない
これらを取得したら、下記コマンドを叩いてテーマ ID を取得します。
すると、下記のように出力されると思います。
この左側の数字がテーマ ID となります。
テーマをダウンロード
テーマ ID を取得したら、テーマをダウンロードします。
ダウンロードが終わると、テーマが色々追加されますが、
ここで注目すべきは、config.yml
です。
ここにはパスワードやテーマ ID などの情報が記載されているので、
.gitignore
にいれるなりして気をつけましょう。
テーマを適用する
テーマを編集したら、下記のコマンドで Shopify にアップロードされます。