前提条件
- 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が生成されます。
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で停止できます。
VSCodeで見やすくする
shopifyのテーマを変更するときはliquidファイルを編集します。
liquidはコードがハイライトされないので拡張機能を入れると開発しやすいです。
この2つの拡張機能を入れるとこのようにハイライトされて開発しやすいです。
