見出し画像

Shopifyテーマ Chapter2 テーマ開発・編集のツール

Yuya M

 Shopifyでは管理画面からテーマのカスタマイズやLiquidコード直接編集することができます。(オンラインストアエディタとオンラインコードエディタ)

ただし、より複雑なカスタマイズを行う・Shopiyテーマをイチから開発するにはローカル環境で高機能なテキストエディタやIDEを使用したほうが便利です。

Shopifyではローカル環境でのShopifyテーマの開発やLiquidコードのカスタマイズが行いやすいように2つのツールを用意してくれています。

Theme kit

Shopify Theme kit はShopifyテーマ開発用のコマンドラインツールです。ローカル環境とShopifyストアにあるテーマファイルの橋渡しをしてくれます。Shopifyストアからテーマをローカル環境へダウンロードしたり、ローカル環境で編集したLiquidファイルをアップロードしたりを行えます。

Shopify CLI

Shopify CLI は2021年のShopify Uniteイベントで発表された新しいコマンドラインツールです。テーマの開発だけでなく、Shopifyアプリの構築などにも使えるツールとなっています。Theme kit からShopify CLIへの移行が推奨されていますが、すこしだけ編集したい場合などはまだまだTheme kitのほうが手軽で便利な側面も。。Shopify CLIについては後述予定。

Theme kit の機能とインストール

Theme kit は下記の機能が備わっています。

  • 複数環境へのテーマのアップロード

  • 速いアップロードとダウンロード機能

  • ローカル環境での変更を即座にShopifyストアのテーマへ反映するWatch機能

  • Windows, macOS, Linaxで動くクロスプラットフォーム開発

Macでのインストール

ターミナルで下記のコード

curl -s https://raw.githubusercontent.com/Shopify/ themekit/master/scripts/install | sudo python

詳しいTheme Kitのインストール方法はこちら

ローカル環境とShopifyストアへの接続

Shopifyストア上のテーマとTheme kit を使ったローカル環境の接続には下記のものが必要です。

  • API key

  • password

  • theme ID

API keyとパスワード

Theme Kit Access

｢Theme Kit Access｣というTheme kit アクセスのためのアプリがShopifyによって用意されているので、それを使いAPI keyを発行します。

Theme ID

Shopifyストアにはテーマライブラリによって複数のテーマファイルを所持することができるため、どのテーマと接続するかを指定する必要があります。テーマにはそれぞれIDが割り振られていて、どのテーマにアクセスするかはIDを指定します。

Shopityストアでは公開しているテーマだけでなく、テスト用や今後使用する用のなど他のテーマをテーマライブラリ上で保管しできます。また簡単にテーマを複製しておくことができるので、編集する前に予め複製しておくなどバックアップをとっておくと安心です。

テーマのID番号をチェックするには、対象のテーマの｢アクション > コードを編集｣をクリックするとURLの末尾がそのテーマのIDに変わります。例えば下記の用なURLです。

https://store-name.myshopify.com/admin/themes/124895658133

この場合そのテーマのIDは｢124895658133｣です。

テーマのダウンロード

ストアのURL・ThemeID・API keyの3つがわかればローカル環境からTheme Kitを通じてShopifyストア上のテーマにアクセスでき、ダウンロードやアップロードができるようになります。
カスタマイズしたいテーマをダウンロードするには、Theme Kit のコマンド｢theme get｣を使います。下記の例はそのコマンドです。

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

config.ymlファイル

Theme Kit のコマンドを使ってダウンロードすると自動的に｢config.yml｣というファイルが作られます。そこにShopifyストアのURL・API Key・ themeIDが自動的に保管され、移行は毎回長いパスワードやIDを入力することなく、ストアのテーマにアクセスできるようになります。

他にもignore_filesというコードをymlファイルに記述しておくことにより、アップロードしないファイルを指定することもできます。下記はymlファイルの中身の例です。

development:
  password: shptka_16465886faaa20760480d5504480add7
  theme_id: "124610805933"
  store: store-name.myshopify.com
  ignore_files:
    - config/setting_data.json
    - node_modules/

上記のファイルによりstore-name.myshopify.comというURLのストア上にあるテーマIDが｢124610805933｣のテーマにAPI key｢shptka_16465886faaa20760480d5504480add7｣を使ってアクセスすることができます。
またignore_filesの指定によりconfig/setting_data.jsonとnode_modulesのフォルダ内の中にあるものはアップロードされません。

Push updates テーマの変更更新

ローカル環境で構築・またはカスタマイズしたファイルはtheme watchのコマンドで保存するたびに自動的にアップロードされテーマを更新できます。自動更新を終了するにはターミナル上でctrl + Cと入力します。

*Shopifyストアで現在使用しているテーマ(公開中のテーマ)は、予想しないトラブルを防ぐためにもwatch更新がそのままではできないようになっています。カスタマイズは非公開中のテーマを使って行うのが好ましいですが、公開中のテーマを直接カスタマイズしたい場合は、下記のようなフラッグを追加します。

theme watch --allow-live

Theme Kitの他の便利なコマンドはこちら。

またtheme helpのコマンドでもターミナル上で簡単なヘルプをみることができます。

特定のコマンドのへぷるを見たい場合はtheme[コマンド名] --helpでも見ることができます。

Chapter2 のまとめ

チャプター2ではTheme Kitについて解説しました。

  • Theme kit を使うことによりローカル環境と Shopify 上のテーマを同期することができる。

  • Theme kit は windows, macOS, Linux で使うことができる。

  • API key を使って Shopify ストア上にあるテーマにアクセスする。

  • config.ymlファイルにAPI key・URL・themeIDを保持できる。


この記事が気に入ったらサポートをしてみませんか？