テーマエディタで: カスタマイズ›ヘッダー›ヘッダー
ヘッダー
ノッチの中のロゴ、メニュー、検索・アカウント・カートのアイコン。スマートフォンではアイコンがコインのように浮かび、パソコンではメニューがバーに並びます。
背景が透明なロゴをアップロードし、「ロゴの透明な余白をトリミング」を使うとノッチの中央に収まります。
設定
ロゴ
- ロゴ画像
- 画像空欄の場合、ストア名がテキストで表示されます。
- デスクトップでのロゴの幅
- スライダー(100〜300 px)デフォルト: 190 px透明な余白をトリミングした後の、ロゴの表示部分の幅。
- デスクトップでのロゴの最大の高さ
- スライダー(40〜160 px)デフォルト: 65 px縦に長いロゴは、この高さまで縮小されます。高さは表示部分の高さです。
- スマートフォンでのロゴの幅
- スライダー(80〜200 px)デフォルト: 100 pxスマートフォンとタブレットでのロゴの表示部分の幅。幅の狭いスマートフォンでは、横のアイコンの余白を確保するため、必要に応じて小さくなります。
- スマートフォンでのロゴの最大の高さ
- スライダー(24〜44 px)デフォルト: 34 pxスマートフォンとタブレットでは、縦に長いロゴはこの高さまで縮小されます。バーの高さは48pxで固定のため、最大44です。
- スマートフォンでのノッチ内のロゴの位置
- スライダー(-8〜12 px)デフォルト: 4 px正の数でロゴが下に、負の数で上に移動します。0:ヘッダー行の中央。
- デスクトップでのノッチ内のロゴの位置
- スライダー(-8〜12 px)デフォルト: 0 px正の数でロゴが下に、負の数で上に移動します。0:ヘッダー行の中央。
ロゴの透明な余白をトリミング
- 上からトリミング
- スライダー(0〜40 %)デフォルト: 17 %
- 下からトリミング
- スライダー(0〜40 %)デフォルト: 22 %
- 左からトリミング
- スライダー(0〜40 %)デフォルト: 7.5 %
- 右からトリミング
- スライダー(0〜40 %)デフォルト: 3.5 %
ロゴ画像には通常、ロゴマークの周りに透明な余白があります。画像の各辺からカットする量(パーセント)を設定してください。上記のロゴサイズは、カット後の部分を基準にします。すでにぴったりトリミングされている画像の場合は、すべての値を0のままにしてください。
アイコン
- 検索ボタンを表示する
- オンまたはオフデフォルト: オン
- 検索欄に入力表示される単語
- テキストスマートフォンで検索を開くと、これらの単語が検索欄に順番に入力表示されます。カンマで区切ってください。空欄にすると、メインメニューのリンク名が使用されます。 入力前のアイデアとしても表示されます。
- 入力前
- 選択: アイデアと最近の検索、アイデアのみ、最近の検索のみ、なしデフォルト: アイデアと最近の検索アイデアは検索欄の単語です。最近の検索は各お客様のブラウザに保存された本人の検索です。
- アカウントメニュー
- メニューShopifyのアカウント画面でログインの下に表示されるリンクです。「顧客アカウントのメインメニュー」を選ぶと、アカウントページと同じリンクになります。
- ヘッダーのコインのサイズ
- スライダー(36〜48 px)デフォルト: 40 pxスマートフォンとタブレットのヘッダーのコインの直径。パソコンのヘッダーにはコインがなく、アイコンは線としてストリップに並びます。コイン内のアイコンは直径の半分です。
- 追加時にバッグが反応する
- オンまたはオフデフォルト: オン商品がカートに追加されると、バッグが少し沈んでつぶれ、元に弾みます。カート内で数量を変更したときは反応しません。
パソコンのヘッダー
- パソコンのメニュースタイル
- 選択: ライブラリ:すべてのリンクを列で、ルーム:グループを1つずつ、ギャラリー:グループごとに画像デフォルト: ライブラリ:すべてのリンクを列で帯の下のパネルがメニュー項目のリンクをどう表示するか。通常のメニューから作られ、3階層まで対応します。
- メニューにコレクション画像を表示
- オンまたはオフデフォルト: オンライブラリとルームでは、コレクション画像がリンクの横に表示され、ポインターの下のリンクに合わせて切り替わります。ギャラリーは常に画像を表示します。
- メニューパネルの色
- 選択: 白(検索と同じ)、ダーク、カスタムカラーデフォルト: 白(検索と同じ)
- パネルの色
- 色文字色は自動で選ばれます:明るい色には濃い文字、暗い色には明るい文字。
スマートフォンのフローティングメニュー
- スクロール時のフローティングメニュー
- 選択: オフ、スマートフォンデフォルト: スマートフォンスマートフォンでヘッダーが画面外に出ると、同じ4つのアイコンが画面下部の親指の近くにピル型で浮かびます。メニュー・検索・カートはページ上部と同じように上から開きます。チャットアプリ:その上に表示されるよう、設定で下余白を90px以上にしてください。
- フローティングメニューの形
- 選択: フレームからのタブ、フローティング、上が狭い、フローティング、上が広いデフォルト: フレームからのタブタブ:フレームの下端からロゴのノッチの形で立ち上がり、フレームの色になります。フローティングの形は下のメニューの色を使います。
- フローティングメニューの色
- 選択: ヘッダーのコインと同じ、ダーク、ライトデフォルト: ヘッダーのコインと同じ「ヘッダーのコインと同じ」はヘッダーのコインの色に従います。暗い枠なら暗く、白い枠なら明るくなります。
- 下部メニューのアイコンの色
- 色スマートフォンのフローティングメニューのアイコン。空欄:メニューのトーンの色。
- 下部メニューのリングの色
- 色各アイコンを囲む細いリング(塗りなし)。開いたアイコンはこの色で塗られます。空欄:メニューのトーンの色。
- フレームからの距離
- スライダー(0〜24 px)デフォルト: 4 pxメニューと下のフレームとの間隔。ブラウザのバーがフレームを覆っているときはバーとの間隔です。上下どちらにスクロールしても同じです。初期値:4px。
メニュー
- メインメニュー
- メニューメニュー項目は「コンテンツ」>「メニュー」で編集します。
- スマートフォンのメニュー上部の小見出し
- テキスト空欄にすると、デフォルトが使用されます。
- メンバーズクラブボタンのテキスト
- テキストスマートフォンのメニュー下部のボタン。空欄にすると、デフォルトが使用されます。
- メニュー内の言語と国の選択
- オンまたはオフデフォルト: オンクラブボタンの上に表示されます。言語または国が複数ある場合にのみ表示されます。
- 帯の言語切り替え
- オンまたはオフデフォルト: オンパソコンでは上部の帯の検索アイコンの前に言語切り替えを表示します。スマートフォンとタブレットではメニュー内にあります。
- 言語の横に国旗を表示
- オンまたはオフデフォルト: オン各言語の横に小さな国旗を表示します。言語は国ではないため、表示しないことを好むストアもあります。
- メニュー内のソーシャルネットワーク
- オンまたはオフデフォルト: オンフッターと同様に、クラブボタンの下に塗りつぶしアイコンが並びます。リンクと順序は、テーマ設定の「ソーシャルメディア」で設定します。Facebook、Instagram、TikTok、YouTube、Xはリンクを追加するまでシンプルなアイコンとして表示され、その他のSNSはリンクがある場合のみ表示されます。
- メニューの色
- 色デフォルト: #FFFFFFお好きな色を選べます。テキストとボタンは自動で調整され、暗い色の上ではテキストがクリーム色になります。デフォルト:枠と同じ白。
- 背景のスタイル
- 選択: 単色、ライトステージデフォルト: 単色ライトステージ:上から柔らかな光が差し、下に向かって落ち着いていきます。選んだ色から作られます。明るい色では上部が白に、暗い色では暗いステージになります。
- 光の色
- 色上部中央からのやわらかな光。空欄の場合:白。
- クラブボタンの色
- 色メニュー下部のボタン。空欄の場合:メニューの色。テキストは色に合わせて明るくまたは暗くなります。
- メニューの背景画像
- 画像任意。画像は、メニューが最初に開かれたときにのみ読み込まれます。画像の上にはメニューの色のベールが重なります。
- 画像に重ねるベールの濃さ
- スライダー(0〜100 %)デフォルト: 80 %テキストが読みやすいよう、メニューの色が画像をどの程度覆うか。0にすると画像がそのまま表示されます。
エディタの表示とここの内容が違う場合は、お知らせください。ガイドを修正します。
