アカウントアイコンの表示位置について

日本語 ディスカッション 技術的なQ＆A

Topic summary

Dawnテーマでアカウントアイコンの表示位置をカスタマイズする方法についての質問と回答。

質問内容:

  • ブラウザ(スマートフォン)でサイトを閲覧時、アカウントアイコンをハンバーガーメニュー内ではなくヘッダー内に表示させたい
  • デフォルトではハンバーガーメニュー内に配置されている

解決方法:

  1. 管理画面から「オンラインストア > テーマ > コードを編集」を開く
  2. header.liquidファイルを検索して開く
  3. </header-drawer>を検索し、その直後に特定のLiquidコードを追加
  4. アカウントアイコンのレンダリングコードと位置調整用のスタイルタグを含むマークアップを挿入

結果:
質問者は提供された手順で変更に成功し、解決済み。

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

ブラウザからサイトを見た時、アカウントアイコンをヘッダー内に表示させることは可能でしょうか？

テーマ「Dawn」では、デフォルトでアカウントアイコンの表示位置が以下に設定されているかと思います。

PC ： ヘッダー内

ブラウザ ：ハンバーガーメニュー内

ブラウザから見た時、できればハンバーガーアイコン隣に配置したいです。

ご協力頂ける方がいましたら、よろしくお願いします！

2

アカウントアイコンの表示位置の件ですが、ご質問いただいている「ブラウザ」はスマートフォンでサイトを見た際の見た目という認識で回答させていただきます。

ハンバーガーメニューの中にあるアカウントアイコンは変更していませんので、そのまま表示されます。

リダイレクト手順

  1. 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
  2. コード編集画面の「ファイルを検索」エリアに、『header.liquid』と入力しソートされたファイルを開きます。
  3. header.liquidファイル内で、『』を検索します。
  4. 『』と『{%- endif -%}』の間に下記コードを追加してください。から部分はアカウントアイコンの位置調整のために記載しています。 

  {% render 'icon-account' %}
  
    {%- liquid
      if customer
        echo 'customer.account_fallback' | t
      else
        echo 'customer.log_in' | t
      endif
     -%}

ご参考まで。

(キュー小坂)

1 Like
3

お忙しい中ご返信ありがとうございます！

変更出来ました！いつも助かってます、、

また何かありましたらよろしくお願いします。