✨ 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 を指定する。
コード
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 %}出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- 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 行