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

if タグ(条件分岐)

指定した条件が true のときだけ、その中身の式を実行・表示する。if / elsif / else を組み合わせて複数条件の分岐に対応する。

用途
商品がセール中か判定して表示内容を変える、ユーザーがログイン済みか確認してメニューを出し分ける、在庫がある・なしで買い button を切り替えるなど、条件に応じた表示制御全般。
設置場所
Liquid テンプレート内の任意の場所で `{% if 条件 %} ... {% endif %}` の形で使用する。セクション・スニペット・templates など全テンプレートファイルで利用可能。
注意点
条件式に数値と文字列を直接比較すると型の自動変換が走るため、`product.price > 1000` のような比較は避け、`product.price | times: 1` で明示的に数値化してから比較するか、文字列比較に統一するとよい。elsif を複数連ねる場合、順序が重要で上から順に評価されるため、より具体的な条件を上に置く。
タグ:conditionalif-elsif-elselogiccontrol-flow

仕様

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
    }
  ]
}

出典・ライセンス

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