Liquid Snippets by ALSEL
UI部品初級

セクション共通ヘッダー(タイトル・説明文)

セクション内で繰り返し使うタイトルと説明文をまとめて描画するスニペット。テーマカスタマイザーから設定したテキストとフォントサイズを条件付きで出力する。

用途
コレクション紹介、商品カテゴリ、ニュースレター登録フォーム等、複数セクションで共通のタイトル・説明文レイアウトが必要なとき。
設置場所
snippets/section-header.liquid に配置し、各セクション内で `{% render 'section-header', class: 'my-custom-class' %}` として呼び出す。タイトルと説明文の内容はセクションの schema.json で `header_title` `header_description` のようにフィールド定義する。
注意点
このスニペット自体には schema.json が含まれていないため、呼び出し元のセクションの schema 内で `header_title`、`header_description`、`header_title_font_size`、`header_description_font_size` の 4 つの設定フィールドを必ず定義する。`class` パラメータで追加の CSS クラスを渡せるが、overflow や text-overflow による制約が適用されていない場合、テキストが長いと折り返しや親要素ボックスからのはみ出しが発生するため、親側で max-width や word-break を指定する。
タグ:sectionheadertitledescriptioncomponent-reuse

コード

24 行 / liquid
{% comment %}
  Renders a header (title and description) that is usually the same accross sections

  Accepts:
  - class: {String} (Optional) An optional class (or classes) to apply to header element

  Usage:
  {% render 'section-header' %}
{% endcomment %}

{% if section.settings.header_title != blank or section.settings.header_description != blank %}
  <header class="section-header text-center {{ class }}">
    {% unless section.settings.header_title == blank %}
      <h2 class="title {{ section.settings.header_title_font_size }}">
        {{ section.settings.header_title }}
      </h2>
    {% endunless %}
    {% unless section.settings.header_description == blank %}
      <div class="description rte opacity-70 {{ section.settings.header_description_font_size }}">
        {{ section.settings.header_description }}
      </div>
    {% endunless %}
  </header>
{% endif %}

出典・ライセンス

License:
MIT

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

関連項目

UI部品初級

成功チェックマークアイコン

緑色の円形背景にチェックマークを描いたSVGアイコン。フォームやメッセージの完了状態を視覚的に表現する。

📁 shopify-headless-theme·MIT·6
UI部品初級

エラーアイコン

エラー状態を示す円形アイコン。SVG で描画されたアラート記号を含む UI 部品で、accessibility 対応により視覚障害ユーザーには非表示。

📁 theme-tools·MIT·8
UI部品中級

カスタム要素のラッパーコンポーネント

child-element というカスタム HTML 要素をラップし、スロットに子要素を挿入するスニペット。Web Components パターンで再利用可能なコンポーネント構造を実現する。

📁 theme-tools·MIT·10
UI部品初級

静的コンテンツ

管理画面で入力したテキストコンテンツを静的に描画するブロック。セクション内で複数回使い分けられる汎用コンテナとして機能する。

📁 theme-tools·MIT·11
UI部品初級

テキスト

セクションに追加できるシンプルなテキストブロック。管理画面からドラッグ&ドロップで配置でき、固定テキスト「hello world」を表示する基本的なブロック実装。

📁 theme-tools·MIT·15
UI部品初級

SVG アイコンの埋め込みテンプレート

エラーアイコン、ユーザープロフィールアイコン、背景グラフィックなど複数の SVG を HTML に埋め込むテンプレート。symbol 要素で定義したアイコンを use タグで参照し、再利用可能な構成にしている。

📁 theme-tools·MIT·25