ヘッダーとフッター

ヘッダーとフッターは全ページに表示されます。テーマエディターでは、左サイドバーの最上部に ヘッダー、最下部に フッター のエリアがあります。設定の範囲はヘッダー・フッター・帯にすべて載っています。

先にメニューを作成する

ヘッダーを設定する前に、オンラインストア > メニュー でメニューを作っておきます。

メインメニュー：コレクションなど、ストアの主な入口です。下の階層のリンクを持つ項目は、メガメニューかドロップダウンで開きます。
補助のメニュー（任意）：「ヘルプ」「店舗」などの短いリンクです。
フッターのメニュー：利用規約、お問い合わせ、ストアについて、など。

作成したメニューは、ヘッダーセクションの メニュー、補助メニュー、アカウントのメニュー で選びます。

Kyoto を追加した直後のヘッダーは ロゴ左・メニューは中央 のレイアウトです。下にスクロールすると隠れ、上にスクロールすると再び表示されます。メガメニューにはコレクションの画像が表示されます。

メガメニューを開いたヘッダー。「Shop by craft」の下に、6 つの工芸のコレクションが画像付きで並ぶ

レイアウト

設定	選択肢	補足
並べ方	ロゴ左・メニューは中央、ロゴ左・メニューも左、ロゴ中央・メニューは左、ロゴ中央・メニューは下の段、ドロワー、ロゴ中央・メニューを左右に、ロゴ左・メニューは下の段、号の索引（中身と入れ替わる）、ロゴは左・章は右端の爪	号の索引（中身と入れ替わる）は、メニューの段をひとつのボタンにまとめ、押すとページ全体が索引に切り替わります。ロゴは左・章は右端の爪は、メインメニューのコレクションとブログへのリンクを、画面の端に番号付きのつまみ（爪）として並べます（章の爪ブロックの章の爪を表示をオンにします）。
スマホのメニューの型	ドロワー、下からのシート、画面いっぱい
メガメニューの型	列、列（画像つき）、ドロワー（PC も）、プルダウン、タブ、自動	自動を選ぶと、項目の多いメニューはメガメニュー、少ないメニューはドロップダウンで開きます。
メガメニューの開き方	ホバー、クリック
検索の置き方（PC）	アイコン、横の棒	横の棒は、画面幅が 1024 px 以上のときに検索欄を表示します。
検索の置き方（スマホ）	アイコン、下に検索窓
検索とカートの見せ方（PC）	アイコン、文字、アイコンと文字
固定表示	なし、いつも、上にスクロールで表示、常に表示（追従中は低く）、上にスクロールで表示（低く）
透明にするページ	表示しない、ホーム、ホームとコレクション、すべての人	透明になるのは、ページの最初のセクションが重ねるにしたヒーローかスライドショー、または見出しで切り替わるヒーローの場合だけです。スクロールするとヘッダーに背景色が付きます。透明のときの配色を選び、暗い画像に重なる場合は反転ロゴ（透明ヘッダー・暗い背景用）も設定してください。

詳細 > 細かく設定する には、次の設定があります。スマホのロゴの位置（始まりの側、中央）、スマホのメニューの階層の開き方（開閉式、ページを押す）、メガメニューの宣伝枠の位置、スマホのメニューに画像、メニューを開いたときの配色、メニューの文字の大きさ（小、中、大）、高さ（詰めて並べる、ふつう、縦長（高め））、下の線と影（なし、細い線、影（追従中だけ）、影、線（追従中は影も））。

このほか、検索を出す（初期設定はオン）、スマホのアイコンの並び（左右に分ける、右にまとめる）、メニューの開き方の動き（テーマ設定に従う、フェード、下へ落ちる、時間差、形が変わる、折り開く）があります。

ヘッダーのブロック

ブロック	内容
店名と添え書き	常に入っているブロックです。ロゴ画像がない場合は店名を文字で表示し、大きさ（PC）（16〜64 px）、大きさ（スマホ）（14〜40 px）、字間（0〜40 %）、大文字、アクセントの点を設定できます。店名やロゴの横に、短い添え書き（9〜16 px）も置けます。
メニューのドロワー	常に入っているブロックで、スマホ用メニューの設定です。メニューの余白（詰めて並べる、ふつう、広め。数値で決めるなら上下・左右の余白、項目の行の高さ 44〜72 px、下の階層の字下げと余白を個別に指定）、ドロワーの幅（横から出る型）、表示するメニュー、開く向き、一緒に並べる要素（補助メニュー、アカウント、国と言語、SNS のアイコン）を選べます。
章の爪	常に入っており、初期状態ではオフです。上のレイアウトの説明をご覧ください。
メガメニュー（項目ごと）	メインメニューの特定の項目に専用のメガメニューを付けます。メニューの項目に項目名を表示どおり正確に入力し、列の数（自動、2〜6）、画像、宣伝を選びます。
メガメニューの宣伝枠	メガメニュー内に置く画像付きのカードです。商品または画像、見出し、文章、リンク、幅（列。コレクションのグリッド）（1 か 2）、必要に応じてカウントダウンを設定できます。
メニューのラベル（New など）	メニューの項目の横に「New」などの小さなラベルを付けます。メニューの項目名を正確に入力してください。
ドロワーの宣伝	スマホ用メニューの下に表示する宣伝カードです。
アプリ	ヘッダーにアプリブロックを置くための場所です。
Custom Liquid	独自のコードを入れます（開発者向け）。

