Liquid Snippets by ALSEL
📘 公式リファレンス🏷️ リファレンス/タグ中級

content_for タグ(テーマブロック描画領域)

テーマ内でブロック描画領域を定義するタグ。複数ブロックをマーチャント操作可能にする「blocks」モードと、固定ブロックを1つ描画する「block」モードの2種類に対応する。

用途
Online Store 2.0 のセクション内でマーチャント向けブロック追加UI を実装するとき。また、静的ブロックの配置や、ブロックパラメータの受け渡しが必要なとき。
設置場所
section または template ファイルの Liquid 内で `{% content_for 'blocks' %}` または `{% content_for 'block', type: 'button', id: 'static-block-1' %}` の形で使用する。
注意点
`content_for 'blocks'` を使う場合、対応する JSON スキーマに blocks 定義が必須。`content_for 'block'` モードではパラメータ(color など任意キー)をタグ属性に追加するとそれが静的ブロック内で `{{ color }}` として参照可能になる。廃止予定機能ではなく、Online Store 2.0 のコア機能として位置づけられている。
タグ:content-forblocksectiontheme-editoronline-store-2-0

仕様

33 行 / json
{
  "category": "theme",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "The `content_for` tag requires a type parameter to differentiate between rendering a number of theme blocks (`'blocks'`) and a single static block (`'block'`).",
  "parameters": [],
  "summary": "Creates a designated area in your [theme](https://shopify.dev/themes/architecture) where blocks can be rendered.",
  "name": "content_for",
  "syntax": "{% content_for 'blocks' %}\n{% content_for 'block', type: \"slide\", id: \"slide-1\" %}",
  "syntax_keywords": [],
  "examples": [
    {
      "name": "blocks",
      "description": "Creates a designated area that renders theme blocks as configured in the JSON template or section groups, allowing merchants to add, remove, and rearrange blocks using the theme editor. See [theme blocks](/docs/storefronts/themes/architecture/blocks/theme-blocks) for more information.\n",
      "syntax": "{% content_for \"blocks\" %}",
      "path": "/",
      "raw_liquid": "",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "block",
      "description": "Renders a static theme block of the specified type with the provided ID. You can pass additional arbitrary parameters (such as `color`) that will be accessible within the static block using `{{ color }}`. See [static blocks](/docs/storefronts/themes/architecture/blocks/theme-blocks/static-blocks) to learn more.\n",
      "syntax": "{% content_for \"block\", type: \"button\", id: \"static-block-1\", color: \"red\" %}",
      "path": "/",
      "raw_liquid": "",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ]
}

出典・ライセンス

License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

📘 公式リファレンス🏷️ リファレンス/タグ中級

doc タグ(テンプレートの注釈・ドキュメント)

Liquid テンプレート内にドキュメンテーションコメントを埋め込むタグ。`{% doc %}` ~ `{% enddoc %}` に囲まれたコンテンツは画面に出力されず、内部の Liquid コードは解析されるが実行されない。コード補完、リンティング、インラインドキュメント機能の実装を支援する。

📁 theme-liquid-docs·MIT·12
📘 公式リファレンス🏷️ リファレンス/タグ初級

include タグ(スニペットを埋め込む)

スニペットファイルを Liquid テンプレート内に埋め込んでレンダリングする。埋め込み先の変数にアクセス・変更できるため、親テンプレートと子スニペット間でデータを直接共有する。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ中級

javascript タグ(セクション・ブロック内のコード)

セクション、ブロック、スニペット内に JavaScript コードを記述するタグ。このタグ内に書いた JavaScript は Shopify のテーマビルドシステムにより自動的に読み込まれて実行される。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ初級

sections タグ(セクショングループを描画)

セクショングループをテーマのレイアウト内で描画するタグ。レイアウトファイル内に配置して、複数のセクションをグループ化した内容を出力する。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ初級

stylesheet タグ(CSS定義)

セクション、ブロック、スニペット内で CSS スタイルを定義するタグ。各ファイルにつき1つだけ記述でき、定義した CSS はそのコンポーネント固有の外側スコープで読み込まれて実行される。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ初級

break タグ(ループの中断)

for ループの反復処理を途中で停止するタグ。指定した条件に達したら以降の反復をスキップして、ループを抜ける。

📁 theme-liquid-docs·MIT·23