何をするのか

  • 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

参考