ヘッダー/フッター/ナビゲーション
15 件のスニペット・リファレンス
Alpine.js統合のメニュー開閉
Alpine.js の @click ディレクティブと :class バインディングを使ったメニュー開閉コンポーネント。ボタンクリックで open 状態を切り替え、ul 要素に expanded クラスを条件付きで付与する。
ヘッダーのレイアウト構造
Web Component のカスタムエレメント `<c-header>` でラップしたヘッダー要素。Tailwind CSS のユーティリティクラスを使い、レスポンシブなパディングとフレックスボックスレイアウトを実装している。
ナビゲーションバーのロゴ
ストアのロゴをナビゲーションバーに表示し、クリックでホームページに戻るコンポーネント。ロゴ画像がない場合はストア名をテキストで表示する。
決済方法アイコン
ストアで有効な決済手段のアイコンをリスト表示するスニペット。Shopify が提供する `payment_type_svg_tag` フィルタを使い、クレジットカード・Apple Pay・Google Pay などのロゴを自動的に描画する。
グローバルナビゲーションメニュー
Shopify 管理画面の「メインメニュー」リンクリストをループし、トップレベルメニュー + 1階層のサブメニューを描画するスニペット。link.title と sub_link.title を escape フィルターでエスケープして XSS 対策を施している。
フッター
ストア共通のフッターセクション。管理画面で設定したフッターメニュー（リンクリスト）をループ表示し、著作権表記を出す。
ストアヘッダー
ロゴ、グローバルナビゲーション、顧客アカウントメニュー、カートへのリンクを含むストア共通ヘッダーセクション。顧客ログイン状態を判定し、ログイン前後で表示内容を出し分ける。
フッターのリッチテキストとメニュー
フッターセクション用のブロック型スニペット。リッチテキスト、ボタン、メニューを条件付きで描画する。block.settings で取得したテキスト・URL・メニューハンドルを組み合わせて柔軟なフッター構成を実現する。
デスクトップナビゲーションメニュー
Bootstrap のドロップダウン機能を使ったデスクトップ向けのグローバルナビゲーション。メインメニューのリンクリストをループし、サブメニュー有無に応じてドロップダウン表示を切り替える。
デスクトップヘッダーのアイコンメニュー
ヘッダー右側に言語選択、顧客アカウント、検索、カートのアイコンをレイアウトするスニペット。各機能の有効化設定に応じて条件付きで表示される。
オフキャンバスメニュー
画面下部からスライドインするモバイル対応メニュー。メインメニュー、サブメニュー（アコーディオン形式）、ソーシャルアイコン、言語・国設定切替に対応している。
ソーシャルメディアアイコンリンク
Facebook、Instagram、X、TikTok など複数のソーシャルメディアプラットフォームへのリンクをアイコン付きで表示するスニペット。テーマ設定から各プラットフォームの URL を読み込み、条件付きで出力する。
アナウンスメントバー（カルーセル表示）
ストア上部に複数のお知らせを自動回転で表示するセクション。背景色、テキスト色、ボーダー、フォントサイズなどを管理画面でカスタマイズでき、複数のスライドを自動再生またはボタン操作で切り替える。
グローバルナビゲーション
デスクトップ・モバイル兼用のナビゲーションバー。ロゴ、メニュー、検索、カート、アカウントアイコンを表示し、背景色、境界線、シャドウなどを管理画面で調整できる。
フッター
ストア共通のフッターをレスポンシブに表示するセクション。モバイル表示では各ブロックが開閉可能なアコーディオン、デスクトップ表示では複数カラムレイアウトで描画される。