✨ UI部品初級
静的コンテンツ
管理画面で入力したテキストコンテンツを静的に描画するブロック。セクション内で複数回使い分けられる汎用コンテナとして機能する。
用途
セクション内で固定的なテキスト説明やコピーを表示したいとき。管理画面のカスタマイズ画面から入力したコンテンツをそのまま出力する。
設置場所
packages/theme-graph/fixtures/skeleton/blocks/_static.liquid に配置。セクション側で block type を 'static' として呼び出し、`{{ block.settings.content }}` をこのブロック内の `content` 変数に渡す。
注意点
このコードは Shopify theme-tools の公式テスト用フィクスチャなので、そのまま本番テーマに組み込む場合は block schema（@param で定義されたパラメータの型定義）を JSON で記述し、管理画面のエディタに対応させる必要がある。content には HTML が含まれる可能性があるため、ユーザー入力を完全に信頼できない場合は `| strip_html` でタグを除去する検討を推奨する。
コード
11 行 / liquid{% doc %}
this block is statically rendered
@param {string} content
{% enddoc %}
<div class="static-block">
{{ content }}
</div>
出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は 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部品初級
テキスト
セクションに追加できるシンプルなテキストブロック。管理画面からドラッグ&ドロップで配置でき、固定テキスト「hello world」を表示する基本的なブロック実装。
📁 theme-tools·MIT·15 行
✨ UI部品初級
セクション共通ヘッダー（タイトル・説明文）
セクション内で繰り返し使うタイトルと説明文をまとめて描画するスニペット。テーマカスタマイザーから設定したテキストとフォントサイズを条件付きで出力する。
📁 ks-bootshop·MIT·24 行
✨ UI部品初級
SVG アイコンの埋め込みテンプレート
エラーアイコン、ユーザープロフィールアイコン、背景グラフィックなど複数の SVG を HTML に埋め込むテンプレート。symbol 要素で定義したアイコンを use タグで参照し、再利用可能な構成にしている。
📁 theme-tools·MIT·25 行