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つです。

  • 管理画面 > テーマ > カスタマイズ から行う変更
  • 管理画面 > テーマ > コードを編集する から行う変更
  • 管理画面 > テーマ > 言語を編集する から行う変更
枠線で囲われたボタンから編集できる部分が Theme Kit で管理できる

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

テーマの カスタマイズ から行う変更(各セクションの設定やテーマのファビコン、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 サイトを運用している方への知見となれば幸いです。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか?

「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」

役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。

リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。