🛍️ 商品表示初級
商品ページの見出し
商品詳細ページの商品名を h1 見出しで表示するブロック。テーマカスタマイザーから見出しサイズと上下の余白(padding)を調整できる。
用途
商品ページのメイン領域で商品名を強調表示したいとき。セクション内のブロック設定で見出しの大きさや余白をノーコードで変更できる。
設置場所
snippets/product-block-title.liquid に配置し、product セクション内で `{% render 'product-block-title', product: product, block: block %}` で呼び出す。セクション JSON の block 定義に `pt`(padding-top)、`pb`(padding-bottom)、`title_font_size` の settings を追加する必要がある。
注意点
ブロック設定で `pt` と `pb` の値は数値（0～5など Bootstrap の utility scale に準拠）であることが前提。`prepend: 'pt-'` で CSS クラス名に変換されるため、テーマの CSS に `pt-0`、`pt-1`、`pb-0`、`pb-1` などのユーティリティクラスが定義されていることを確認する。`title_font_size` の値（例: `text-xl`、`text-2xl`）も同様に CSS に存在する必要がある。
コード
8 行 / liquid{% liquid
assign pt = block.settings.pt | prepend: 'pt-'
assign pb = block.settings.pb | prepend: 'pb-'
%}
<h1 class="product-title title mb-0 {{ block.settings.title_font_size }} {{ pt }} {{ pb }}" {{ block.shopify_attributes }}>
{{ product.title }}
</h1>出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。
関連項目
🛍️ 商品表示上級
商品ブロック内のLiquid実行
セクションブロック内で管理画面から入力した Liquid コードを直接実行し、パディング設定で上下の余白を制御するスニペット。テーマカスタマイザーでコード記述が可能。
📁 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 行
🛍️ 商品表示初級
商品バリアント選択ラジオボタン
商品詳細ページでバリアントを選択するラジオボタンをラベルでラップしたHTML。在庫がないバリアントは disabled 属性を付与し、現在選択中のバリアントは checked 状態にする。
📁 theme-tools·MIT·21 行