ヘッダー・フッター・アナウンスメントバー
セクショングループでヘッダー／フッター／告知バーを構成し、ロゴ・メニュー・検索・カート・決済アイコンを実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、全ページに出るヘッダーとフッターを組み立てられるようになります。
受託では、ロゴ・メニュー・カート件数・決済アイコンの出し方を1回覚えれば、どのテーマでも同じ形で使えます。
セクショングループとは、ヘッダーとフッターの置き場所
ヘッダーやフッターは、セクショングループ（複数のセクションをまとめて置く入れ物）に入れます。sections/header-group.jsonに、告知バー → ヘッダーの順で並べます。
描画は、layout/theme.liquidに書く{% sections 'header-group' %}が行います。
グループの中の並び替えや追加はテーマエディタで運用者が行え、フッターも同じ形でfooter-group.jsonに置きます。
ヘッダーとフッターは全ページに出るので、ここを壊すと全ページが壊れます。
ヘッダーに置く要素は何か
ロゴ・メニュー・検索・カートアイコン・アカウントの5つが基本です。
ロゴはimage_pickerが未設定ならshop.nameを出し、リンク先はroutes.root_urlにします。
メニューはlink_list設定の.linksを回し、子メニューはlink.linksにあります。
検索はroutes.search_urlへのGETフォーム、アカウントはshopify-accountコンポーネントです。
カートの件数（cart.item_count）は、あとでSection Rendering（セクション単位でHTMLを描画し直す仕組み）で差し替えるため、小さなスニペットかセクションに分けておきます。
フッターに置く要素は何か
メニュー、ポリシーへのリンク、決済アイコン、言語・通貨セレクタ、SNSリンクを置きます。
ポリシーはshop.privacy_policyなどのpolicyオブジェクトから出せます。
決済アイコンはshop.enabled_payment_typesをpayment_type_svg_tagで描画すると、有効な決済手段だけが並びます。
日本の案件では、特定商取引法に基づく表記へのリンクを必ずフッターに置きます。
発展：固定ヘッダーとグループ専用の設定
ヘッダーを画面の上に固定するには、position: stickyを使います。
あわせて、JSで計測した高さを--header-heightに入れておくと、アンカーやドロワーの位置決めに使えます。
ヘッダー用のセクションにはenabled_on.groups: ["header"]を付けて、本文に置けないようにします。
変更は非公開テーマで確認してから公開します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。