スマホでは、メニューは画面の横から開くドロワーになります。メインメニューの下に補助メニュー、アカウント、通貨と言語の切り替えが並びます。

アカウント

アカウントを出す をオンにすると、ログインとアカウントのボタンを表示します。表示されるのは、設定 > お客様アカウント でお客様アカウントを有効にしている場合だけです。アカウントのパネルに「注文」や「プロフィール」を表示するには、アカウントのメニュー でお客様アカウント用のメニューを選びます。

お知らせバー

ヘッダーの上に、最大 6 件のお知らせを表示できます。追加した直後は、送料無料までの残り金額とストアのお知らせの 2 件が入っています。

見せ方（PC）：止めて並べる、スライド、流れる。見せ方（スマホ） は個別に選べます。
お知らせ1件 ブロックごとに、本文（メタフィールドにつなげる）（文章、または送料無料までの残り）、リンク、アイコン、必要に応じてカウントダウンを設定します。細かく設定する では、表示を始める日時と終える日時、表示するページ、表示する端末、表示する相手（すべての人、ログインしていない人、ログインしている人）を指定できます。
文字の大きさ：小、中。固定表示：なし、いつも、PC、スマホ。
閉じるボタンを出す をオンにすると、お客様がバーを閉じられます。閉じた状態を保つ日数は 閉じたことを覚える日数（1〜30）で決めます。
入りきらない文の扱い：折り返す、または入りきらないときだけ流す。
スライド にした場合は、切り替えの秒数（3〜10 秒）、矢印を出す、切り替えの動き、次の切り替えまでの細い線 を設定できます。流れる にした場合は、流れる速さ（px/秒）（20〜200）、流れる向き、文の間の記号（なし、色の点、スラッシュ、星）、スクロールで速さと向きが変わる（大胆のときだけ） を設定できます。ホバーとフォーカスで止める は初期設定でオンです。
国・言語の切り替えを出す（PC） をオンにすると、PC ではバーに国と言語の切り替えも表示されます。

ユーティリティバー

営業時間、発送の締め時刻、電話番号などを載せる細い帯です。メニュー、SNS のアイコン、国と言語の切り替えも置けます。ヘッダーのエリアで セクションを追加 から追加します。

キャンペーンモード

期間の決まったセールや季節のイベントに使うセクションです。見せ始める日時 と 期限（YYYY-MM-DD HH:MM） を入力しておくと、その期間中は配色を 1 つ 期間中の配色 に差し替え、カウントダウン付きのキャンペーンの帯を出したり、お知らせバーを隠したり、タグ campaign の付いた商品にバッジを付けたりできます。期限を過ぎると、ストアの表示は自動で元に戻ります。開始前に見た目を確認したいときは、エディタでは期間外でもキャンペーンの見た目にする を使います。

Kyoto を追加した直後のフッターは、メニューの列 2 つ、メール登録、画面の下端いっぱいに組んだ大きな店名で構成されています。

デモストアのフッター。メニューの列が 2 つ、メール登録、下端いっぱいに組んだ大きな店名

設定	内容
メール登録	登録欄を表示します。見出し、説明、フォームの下の注記は、登録の見出し、登録の説明、登録フォームの下の注記で入力します。登録したお客様は、Shopify 管理画面にメールマーケティングを承諾した顧客として保存されます。
SNS のアイコンを出す（PC）	テーマ設定 > SNS に入力した URL を使います。
ボタンの下に決済アイコン	ストアで使える決済方法のアイコンを表示します。
国（通貨）の切り替え、言語の切り替え	ストアで複数の国や言語を扱っている場合だけ表示されます。
規約のリンク	設定 > ポリシーの各ポリシーへのリンクです。
Shop でフォロー	Shop アプリでストアをフォローするボタンです。この機能が使えるストアでだけ表示されます。
並べ方	列、中央、分割
スマホで列を開閉式にする	スマホでは各列を、押すと開く見出しにします。
トップへ戻るボタン
著作権の横の文、「Powered by Shopify」を出す	詳細 > 細かく設定するにあります。

メニューの列、文字、画像（幅 40〜400 px）、連絡先の列、ロゴの列（幅 40〜400 px）、決済手段のロゴ（独自のアイコンとラベル）、Custom Liquid、アプリブロック、大きな店名 を追加できます。

大きな店名 ブロックは、ページの下端いっぱいに店名を大きく組みます。大きさ は画面幅に対する割合（6〜30 %）で指定し、大きさの上限（60〜480 px）で最大値を決めます。ほかに字間、揃え、色、動きを設定できます。長い店名は単語の区切りで折り返します。

スマホの下部ナビ（タブバー）

スマホとタブレットで、親指の届きやすい画面下部に最大 5 つのタブを固定表示します。フッターのエリアで セクションを追加 から追加します。タブ1つ ごとに 押したとき の動作（リンク、検索を開く、メニューを開く、カート、アカウント、目次）、アイコン、ラベルを設定します。ラベルの出し方 は下、今のタブだけ、なしから選べます。下にスクロールしている間や商品ページで隠すこともできます（商品ページには追従する購入バーがあるためです）。