🛍️ 商品表示上級

商品ブロック内のLiquid実行

セクションブロック内で管理画面から入力した Liquid コードを直接実行し、パディング設定で上下の余白を制御するスニペット。テーマカスタマイザーでコード記述が可能。

用途

商品ページのセクション内に、マーチャント独自の Liquid ロジック（条件分岐、ループ、フィルタなど）をブロックごとに注入したいとき。カスタマイズ性が高く、開発者向けのセッティング機能として機能する。

設置場所

snippets/product-block-liquid.liquid に配置し、商品ページセクション（sections/main-product.liquid など）内で `{% render 'product-block-liquid', block: block %}` で呼び出す。セクション設定に Liquid 入力フィールド（テキストエリア、タイプ: text）とパディング選択肢（pt, pb 用の数値フィールド）を定義する。

注意点

管理画面から任意の Liquid コードが実行可能になるため、セキュリティリスク（XSS、不正なオブジェクト参照）を考慮してマーチャント権限を制限する必要がある。パディングクラス（pt-*, pb-*）は Tailwind CSS など CSS フレームワークの命名規則に依存しており、自店舗のスタイル定義と整合させる。デバッグ時はテーマカスタマイザーのプレビュー画面で Liquid エラーメッセージを確認し、構文誤りや存在しないオブジェクト参照を修正する。

タグ:productliquidblockcustomizerpadding

コード

8 行 / liquid

{% liquid 
  assign pt = block.settings.pt | prepend: 'pt-'
  assign pb = block.settings.pb | prepend: 'pb-'
%}

<div class="product-block-liquid {{ pt }} {{ pb }}" {{ block.shopify_attributes }}>
  {{ block.settings.liquid }}
</div>

出典・ライセンス

Source:: kondasoft/ks-bootshop/snippets/product-block-liquid.liquid
Repository:: https://github.com/kondasoft/ks-bootshop
License:: MIT

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

商品ブロック内のLiquid実行

コード

出典・ライセンス

関連項目

商品ページの見出し

商品レビューバッジの表示

定期販売プランのデータ属性を動的に生成

商品ページの区切り線

商品画像のプリロード出力

商品バリアント選択ラジオボタン