🛍️ 商品表示初級
商品ページの説明文
商品詳細ページにカスタムテキストと商品説明を組み合わせて表示するブロック。タイトル・説明文のフォントサイズや上下余白を管理画面から調整できる。
用途
商品ページで、商品説明の前後に注釈やこだわりポイントを挿入したいとき。または商品説明文だけでなく、マーチャントが独自に追加したリッチテキストも同じセクション内に表示したい場合に使う。
設置場所
snippets/product-block-richtext.liquid に配置し、商品セクション(sections/main-product.liquid など)内で `{% render 'product-block-richtext', block: block, product: product %}` のように Liquid ブロックとして呼び出す。Online Store 2.0 のセクションスキーマでこのスニペットをブロック要素として登録する。
注意点
block.settings のキー(pt、pb、title_font_size など)がセクションスキーマ側で定義されていることが前提。description クラスに rte(リッチテキストエディタ)を付けているため、管理画面で入力したマークアップ(ボールド、リンク等)が正しく表示される。product.description を表示する際は、他ページと重複しないようテーマ側で description 非表示の設定確認が推奨される。
コード
22 行 / liquid{% liquid
assign pt = block.settings.pt | prepend: 'pt-'
assign pb = block.settings.pb | prepend: 'pb-'
%}
<div
class="product-block-richtext {{ pt }} {{ pb }}"
{{ block.shopify_attributes }}>
{% unless block.settings.title == blank %}
<h2 class="title {{ block.settings.title_font_size }}">
{{ block.settings.title }}
</h2>
{% endunless %}
{% if block.settings.description != blank or block.settings.product_description != false %}
<div class="description rte mb-0 {{ block.settings.description_font_size }} {{ block.settings.description_classes }}">
{{ block.settings.description }}
{% if block.settings.product_description %}
{{ product.description }}
{% endif %}
</div>
{% endif %}
</div>出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。
関連項目
🛍️ 商品表示上級
商品ブロック内のLiquid実行
セクションブロック内で管理画面から入力した Liquid コードを直接実行し、パディング設定で上下の余白を制御するスニペット。テーマカスタマイザーでコード記述が可能。
📁 ks-bootshop·MIT·8 行
🛍️ 商品表示初級
商品ページの見出し
商品詳細ページの商品名を h1 見出しで表示するブロック。テーマカスタマイザーから見出しサイズと上下の余白(padding)を調整できる。
📁 ks-bootshop·MIT·8 行
🛍️ 商品表示中級
商品レビューバッジの表示
Loox と JudgeMe 両方のレビュー集約アプリに対応したレーティングバッジを商品ページに埋め込む。メタフィールドから平均評価とレビュー数を取得し、各アプリの UI コンポーネントを描画する。
📁 ks-bootshop·MIT·9 行
🛍️ 商品表示中級
定期販売プランのデータ属性を動的に生成
商品の定期販売プラン(Selling Plans)をループで取得し、data 属性として HTML に埋め込むスニペット。JavaScript で定期販売オプションを制御するためのデータ基盤として機能する。
📁 theme-tools·MIT·10 行
🛍️ 商品表示初級
商品ページの区切り線
商品詳細ページで、セクション間に区切り線を挿入するブロック。パディング、高さ、背景色、透明度をカスタマイズできる。
📁 ks-bootshop·MIT·15 行
🛍️ 商品表示初級
商品画像のプリロード出力
商品オブジェクトから image_tag フィルターを使い、preload 属性付きで画像を出力するスニペット。複数商品のループ内でも使える基本的なパターン。
📁 theme-tools·MIT·16 行