ページ一覧13

Shiori · Docs

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

日本語

ヘッダー

  • メインメニュー: 3階層まで。大きい画面ではプルダウン、スマホでは左から出るメニューになります
  • ロゴの位置(大きい画面で中央か左)、スクロールしてもヘッダーを表示、下の罫線、配色
  • 右側のアイコン: 検索・アカウント・カート(件数つき)
  • アプリのブロックを足すと、アイコンの並びに入ります(お気に入りのハートなど。「09. アプリとの連携」を参照)
  • スマホでは、左にメニューと検索、中央にロゴ、右にアカウントとカートが並びます

お知らせバー

  • ヘッダーの上の帯です。お知らせを複数入れると5秒ごとに切り替わります(マウスを乗せるかフォーカスすると止まり、動きを減らす設定の端末では切り替わりません)
  • お知らせごとにリンクを付けられます

フッター

  • ブロック: メニュー・文章・メールマガジン登録・アプリ
  • 設定: SNS のアイコン、国・地域の切り替え、言語の切り替え、Shop でのフォロー、ポリシーへのリンク、支払い方法のアイコン、「Powered by Shopify」、上の罫線、配色
  • 国・地域と言語の切り替えは、お店で複数の国や言語を有効にしているときに出ます
  • 特定商取引法に基づく表記などは、管理画面のポリシーに書くとポリシーへのリンクに並びます

English

  • Main menu: up to three levels. On large screens it opens as dropdowns, and on phones it opens as a drawer from the left
  • Logo position (center or left on large screens), keep the header visible while scrolling, bottom rule, and color scheme
  • Icons on the right: search, account, and cart (with item count)
  • App blocks added to the header appear among the icons (for example, a wishlist heart; see 09. 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

Announcement bar

  • The strip above the header. With more than one announcement, they rotate every five seconds. 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 can have a link
  • Blocks: menu, text, newsletter signup, and apps
  • Settings: social media icons, country/region selector, language selector, Follow on Shop, policy links, payment icons, "Powered by Shopify", top rule, and color scheme
  • 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