UI部品
23 件のスニペット・リファレンス
成功チェックマークアイコン
緑色の円形背景にチェックマークを描いたSVGアイコン。フォームやメッセージの完了状態を視覚的に表現する。
エラーアイコン
エラー状態を示す円形アイコン。SVG で描画されたアラート記号を含む UI 部品で、accessibility 対応により視覚障害ユーザーには非表示。
カスタム要素のラッパーコンポーネント
child-element というカスタム HTML 要素をラップし、スロットに子要素を挿入するスニペット。Web Components パターンで再利用可能なコンポーネント構造を実現する。
静的コンテンツ
管理画面で入力したテキストコンテンツを静的に描画するブロック。セクション内で複数回使い分けられる汎用コンテナとして機能する。
テキスト
セクションに追加できるシンプルなテキストブロック。管理画面からドラッグ&ドロップで配置でき、固定テキスト「hello world」を表示する基本的なブロック実装。
セクション共通ヘッダー（タイトル・説明文）
セクション内で繰り返し使うタイトルと説明文をまとめて描画するスニペット。テーマカスタマイザーから設定したテキストとフォントサイズを条件付きで出力する。
SVG アイコンの埋め込みテンプレート
エラーアイコン、ユーザープロフィールアイコン、背景グラフィックなど複数の SVG を HTML に埋め込むテンプレート。symbol 要素で定義したアイコンを use タグで参照し、再利用可能な構成にしている。
SVG アイコンの埋め込み
エラーアイコン、ユーザーアイコン、背景パターンなど複数の SVG 要素をテンプレートに埋め込むサンプル。symbol 要素で定義したアイコンと独立した SVG グラフィックを組み合わせて管理する。
画像の縦横比と遅延読み込み
Shopify の image_url フィルターを活用して、画像をアスペクト比・サイズ・遅延読み込みオプション付きで出力するスニペット。Retina 対応（2倍解像度）への自動スケーリングにも対応。
SVGアイコン表示
iconsvg.xyz ベースの SVG アイコンを Liquid で条件分岐により動的に表示するスニペット。サイズ・線幅・CSS クラスをパラメータで指定でき、カート・メニュー・検索・矢印など 30 種類以上のアイコンに対応する。
区切り線
ページ内の要素を視覚的に区切るための水平線セクション。色・透明度・高さをカスタマイズでき、上下の余白も調整できる。
HTML/Liquidコンテンツ
管理画面から HTML と Liquid コードを直接入力して、セクション上に動的コンテンツを表示するセクション。背景色・ボーダー・余白などのスタイルをカスタマイズできる。
ニュースレター登録フォーム
メールアドレス入力欄と送信ボタンを備えたニュースレター購読セクション。背景色・ボーダー・余白をテーマカスタマイザーで自由にカスタマイズでき、送信後に確認メッセージを表示する。
リッチテキスト
タイトル、説明文、プライマリ・セカンダリボタンを配置できるセクション。背景色・グラデーション、テキスト色、ボーダー、余白、コンテナ幅をカスタマイズ可能。
FAQ アコーディオン
質問と回答をアコーディオン形式で開閉表示するセクション。テーマカスタマイザーで背景色・ボーダー・余白を調整でき、Google の FAQPage 構造化データに自動対応する。
FAQ アコーディオン（スキーマ対応）
質問と回答をアコーディオン形式で開閉表示するセクション。管理画面から質問・回答をブロック形式で追加でき、Google 検索結果の FAQ リッチリザルト表示に対応する JSON-LD スキーマを自動生成する。
ブログ記事スライダー
ブログ記事をスライダー形式で表示するセクション。記事カードを横方向にスクロールでき、矢印・ページネーション・スクロールバーで操作できる。
画像上のツールチップ表示
画像上に番号付きボタンを配置し、クリック時にツールチップを開閉するセクション。レスポンシブ対応で、モバイルではリスト、デスクトップでは画像上の絶対位置に吹き出しを表示する。
カードリスト
複数のカード要素をグリッドレイアウトで表示するセクション。各カードに画像、タイトル、説明文、ボタンを配置でき、セクション全体とカード個別の背景色、枠線、余白などを管理画面でカスタマイズできる。
顧客評価スライダー
顧客からの評価・コメントをカード形式でスライダー表示するセクション。タイトル、説明文、著者名、星評価、著者画像をブロックごとに管理でき、デザイン・スライダー動作を細かくカスタマイズできる。
カードスライダー
複数のカードを横スクロール形式で表示するセクション。各カードに画像、タイトル、説明、ボタンを配置でき、Swiper ライブラリでスライド操作・ナビゲーション・ページネーション機能に対応している。
ヒーローカルーセル
複数のスライド画像とテキスト、ボタンを自動・手動で切り替えるカルーセルセクション。モバイル・デスクトップで別画像を指定でき、オーバーレイ、字幕、タイトル、説明文を各スライドごとにカスタマイズできる。
インタラクティブなクイズ
複数の質問と回答選択肢を備えたインタラクティブなクイズセクション。質問ごとに画像を切り替え、ユーザーの選択に応じて結果画面を表示する。