📁

【Shopify.dev和訳】Themes/Architecture/Config/settings_data.json

2021/09/18に公開約4,600字

この記事について

この記事は、Themes/Architecture/Config/settings_data.jsonの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

settings_data.json

settings_data.json ファイルには、テーマの設定値が格納されています。例えば、以下のテーマ設定を使って、マーチャントがページ背景の色を選択できるようにすることができます。

config/settings_schema.json
{
  "name": "Colors",
  "settings": [
    {
      "type": "color",
      "id": "color_page_bg",
      "label": "Page background",
      "default": "#FFFFFF"
    }
  ]
}

これにより、settings_data.jsoncolor_page_bgのエントリが追加されます。

config/settings_data.json
...
"color_page_bg": "#FFFFFF"
...

テーマエディターでcolor_page_bgの値を変更すると、settings_data.jsonが新しい値で更新されます。

基本フォーマット

settings_data.jsonファイルには、2 つの親オブジェクトがあります。

  • current - 現在、テーマエディターに保存されているすべての設定値が含まれています。
  • presets - 各テーマスタイルのオブジェクトが含まれています。各オブジェクトは、currentと同じフォーマットです。

例:

Copy
{
  "current": {
    "color_page_bg": "#FFFFFF",
    ...
  },
  "presets": {
    "preset-name": {
      "color_page_bg": "#000000",
      ...
    }
  }
}

テーマスタイル

テーマスタイルは、マーチャントが開始時にテーマエディタを介してテーマの一般的な見た目や雰囲気を簡単に変更できるようにするテーマ設定のデフォルトのコレクションです。

テーマスタイルを選択すると、関連するテーマスタイルの値を使用するようにcurrentのオブジェクトが更新されます。ただし、特定の入力タイプの設定は変更されません。これらの入力は、保持している値の種類によって決定され、2 つのカテゴリーに分けられます。

現在の価値

提示値とは、テーマの視覚的な側面に関連する設定の値です。例えば、テキストの色やフォント、特定の要素を表示するかしないかの選択などです。

以下の入力タイプは提示値を持ち、テーマスタイルを切り替えると値が上書きされます。

コンテンツの価値

コンテンツの値は、テーマのコンテンツに関連する設定の値です。例えば、スライドショーの画像や、ホームページで紹介する商品などです。

以下の入力タイプはコンテンツの値を持ち、テーマスタイルを切り替えても上書きされません。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます