📘 公式リファレンス🏷️ リファレンス/タグ初級
if タグ(条件分岐)
指定した条件が true のときだけ、その中身の式を実行・表示する。if / elsif / else を組み合わせて複数条件の分岐に対応する。
用途
商品がセール中か判定して表示内容を変える、ユーザーがログイン済みか確認してメニューを出し分ける、在庫がある・なしで買い button を切り替えるなど、条件に応じた表示制御全般。
設置場所
Liquid テンプレート内の任意の場所で `{% if 条件 %} ... {% endif %}` の形で使用する。セクション・スニペット・templates など全テンプレートファイルで利用可能。
注意点
条件式に数値と文字列を直接比較すると型の自動変換が走るため、`product.price > 1000` のような比較は避け、`product.price | times: 1` で明示的に数値化してから比較するか、文字列比較に統一するとよい。elsif を複数連ねる場合、順序が重要で上から順に評価されるため、より具体的な条件を上に置く。
仕様
42 行 / json{
"category": "conditional",
"deprecated": false,
"deprecation_reason": "",
"description": "",
"parameters": [],
"summary": "Renders an expression if a specific condition is `true`.",
"name": "if",
"syntax": "{% if condition %}\n expression\n{% endif %}",
"syntax_keywords": [
{
"keyword": "condition",
"description": "The condition to evaluate."
},
{
"keyword": "expression",
"description": "The expression to render if the condition is met."
}
],
"examples": [
{
"name": "",
"description": "",
"syntax": "",
"path": "/products/glacier-ice",
"raw_liquid": "{% if product.compare_at_price > product.price %}\n This product is on sale!\n{% endif %}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
},
{
"name": "elsif",
"description": "You can use the `elsif` tag to check for multiple conditions.",
"syntax": "",
"path": "/products/health-potion",
"raw_liquid": "{% if product.type == 'Love' %}\n This is a love potion!\n{% elsif product.type == 'Health' %}\n This is a health potion!\n{% endif %}",
"parameter": false,
"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 行