Shopify

【簡単】ShopifyのテーマをVSCodeで編集する方法

Shopifyのテーマは管理画面でも編集できますが、使い慣れたVSCodeで作業できたほうがいいですよね。

Shopifyが提供しているTheme Kitというコマンドラインツールを使用することで、既存テーマのカスタマイズをVSCodeで行えるようになります。

今回はそのTheme Kitの導入方法を解説します。
(注:Macを使用している方向けです)

Homebrewをインストールする

Theme KitをインストールするにはHomebrewというツールを使用します。

まだHomebrewをインストールしてないよという方は下記の記事がとても参考になりますので、さっそくインストールしましょう。

Theme Kitをインストールする

Theme Kitをインストールするには、ターミナルで以下の2つのコマンドを順番に実行します。

brew tap shopify/shopify

brew install themekit

既存テーマの情報を取得する

ローカル環境で既存テーマをカスタマイズするには「APIパスワード」、「ストア名」、「テーマID」が必要になります。それぞれの取得方法は以下の通りです。

(今回はあくまで既存テーマをカスタマイズする場合なので、ストアをまだ作成してないかたは先に作成をお願いします。)

APIパスワード

管理画面の「アプリ管理」から「プライベートアプリを管理する」をクリックします。

管理画面の使い方の詳細

アプリを作成したことがなければ「新しいプライベートアプリを作成する」をクリックします。

プライベートアプリ名」と「緊急連絡用開発者メール」を何でもいいので入力します。

Admin API欄の「非アクティブなAdmin API権限を表示する」をクリックすると項目がずらっと表示されます。

管理画面のボタンの表示

「テーマ」のところがアクセスなしになっていると思うので、読み取りおよび書き込みに変更します。

管理画面の変更するべき箇所の表示

「保存する」をクリックします。

アプリが作成されてAdmin API欄にパスワードが入力されてますよね。コピーしてメモアプリ等に保存しておいてください。後ほど使います。

ストア名

管理画面URLが「〇〇.myshopify.com」になっていると思うので、これがそのままストア名になります。

テーマID

テーマIDも管理画面から確認できます。

「オンラインストア」→「テーマ」と選択し、「カスタマイズ」をクリックします。

カスタマイズボタンの場所

URLが「〇〇.myshopify.com/admin/themes/106703650974/editor」みたいになってると思います。themesとeditorの間の数字がテーマIDです。

テーマファイルをダウンロードする

必要情報が揃ったらファイルをダウンロードします。

あらかじめフォルダを作成しておいて、cdコマンドで移動しておくと楽ですよ。

準備ができたらターミナルに以下のコマンドを実行します。

theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

先ほど調べた必要情報をそれぞれ入力します。

  • [your-password] にAPIパスワード
  • [you-store.myshopify.com]にストア名
  • [your-theme-id]にテーマID

例:theme get -p=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 -s=sample.myshopify.com] -t=06703650921

コンフィグファイルがダウンロードできました。

続いてテーマ全体のダウンロードです。以下のコマンドを実行します。

theme download

編集を反映させる

ローカル環境で作業した内容をストアに反映させるには、ターミナルで以下のコマンドを実行します。

theme watch

以上で完了です。お疲れ様でした!