VScodeでLinuxでShopify Theme Kitをいじる

2024-06-03

何をするのか

  • 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

参考