📘 公式リファレンス🏷️ リファレンス/タグ初級
for タグ(配列をループ処理)
配列の各要素に対して表現を繰り返し実行するタグ。1回のループで最大50項目まで処理でき、limit・offset・range・reversed パラメータで細かく制御できる。
用途
コレクションの全商品を一覧表示したり、特定の範囲だけループしたり、逆順で表示するときに使う。
設置場所
Liquid テンプレート内で `{% for variable in array %} ... {% endfor %}` の形で記述し、配列をループ処理する。
注意点
1回のループは最大50項目が上限のため、50を超える場合は `paginate` タグでページ分割する必要がある。limit パラメータでデータ取得量を制限するより、paginate タグを使ってサーバー側で事前カットすることをShopify は推奨している。reversed パラメータで逆順にするとき、offset や limit と組み合わせると予期しない順序になる可能性があるため、範囲が複雑なときは `forloop` オブジェクトで現在のインデックスを確認するとよい。
仕様
113 行 / json{
"category": "iteration",
"deprecated": false,
"deprecation_reason": "",
"description": "You can do a maximum of 50 iterations with a `for` loop. If you need to iterate over more than 50 items, then use the\n[`paginate` tag](/docs/api/liquid/tags/paginate) to split the items over multiple pages.\n\n> Tip:\n> Every `for` loop has an associated [`forloop` object](/docs/api/liquid/objects/forloop) with information about the loop.",
"parameters": [
{
"description": "The number of iterations to perform.",
"name": "limit",
"positional": false,
"required": false,
"types": [
"number"
]
},
{
"description": "The 1-based index to start iterating at.",
"name": "offset",
"positional": false,
"required": false,
"types": [
"number"
]
},
{
"description": "A custom numeric range to iterate over.",
"name": "range",
"positional": true,
"required": false,
"types": [
"untyped"
]
},
{
"description": "Iterate in reverse order.",
"name": "reversed",
"positional": true,
"required": false,
"types": [
"untyped"
]
}
],
"summary": "Renders an expression for every item in an array.",
"name": "for",
"syntax": "{% for variable in array %}\n expression\n{% endfor %}",
"syntax_keywords": [
{
"keyword": "variable",
"description": "The current item in the array."
},
{
"keyword": "array",
"description": "The array to iterate over."
},
{
"keyword": "expression",
"description": "The expression to render for each iteration."
}
],
"examples": [
{
"name": "",
"description": "",
"syntax": "",
"path": "/collections/sale-potions",
"raw_liquid": "{% for product in collection.products -%}\n {{ product.title }}\n{%- endfor %}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
},
{
"name": "limit",
"description": "You can limit the number of iterations using the `limit`\nparameter.\n\n> Tip:\n> Limit the amount of data fetched for arrays that can be paginated with the `paginate` tag instead of using the `limit` parameter. Learn more about [limiting data fetching](/docs/api/liquid/tags/paginate#paginate-limit-data-fetching) for improved server-side performance.\n",
"syntax": "{% for variable in array limit: number %}\n expression\n{% endfor %}\n",
"path": "/collections/sale-potions",
"raw_liquid": "{% for product in collection.products limit: 2 -%}\n {{ product.title }}\n{%- endfor %}",
"parameter": true,
"display_type": "text",
"show_data_tab": true
},
{
"name": "offset",
"description": "You can specify a 1-based index to start iterating at using the `offset` parameter.",
"syntax": "{% for variable in array offset: number %}\n expression\n{% endfor %}\n",
"path": "/collections/sale-potions",
"raw_liquid": "{% for product in collection.products offset: 2 -%}\n {{ product.title }}\n{%- endfor %}",
"parameter": true,
"display_type": "text",
"show_data_tab": true
},
{
"name": "range",
"description": "Instead of iterating over specific items in an array, you can specify a numeric range to iterate over.\n\n> Note:\n> You can define the range using both literal and variable values.\n",
"syntax": "{% for variable in (number..number) %}\n expression\n{% endfor %}\n",
"path": "/collections/all",
"raw_liquid": "{% for i in (1..3) -%}\n {{ i }}\n{%- endfor %}\n\n{%- assign lower_limit = 2 -%}\n{%- assign upper_limit = 4 -%}\n\n{% for i in (lower_limit..upper_limit) -%}\n {{ i }}\n{%- endfor %}",
"parameter": true,
"display_type": "text",
"show_data_tab": true
},
{
"name": "reversed",
"description": "You can iterate in reverse order using the `reversed` parameter.",
"syntax": "{% for variable in array reversed %}\n expression\n{% endfor %}\n",
"path": "/collections/sale-potions",
"raw_liquid": "{% for product in collection.products reversed -%}\n {{ product.title }}\n{%- endfor %}",
"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 行