Shopify

【Shopify講座4】テーマの監視とファイルの編集

SUGAWAYABlogShopifyカテゴリ画像

この記事では、Shopify Theme Kitを使ってコードの編集を行うと共に、常にテーマの監視を行わせ、変更があったらその分を簡単に反映させたり、エラーを発見させたりします。

事前準備としてテーマのダウンロードがあります。

テーマをダウンロードするフォルダを作成する

新しいフォルダをPCの任意の場所に作成します。
今回は分かりやすいようにデスクトップに作成します。

エクスプローラーからデスクトップを選択して下さい。

Shopifyファイル新規作成

テーマのダウンロード

先ほど作成したフォルダの中に、テーマをダウンロードしていきます。
powershellを管理者権限ではなく、普通に開きます。

powershellを普通に開く

先ほど作成したフォルダにコマンドを使って入ります。
個々人でディレクトリが違ってきますので下記は適宜変更してください。

cd OneDrive/デスクトップ/Shopify_file

続いて、以下のコマンドを実行して、先ほど作ったフォルダ内にテーマファイル群をダウンロードします。

theme get --password=[your-api-password] --store=[your-store.myshopify.com] --themeid=[your-theme-id]

[]内の見つけ方

API-password
shopify管理画面のAdmin API情報に記載されたパスワードを使ってください。

ADMIN_API詳細画面


store.myshopify.com
ご自分の開発するストアを開いた際のURLのドメインを使ってください。

your-store.myshopify.comの見つけ方

theme id
以下のコマンドを実行して取得します。

theme get --list -p=[API-password] -s=[store.myshopify.com]

[]内は上で取得した、API-passwordstore.myshopify.comを使用してください。
以下のようにテーマのリストが出力されますので、その中から今回編集したいテーマのID部分を取得してください。DebutだったらIDは111111111になります。liveがついているIDを選びましょう。

Available theme versions:
  [111111111][live] Debut
  [222222222] OtherTheme

集めた情報をもとにテーマをダウンロードする

ここで、やっと下記のコマンドが使えます。先ほど取得した
API-passwordstore.myshopify.comtheme idを下のコマンドにあてはめて実行してください。

theme get --password=[your-api-password] --store=[your-store.myshopify.com] --themeid=[your-theme-id]

もしかすると、以下のような警告がでて実行できない場合があるかもしれません。

An update for Themekit is available. To update please run `theme update`

その際は、以下のコマンドを実行してください。

theme update

ダウンロードコマンドを実行したら

ダウンロードコマンドを実行したら、以下のような表示でダウンロードが進行していきます。

テーマダウンロード進行

ダウンロード後のフォルダ内には以下のようなファイル群がダウンロードされていると思います。

フォルダ内にテーマファイルがダウンロードできた様子

テーマの監視

テーマの監視は簡単なコマンドで可能になります。
以下のコマンドを実行してください。
これでテーマの監視ができます。

theme watch --env=development --allow-live

コードの編集

先ほどダウンロードしたファイル群をエディタで開いてください。
エディタで開けたらいよいよファイルを編集できます。

VScodeでShopifyファイル群を開く

ファイルの編集

ショップのホーム画面から、「テーマをカスタマイズする」を選択してください。

テーマを編集する

「カスタマイズ」をクリックして下さい。

カスタマイズするをクリック

「カスタマイズ」ぼたんをクリックすると、以下のような編集画面が現れます。

編集画面

タイトルの色を変えてみる

今回は、赤枠部分のタイトルの色を白から黒に変更してみます。
左側のカスタマイズ機能でも変更はできますが、あえて今回はコードを変更して変えてみて
Shopify Theme Kit で変更できるおことを確認します。

タイトル色変更前

タイトルを表示しているコードがどうなっているかをgoogleのデベロッパーツールで確認します。

ページのどこでもいいですので、右クリックをすると「検証」というメニューが出ますので、それをクリックします。

デベロッパーツールを出す

すると以下のような画面になると思います。

デベロッパーツール出現