こんにちは。
ディレクターの田辺です。
「Shopifyテーマの中で、テーマのどこからでも参照できる値をセットする」という本記事のタイトルが、自分でも意味不明だと思うので、まず、その解説をさせてください。
Shopifyのテーマは、JSONとLiquidで構成されています。
そして、Liquidは、商品一覧ページのためのLiquid、商品詳細ページのためのLiquidのように、役割ごとにLiquidファイルが存在します。
例えば、全てのページにおいて「株式会社Q」という特定の文言をページごとに異なる位置に表示したいとき、どうすれば良いでしょうか？
全てのLiquidファイルに「株式会社Q」をハードコーディングする、というパワープレイもありですが、もう少しスマートなやり方がいくつかあります。
私が今回紹介するのは、「テーマ設定」を活用する方法です。
テーマ設定とは
ストア管理画面 > オンラインテーマ > テーマ > カスタマイズ
からアクセスできるテーマカスタマイズ画面にテーマ設定はあります。
下図の画面です。
この「テーマ設定」で設定した内容は、どのLiquidファイルからでも参照できます。
テーマ設定をカスタマイズする方法
コード編集画面 > 設定 > settings_schema.json
を編集することで、テーマ設定に任意の項目を追加できます。
では、共通文言、という項目を追加してみます。
追加した内容は下記です。
{
"name": "共通文言",
"settings": [
{
"type": "text",
"id": "common_text"
}
]
},
下図のようになります。
あとは、上記の項目に、何らか文言を設定し、「保存」するだけです。
テーマ設定の内容を参照にする方法
テーマ設定で設定した内容をLiquid上から参照するのは簡単です。
今回例として設定してみた「共通文言」であれば、Liquidファイル内に下記のように記載するだけです。
{{ settings.common_text }}まとめ
テーマ設定を利用する以外にも、JavaScriptを駆使して、1箇所に書いた「全ページで共通して使用したい値」を全ページで参照することも可能かと思います。
しかし、テーマ設定の方が、「誰でも編集可能」ですし、「Liquidで処理したい」場合にはこの方法しかない、と思っています。
「メタフィールド」でも良さそうですが、実は、全てのLiquidから参照できるようなメタフィールドは、少なくとも通常のストア操作の範囲では作成できません。
意外にもスマートに「Shopifyテーマの中で、テーマのどこからでも参照できる値をセットする」方法は少ないのです。
それでは。