Miyabi
サポート / SupportDocs
ページ一覧14

Miyabi · Docs

ヘッダー・フッター / Header and footer

日本語

ヘッダー

  • 並べ方: メニューが左・ロゴが中央／ロゴが左・メニューが中央／ロゴが中央・メニューが下
  • メニュー: 3階層まで。2階層だけの項目はプルダウン、3階層目がある項目はメガメニューで開きます。マウスでは項目に乗せると開き、タッチ操作の画面では1回目のタップで開きます
  • メガメニューの並べ方: 「列で並べる」か「タブで切り替える」。タブは2階層目のリンクを左に並べ、選んでいる項目の下の階層を右に出します。どちらも最後に「（項目名）をすべて見る」のリンクが付きます
  • ヘッダーを固定する（固定しない・常に固定・上にスクロールしたときだけ）、画面の幅いっぱい、下に罫線、配色
  • 右側のアイコン: 検索・アカウント・カート（件数つき）。大きい画面では国・地域と言語の切り替えも出せます
  • アプリのブロックを足すと、アイコンの並びに入ります（お気に入りのハートなど。「10. アプリとの連携」）
  • スマホでは、左にメニューと検索、中央にロゴ、右にアカウントとカートが並びます

メガメニューに画像と商品を出す

  • ヘッダーに「メニューの画像」か「メニューの商品」のブロックを足し、「メニューの項目」にメニューの1階層目の項目名をそのまま入れます（例: Women）。その項目のメガメニューに、画像（見出し・文章・リンク付き）や選んだ商品が並びます
  • 3階層目が無い項目でも、このブロックを足すとメガメニューになります
  • 「メニューの商品」の商品は、スマホのメニューでもその項目の下に横に並びます

透明なヘッダー

  • 「トップページでは最初のセクションに重ねる」をオンにすると、トップページの一番上の画像や動画のバナーにヘッダーを重ねます。重ねたときの配色を選べます
  • 重ねている間のロゴは、テーマ設定の「画像の上のロゴ」です。スクロールするか、マウスを乗せるかメニューを開くと、いつもの配色に戻ります

スマホのメニュー

  • 左から出るメニューで、階層を開いて選びます。各階層に「すべて見る」のリンクが付きます
  • 下にアカウント（ログイン）、国・地域と言語の切り替え、SNS のアイコンが並びます

検索

  • 検索のアイコンを押すと、画面の上から検索が開きます。入力中の候補は「06. コレクションと検索」
  • 人気のキーワード: カンマで区切って入れると、検索を開いたときに言葉のリンクとして並びます

告知バー

  • ヘッダーの上の帯です。告知は6つまで。2つ以上入れると、決めた間隔（3〜10秒）で自動で切り替わり、矢印でも切り替えられます。マウスを乗せるかフォーカスすると止まり、動きを減らす設定の端末では自動で切り替わりません
  • 告知ごとに: 文章・リンク・カウントダウンの終わり（日本時間で「2026-12-31 23:59」の形。文章の後ろに残り時間が出て、終わるとその告知を隠します。テーマエディターでは隠しません）・出すページ（すべて・トップ・商品・コレクション）・端末（すべて・パソコンだけ・スマホだけ）

スマホの下部メニュー

  • 「スマホの下部メニュー」セクションをヘッダーかフッターに足すと、スマホの画面の下に固定のメニューが出ます（項目は5つまで）。パソコンでは出ません
  • 項目ごとに: 押したときの動作（トップページへ移動・リンク先へ移動・検索を開く・メニューを開く・カートを開く・アカウントへ移動）、アイコン（動作に合わせる・ホーム・検索・メニュー・カテゴリー・アカウント・カート・ハート・店舗・画像を選ぶ）、文字（空なら動作とアイコンに合った名前）
  • 検索・メニュー・カートは、ヘッダーと同じものが開きます。カートの出し方が「ページ」のときはカートのページへ移ります
  • 文字を出す、下にスクロールしている間は隠す、上に罫線
  • 商品ページの「カートに入れる」バーは、このメニューの上に出ます

