コンテンツにスキップ

アカウントアイコン

柔軟なヘッダーアカウントアイコンで、顧客がすばやくアカウントにアクセスできるようにします。

Account iconブロックは、ヘッダーまたはナビゲーション領域に顧客のアカウントへのショートカットを追加します。これを使用すると、顧客がサインインしたりアカウントを開いたりするための分かりやすい導線を提供でき、デスクトップとモバイルで配置を個別に調整できます。ブロックがテーマのセクションにどのように組み込まれるかについてのより広い概要は、セクションとブロックに関するShopifyドキュメントを参照してください。

これらの設定では、アイコンがブロックに割り当てられたスペース内でどのように表示されるかを制御します。これらは、ブロックが利用可能なスペースを埋めるように設定されている場合や、全幅の行に配置されている場合に最も重要です。

ブロックが余白の少ない、密にまとまった行にある場合、配置の変更は目立ちにくいことがあります。ヘッダーのレイアウトが画面サイズによって変わる場合は、デスクトップとモバイルの配置を個別に設定してください。

これらの設定では、ブロックがナビゲーションのレイアウト内のどこに表示されるかを決定します。左、中央、右の他の項目と一緒に配置したり、メインの行の下にある全幅の行へ移動したりできます。

アカウントのショートカットを独立して表示したい場合は、特にモバイルの積み重ねヘッダーで、全幅を使用します。デスクトップでは、利用可能なスペースを埋めると、ブロックを残りの行幅いっぱいに広げられるため、配置コントロールがより役立ちます。テーマエディターでの操作を復習したい場合は、テーマエディターに関するShopifyドキュメントを参照してください。

全幅への配置は、ブロックを独自の行に移動することでヘッダーの構造を変更します。有効にした後は、デスクトップとモバイルの両方のレイアウトを確認してください。

行の配置動作についての詳しいガイダンスは、ナビゲーションのレイアウト設定を参照してください。

表示コントロールを使用して、デバイスサイズごとにブロックを表示または非表示にします。これは、デスクトップでは1つの位置に、モバイルでは別の位置にアカウントのショートカットを置きたい場合に便利です。

1つの配置をすべての環境で使うのではなく、特定のデバイスサイズでこのブロックを非表示にし、ヘッダー内の別の場所にアカウントアクセスを表示できます。共通のガイダンスは、表示設定を参照してください。

  1. ユーティリティアクションの近くに配置します。 アカウントアイコンは、検索、カート、メニューのコントロールなど、他のヘッダーツールと並べると通常最も効果的です。
    1. ショートカットは見つけやすくして、顧客がメインナビゲーションを探さなくてもサインインページやアカウントページに移動できるようにします。
    2. 他のユーティリティアクションから離して配置する場合は、新しい配置にも意図が感じられるようにしてください。
  2. 両方の画面サイズを確認します。 デスクトップとモバイルのレイアウト設定は別々なので、配置を変更した後は必ず両方をプレビューしてください。
    1. デスクトップではバランスよく見える配置でも、コンパクトなモバイルヘッダーではかなり違って見えることがあります。
    2. デバイスサイズごとに異なるアカウントアクセス方法を使う場合は、同時に表示設定も確認してください。
  3. 全幅は意図を持って使用します。 専用の行は見やすさを向上させることがありますが、ヘッダーが高く見えたり、分断された印象になったりすることもあります。
  4. レイアウトと表示を慎重に組み合わせます。 モバイルヘッダーがデスクトップとは異なる動きをする場合は、片方のデバイスでブロックを非表示にし、そのデバイスにはより適したアカウントアクセス方法を使ってください。
  5. 追加スペースは役立つ場合のみ使用します。 利用可能なスペースを埋める設定は、単に幅を広げるためではなく、よりきれいな配置や行のバランスを必要とするときに最も効果的です。
    1. ブロックが行全体に広がると、小さな配置の変化にも気づきやすくなります。
    2. すでにヘッダーがコンパクトな場合は、ブロックを自然な幅のままにしておくことで、よりすっきりしたレイアウトを保てることがあります。