🏗️ テーマ基盤中級

条件分岐で動的にHTML要素タグを切り替え

条件によって HTML 要素のタグ名を動的に変更するスニペット。Liquid の assign で変数にタグ名を格納し、`<{{ 変数 }}>` の形で展開することで、柔軟な要素構造を実現する。

用途

3D モデル対応の有無や表示条件によって、商品メディアコンテナを `<product-media>` カスタム要素または標準 `<div>` で切り替えたいとき。

設置場所

sections/main-product.liquid などメディア表示セクション内で、メディアコンテナのマークアップ箇所に貼り付け。`has_3d` 変数をストア設定またはメタフィールドから取得する形に調整する。

注意点

Liquid では `<{{ 変数 }}>` という動的タグ生成がサポートされているが、HTML 検証ツールやテーマエディタの静的解析では警告が出ることがある。本番環境では正常に動作するため、無視して問題ない。`has_3d` 変数が未定義だと `<>` 空タグになるため、assign の前に値が設定されていることを確認する。

タグ:dynamic-tagconditionalliquid3d-modelmarkup

コード

13 行 / liquid

{% liquid
  if has_3d
    assign wrapper = 'product-media'
  else
    assign wrapper = 'div'
  endif
%}
<div>
  <{{ wrapper }} loading="lazy">
    Content that goes in the middle
  </{{ wrapper }}>
</div>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/html-liquid-drop-name/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

関連項目

🏗️ テーマ基盤中級

セクションスキーマのカスタムブロック定義

セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。

📁 theme-tools·MIT·7 行

🏗️ テーマ基盤初級

セクション呼び出しのフォーマット

Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。

📁 theme-tools·MIT·7 行

🏗️ テーマ基盤初級

レイアウトテンプレートの指定

Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御（ダッシュ記号）の使い方を示す。

📁 theme-tools·MIT·8 行

🏗️ テーマ基盤上級

Liquid フォーマッター互換のセクション表記

Prettier Liquid プラグインのテストケースで、セクションタグの様々な書式を検証する。異なる間隔・改行・ホワイトスペーストリミングの組み合わせでもセクション名が崩れないことを確認する。

📁 theme-tools·MIT·9 行

🏗️ テーマ基盤初級

基本的なHTMLレイアウト

Prettier Liquid プラグインのテスト用に作られた最小限の HTML テンプレート。DOCTYPE から body タグまでの基本的なドキュメント構造を示す。

📁 theme-tools·MIT·10 行

🏗️ テーマ基盤上級

layout タグのフォーマット

Liquid の layout タグの書式をコード品質ツール(Prettier)でフォーマットするテストケース。スペースや改行位置の違いを正規化し、レイアウト名が壊れないことを検証する。

📁 theme-tools·MIT·10 行