📘 公式リファレンス🏷️ リファレンス/タグ初級
render タグ(スニペット・アプリブロックの読み込み)
スニペットまたはアプリブロックを呼び出して埋め込む。外側で定義した変数をパラメータで渡すことで、スニペット内でアクセスさせられる。
用途
ページテンプレートやセクション内で共通部品(商品カード、バナー、フッターなど)を再利用したいとき。配列をループさせながらスニペットを複数回呼び出すときにも使う。
設置場所
Liquid テンプレート内の任意の場所で `{% render 'スニペット名' %}` と記述する。スニペットファイル名は `.liquid` 拡張子なしで指定し、ファイル形式は `snippets/スニペット名.liquid`。
注意点
render タグの内側でさらに include タグを使うことはできない。スニペット内で外側の変数にアクセスするには、`variable: value` の形式で明示的にパラメータとして渡す必要がある。パラメータ内で変更した値はスニペット内のみに限定され、外側には反映されない。グローバルオブジェクト(product、section、shop など)はパラメータ指定なしで直接アクセスできる。
仕様
48 行 / json{
"category": "theme",
"deprecated": false,
"deprecation_reason": "",
"description": "Inside snippets and app blocks, you can't directly access variables that are [created](/docs/api/liquid/tags/variable-tags) outside\nof the snippet or app block. However, you can [specify variables as parameters](/docs/api/liquid/tags/render#render-passing-variables-to-a-snippet)\nto pass outside variables to snippets.\n\nWhile you can't directly access created variables, you can access global objects, as well as any objects that are\ndirectly accessible outside the snippet or app block. For example, a snippet or app block inside the [product template](/themes/architecture/templates/product)\ncan access the [`product` object](/docs/api/liquid/objects/product), and a snippet or app block inside a [section](/themes/architecture/sections)\ncan access the [`section` object](/docs/api/liquid/objects/section).\n\nOutside a snippet or app block, you can't access variables created inside the snippet or app block.\n\n> Note:\n> When you render a snippet using the `render` tag, you can't use the [`include` tag](/docs/api/liquid/tags/include)\n> inside the snippet.",
"parameters": [],
"summary": "Renders a [snippet](/themes/architecture/snippets) or [app block](/themes/architecture/sections/section-schema#render-app-blocks).",
"name": "render",
"syntax": "{% render 'filename' %}",
"syntax_keywords": [
{
"keyword": "filename",
"description": "The name of the snippet to render, without the `.liquid` extension."
}
],
"examples": [
{
"name": "for",
"description": "You can render a snippet for every item in an array using the `for` parameter. You can also supply an optional `as` parameter to be able to reference the current item in the iteration inside the snippet.\nAdditionally, you can access a [`forloop` object](/docs/api/liquid/objects/forloop) for the loop inside the snippet.\n",
"syntax": "{% render 'filename' for array as item %}",
"path": "/",
"raw_liquid": "",
"parameter": true,
"display_type": "text",
"show_data_tab": true
},
{
"name": "Passing variables to a snippet",
"description": "Variables that have been [created](/docs/api/liquid/tags/variable-tags) outside of a snippet can be passed to a snippet as parameters on the `render` tag.\n\n> Note:\n> Any changes that are made to a passed variable apply only within the snippet.\n",
"syntax": "{% render 'filename', variable: value %}",
"path": "/",
"raw_liquid": "",
"parameter": true,
"display_type": "text",
"show_data_tab": true
},
{
"name": "with",
"description": "You can pass a single object to a snippet using the `with` parameter. You can also supply an optional `as` parameter to specify a custom name to reference the object inside the snippet. If you don't use the `as` parameter to specify a custom name, then you can reference the object using the snippet filename.\n",
"syntax": "{% render 'filename' with object as name %}",
"path": "/",
"raw_liquid": "",
"parameter": true,
"display_type": "text",
"show_data_tab": true
}
]
}出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-liquid-docs
- 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 行