🛍️ 商品表示初級

商品ページの区切り線

商品詳細ページで、セクション間に区切り線を挿入するブロック。パディング、高さ、背景色、透明度をカスタマイズできる。

用途

商品ページで複数のセクション（説明、スペック、レビューなど）を視覚的に分離したいときに使う。

設置場所

snippets/product-block-separator.liquid に配置し、商品ページセクション内で `{% render 'product-block-separator', block: block %}` で呼び出す。またはセクション JSON で block として定義する。

注意点

このコードは Online Store 2.0 のセクション / ブロック機能を前提としており、theme settings の pt（上パディング）・pb（下パディング）・bg_color・height・bg_opacity を管理画面で設定してある必要がある。bg_color は Bootstrap クラス（例: `bg-danger`）想定なので、カスタムカラーを使う場合は style 属性に直接 color を指定する方が確実。height が 0px だと表示されないため、最低でも 1px 以上を指定する。

タグ:productseparatorblockdividerstyling

コード

15 行 / liquid

<div 
  class="
    product-block-separator separator-wrappe
    {{ block.settings.pt | prepend: 'pt-' }} 
    {{ block.settings.pb | prepend: 'pb-' }}
  " 
  {{ block.shopify_attributes }}>
  <hr 
    class="separator my-0 {{ block.settings.bg_color }}" 
    style="
      opacity: 1;
      --bs-bg-opacity: {{ block.settings.bg_opacity | append: '%' }};
      height: {{ block.settings.height | append: 'px' }}
    ">
</div>

出典・ライセンス

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

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

商品ページの区切り線

コード

出典・ライセンス

関連項目

商品ブロック内のLiquid実行

商品ページの見出し

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

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

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

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