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

前提条件

shopifyのアカウントを取得済み
商品登録済み
Getting started with Theme Kitを参考にして導入

やりたいこと

shopifyのテンプレートをローカルのVSCodeでいじりたい
ローカルのテンプレートを編集したら自動的にアップロードしたい
macOSで編集したい

shopifyのテーマキットをインストール

Homebrewを使ってテーマキットをインストールします。

$ brew tap shopify/shopify
$ brew install themekit

Homebrewでエラーが出たときはこちらを参照してください。
Homebrewでエラー homebrew-core is a shallow clone.

以下のコマンドでテーマキットの動作確認ができます。
新しいバージョンがある場合はテーマキットをアップデートします。

$ theme version
An update for Themekit is available. To update please run `theme update`
ThemeKit 1.1.5 darwin/amd64
$ theme update
$ theme version
ThemeKit 1.1.6 darwin/amd64

shopifyからAPIを取得

左メニューの[アプリ管理]をクリック後、最下部にある[プライベートアプリを管理する]をクリック

初めてプライベートアプリを作る場合は以下の画面が出てくるので、[プライベートアプリの開発を有効にする]をクリック

各項目に目を通し、全てにチェックを入れて[プライベートアプリの開発を有効にする]をクリック

[プライベートアプリ作成する]をクリック

[プライベートアプリ名]と[緊急連絡用開発者メール]を入力してください。

[非アクティブなAdmin API権限を表示する]をクリックして必要な権限をAPIに付与しまします。

ストアコンテンツ　読み取りアクセス
スクリプトタグ読み取りおよび書き込み
テーマ読み取りおよび書き込み
商品リスト　読み取りアクセス
商品管理　読み取りアクセス
在庫　読み取りアクセス
ディスカウント　　読み取りアクセス

ここの項目は後から変更することができます。

[このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする]にチェックを入れる

下の画像の様にアコーディオンが開くので全てにチェックが入っていることを確認して[保存する]をクリック

[アプリを作成する]をクリック

これでAPIが作成されます。
今回使うのはAdmin APIのパスワードのみです。

テーマをダウンロード

shopifyにあるテーマに接続するにはテーマIDが必要です。
テーマIDは以下のコマンドで取得できます。

$ theme get --list -p=[your-password] -s=[your-store.myshopify.com]
Available theme versions:
  [テーマID] Debut
  [テーマID][live] Simple
  [テーマID] Supply
  [テーマID] Boundless
  [テーマID] Boundlessのコピー
  [テーマID] Warehouse

[your-password]は先程取得したAPIのパスワード
[your-store.myshopify.com]はshopifyにログイン時のドメイン

次にテーマを指定してダウンロードします。
ローカルにテーマ用のディレクトリを作成してその中でshopifyのテーマをダウンロードしてください。

$ mkdir project_theme
$ cd project_theme
$ theme get -p=[your-password] -s=[your-store.myshopify.com] -t=[your-theme-id]

[your-password]は先程取得したAPIのパスワード
[your-store.myshopify.com]はshopifyにログイン時のドメイン
[your-theme-id]は先程取得したテーマID

theme getコマンドを実行するとカレントディレクトリにconfig.ymlが生成されます。

config.yml

development:
  password: [your-api-password]
  theme_id: "[your-theme-id]"
  store: [your-store].myshopify.com

変更したテーマをアップロード

テーマを変更したらテーマディレクトリで以下のコマンドを実行することでshopifyにアップロードすることができます。

$ theme watch

テーマキットはテーマの編集を検知して、自動的にshopifyにアップロードします。

$ theme watch
18:09:13 [development] ショップ名: Watching for file changes to theme テーマID
18:09:24 [development] processing assets/theme.css
18:09:26 [development] Updated assets/theme.css

止めるときはctrl + cで停止できます。

Theme Kit command reference

VSCodeで見やすくする

shopifyのテーマを変更するときはliquidファイルを編集します。

liquidはコードがハイライトされないので拡張機能を入れると開発しやすいです。

この2つの拡張機能を入れるとこのようにハイライトされて開発しやすいです。