コンテンツにスキップ

ヘッダー

店舗のすべてのページの一番上に表示されるヘッダーです。ロゴ、メニュー、検索、アカウント、カートの標準機能に加えて、Hellostore 独自の画像付きメニュー(リンク先のコレクション画像が自動で並ぶメガメニュー)を組み合わせられます。

分類: Shopify 標準セクション(Hellostore 拡張を含む)

ヘッダーは最初からすべてのページに置かれています。テーマエディタ(管理画面の「オンラインストア → テーマ → カスタマイズ」)でどのページを開いても、上部の**「ヘッダー」**を選ぶと設定できます。

  • ロゴの位置: ロゴを左・中央・中央上のどこに置くかです
  • メニュー: ヘッダーに表示するナビゲーションメニューです。メニューの中身は管理画面の「コンテンツ → メニュー」で編集します
  • メニュータイプ: パソコン画面でのメニューの開き方です。「ドロップダウン」は項目の下に小さく開きます。「メガメニュー」は横に大きく開き、画像付きメニューを使うときはこちらを選びます。「ドロワー」はパソコンでもハンバーガーボタンの開閉にします
  • メニューの配色: メニューを開いたときのパネルの配色です
  • 常時表示のヘッダー: スクロールしてもヘッダーを画面上部に残すかどうかです
  • 区切り線: ヘッダーの下に線を引くかどうかです
  • 言語セレクター / 国・地域セレクター: 多言語・多通貨の切り替えボタンを表示します(表示にはストア側の言語・市場設定が必要です)
  • 余白(上・下・下マージン): ヘッダーまわりの広さです
  • 文字の大きさを整える: ヘッダー内の文字の大きさと字間を整えます。初期状態ではオフです。
  • アイコンの動き: 「なし」と「控えめ」から選びます。「控えめ」にすると、ヘッダーのアイコンにマウスを乗せたときに少し動きます。テーマ設定の「アイコンの種類」が「線のアイコン」のときだけ効きます。

リンク先のコレクションや商品の画像が自動で並ぶメニューです。「Shop by silhouette」「商品カテゴリから探す」のような、見て選べる案内に使います。画像のアップロードは不要で、リンク先の画像をそのまま表示します。

ヘッダーの「ブロックを追加」から**「画像付きメニュー」**を選んで追加します。

  • メニュー項目の位置: 画像付きにするヘッダー最上位項目の位置を、1から数えて指定します。対象の項目には子リンクが必要です
  • 画像リンクメニュー: カードとして並べるリンクの元になるメニューを選びます。コレクションまたは商品のリンクを4〜6件含むメニューを選んでください
  • 子リンクを画像カードにする: 画像リンクメニューが空のとき、この項目の子リンクを画像カードで並べます(既定: オフ)
  • 画像比: カードの画像の縦横比です。標準 / 画像に合わせる / 縦長(4:5) / 正方形から選びます(既定: 標準)
  • 画像の収め方: 画像を枠に収める方法です。全体を表示 / 枠いっぱいに表示から選びます(既定: 全体を表示)
  • 見出し: パネルに表示する見出しです
  • モバイルドロワーにリンクを直接表示: スマートフォンのメニューで、親メニューを開く操作を省き、この枝を最初の画面に表示します
  • 案内リンクのラベル: パネルの下部に表示する補助リンクの文言です(例: 迷ったら診断へ誘導するリンク)
  • 案内のリンク先: 案内リンクの移動先です