この記事では、Shopify Theme Kitを使ってコードの編集を行うと共に、常にテーマの監視を行わせ、変更があったらその分を簡単に反映させたり、エラーを発見させたりします。
事前準備としてテーマのダウンロードがあります。
テーマをダウンロードするフォルダを作成する
新しいフォルダをPCの任意の場所に作成します。
今回は分かりやすいようにデスクトップに作成します。
エクスプローラーからデスクトップを選択して下さい。
テーマのダウンロード
先ほど作成したフォルダの中に、テーマをダウンロードしていきます。
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情報に記載されたパスワードを使ってください。
store.myshopify.com
ご自分の開発するストアを開いた際のURLのドメインを使ってください。
theme id
以下のコマンドを実行して取得します。
theme get --list -p=[API-password] -s=[store.myshopify.com][]内は上で取得した、API-passwordとstore.myshopify.comを使用してください。
以下のようにテーマのリストが出力されますので、その中から今回編集したいテーマのID部分を取得してください。DebutだったらIDは111111111になります。liveがついているIDを選びましょう。
Available theme versions:
[111111111][live] Debut
[222222222] OtherTheme集めた情報をもとにテーマをダウンロードする
ここで、やっと下記のコマンドが使えます。先ほど取得した
API-password、store.myshopify.com、theme 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コードの編集
先ほどダウンロードしたファイル群をエディタで開いてください。
エディタで開けたらいよいよファイルを編集できます。
ファイルの編集
ショップのホーム画面から、「テーマをカスタマイズする」を選択してください。
「カスタマイズ」をクリックして下さい。
「カスタマイズ」ぼたんをクリックすると、以下のような編集画面が現れます。
タイトルの色を変えてみる
今回は、赤枠部分のタイトルの色を白から黒に変更してみます。
左側のカスタマイズ機能でも変更はできますが、あえて今回はコードを変更して変えてみて
Shopify Theme Kit で変更できるおことを確認します。
タイトルを表示しているコードがどうなっているかをgoogleのデベロッパーツールで確認します。
ページのどこでもいいですので、右クリックをすると「検証」というメニューが出ますので、それをクリックします。
すると以下のような画面になると思います。
