Shopify Theme Kit で管理できる設定と管理できない設定

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、Shopify サイトの運用において、Shopify Theme Kit で管理できる設定と管理できない設定についてまとめたいと思います。

Shopify Theme Kit によるテーマ開発についてはこちらの記事もあわせてご覧ください。

Shopify Theme Kit の仕様について

Shopify のテーマ開発では Shopify Theme Kit というツールを使用し、Shopify 上のテーマをローカルにダウンロードしてくる形で開発を進めます。

これにより、Shopify Theme Kit でダウンロードできるテーマ関係のファイルについては、ローカルでの編集や Git 管理が可能です。

しかし、 SaaS である Shopify の特性上、Shopify の管理画面からのみ追加や編集が可能な設定項目やコンテンツも存在しています。それらは Theme Kit で管理ができないため、バックアップなどを別途行う必要があります。

今回は、管理画面にある設定のうち、どれが Shopify Theme Kit でダウンロードし管理できるのかについてまとめていきます。

テーマファイルで管理できる変更

管理画面から設定できるもので、テーマファイルで管理できるものとしては大きく分けて以下の3つです。

• 管理画面 > テーマ > カスタマイズ から行う変更
• 管理画面 > テーマ > コードを編集する から行う変更
• 管理画面 > テーマ > 言語を編集する から行う変更

カスタマイズから行う変更

テーマの カスタマイズ から行う変更（各セクションの設定やテーマのファビコン、SNSリンク等）はテーマファイル上で管理が可能です。

カスタマイズ上でまず変更を行い、保存ボタンを押すとテーマが Shopify 上で更新されます。

その後、ローカルで theme download コマンドを叩くと、その更新内容をローカルに取り込むことができます。

テーマのカスタマイズで編集できる項目の設定は settings_data.json に一括で記述されています。

{
  "current": {
    "favicon": "shopify:\/\/shop_images\/favicon.png",
    "sections": {
      "header": {
        "type": "header",
        "settings": {
          "align_logo": "left",
          "logo_max_width": 100,
          "main_linklist": "main-menu",
          "message": false,
          "home_page_only": true,
          "message_text": "ここで告知してください",
          "color_bg": "#3a3a3a",
          "color_text": "#ffffff"
        }
      },
...

settings_data.json とカスタマイズ画面の項目が同期していることがわかります。

なお、テーマのカスタマイズを介さず settings_data.json を直接書き換えることでも設定の変更が可能です。

ただし、ここで画像を変更した場合、settings_data.json に画像パスが保存されるのみで、 theme download を行ってもローカルに画像をダウンロードすることはできません。

コードを編集する から行う変更

Shopify Theme Kit でダウンロードできるテーマの liquid ファイル等がここで編集できます。ローカルでの作業と同一のため詳しくは割愛します。

ここで保存した場合、手元に取り込むにはカスタマイズと同様 theme download コマンドを叩く必要があります。

言語を編集するから行う変更

言語を編集する からの変更もカスタマイズと同様テーマファイル上に保存されます。

保存ボタンを押し、theme download を行うと、 locales/ja.json などの変更した言語設定ファイルが更新されます。

{
  "general": {
    "accessibility": {
      "skip_to_content": "コンテンツにスキップする",
      "close_modal": "閉じる",
      "link_messages": {
        "new_window": "新しいウィンドウで開く",
        "external": "外部のウェブサイトに移動します。",
        "new_window_and_external": "外部のウェブサイトを新しいウィンドウで開く"
      },
      "refresh_page": "選択結果を選ぶと、ページが全面的に更新されます。",
      "selection_help": "スペースキーを押してから矢印キーを押して選択します。",
      "unit_price_separator": "あたり",
      "error": "エラー"
    },
...

テーマのカスタマイズ同様、locales/ja.json とカスタマイズ画面の項目が同期していることがわかります。

テーマファイルに入らない変更

テーマファイルに入らない変更としては以下があります。

• 注文情報・商品情報（商品画像・コレクション含む）・顧客情報など
• アプリの設定
• ブログ記事
• ページ
• メニュー
• ドメイン
• 設定 の内容 (法務関連のページなど)
• 管理画面でアップロードされた ファイル

これらは Shopify 管理画面上でのみ編集可能で、 Shopify Theme Kit で編集することは出来ません。

そのため、バックアップや履歴管理を行うためには、アプリなどを使用しバックアップを取る必要があります。

今後の記事で、バックアップ用のアプリについてもご紹介できればと思っています。

まとめ

今回はShopify Theme Kit で管理できる設定と管理できない設定についてまとめました。

Shopify サイトを運用している方への知見となれば幸いです。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。