フッター

  • ブロック: メニュー（見出しが空ならメニューの名前）・メルマガ登録・SNS・アプリ。見出しや文章、グループなどのブロックも置けます
  • 最下段: 国・地域の切り替え、言語の切り替え、ポリシーのリンク、「Shop でフォロー」（Shop Pay を使っているお店）、支払い方法のアイコン、「Powered by Shopify」
  • 大きな店名: 一番下に店名を大きく出します。文字は変えられます（空ならストア名）
  • 国・地域と言語の切り替えは、お店で複数の国や言語を有効にしているときに出ます
  • 特定商取引法に基づく表記などは、管理画面のポリシーに書くとポリシーのリンクに並びます

English

  • Layout: menu left with the logo in the center, logo left with the menu in the center, or logo in the center with the menu below
  • Menu: up to three levels. Items with two levels open as dropdowns, and items with a third level open as mega menus. With a mouse, menus open on hover. On touch screens, they open on the first tap
  • Mega menu layout: columns or tabs. Tabs list the second-level links on the left and show the links under the one in focus on the right. Both end with a View all link for that item
  • Sticky header (off, always, or when scrolling up), full width, bottom border, and color scheme
  • Icons on the right: search, account, and cart (with item count). On large screens, you can also show the country/region and language pickers
  • App blocks added to the header appear among the icons (for example, a wishlist heart; see 10. Working with apps)
  • On phones, the menu and search are on the left, the logo is in the center, and the account and cart are on the right

Images and products in mega menus

  • Add a Menu image or Menu products block to the header, and type the top-level menu item in Menu item exactly as it appears (for example, Women). The image (with a heading, text, and link) or the products you choose appear in that item's mega menu
  • These blocks also turn an item without a third level into a mega menu
  • Products from a Menu products block also appear in a row under that item in the phone menu

Transparent header

  • Turn on Over the first section on the home page to place the header over the image or video banner at the top of the home page. You can choose the colors over the section
  • While the header sits over the banner, it uses Logo for images from theme settings. It returns to its usual colors when the shopper scrolls, points at it, or opens a menu

Phone menu

  • A drawer opens from the left, and shoppers open each level to find a link. Each level has a View all link
  • Account (log in), the country/region and language pickers, and social media icons appear at the bottom
  • The search icon opens search from the top of the screen. For suggestions while typing, see 06. Collections and search
  • Popular searches: words separated by commas appear as links when search opens

Announcement bar

  • The strip above the header, with up to six announcements. With more than one, they rotate at the interval you set (3 to 10 seconds), and arrows let shoppers switch them. Rotation stops while the pointer is over the bar or it has focus, and it doesn't rotate on devices set to reduce motion
  • Each announcement has text, a link, a countdown end (Japan time, as 2026-12-31 23:59; the time left appears after the text, and the announcement is hidden when it ends, except in the theme editor), the pages to show it on (all, home, product, or collection pages), and the devices (all, desktop only, or phones only)

Mobile bottom navigation

  • Add the Mobile bottom navigation section to the header or footer to fix a menu to the bottom of the screen on phones (up to five items). It doesn't appear on desktops
  • Each item has an action (Go to the home page, Go to a link, Open search, Open menu, Open cart, or Go to account), an icon (Match the action, Home, Search, Menu, Categories, Account, Cart, Heart, Store, or Custom image), and a label (when blank, a name that fits the action and icon)
  • Search, menu, and cart open the same drawers as the header. When the cart type is Page, cart goes to the cart page
  • Show labels, hide while scrolling down, and top border
  • The add-to-cart bar on product pages appears above this navigation
  • Blocks: menu (the menu name is used when the heading is blank), email signup, social media, and apps. You can also add blocks such as headings, text, and groups
  • Bottom bar: country/region selector, language selector, policy links, Follow on Shop (for stores that use Shop Pay), payment icons, and "Powered by Shopify"
  • Large shop name: shows your store name in large type across the bottom. You can change the text (the store name is used when blank)
  • The country/region and language selectors appear when your store has more than one country or language enabled
  • Policies you write in your Shopify admin, such as the legal notice required in Japan (Specified Commercial Transactions Act), appear in the policy links