FROM CACHE - jp_header

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

8910
遊覧客
41 0 2

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

 

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

PC            : ヘッダー内 

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

 

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

 

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

 

 

2件の返信2

Qcoltd
Shopify Partner
1051 431 418

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

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

 

リダイレクト手順

  1. 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
  2. コード編集画面の「ファイルを検索」エリアに、『header.liquid』と入力しソートされたファイルを開きます。
  3. header.liquidファイル内で、『</header-drawer>』を検索します。
  4. 『</header-drawer>』と『{%- endif -%}』の間に下記コードを追加してください。
    <style>から</style>部分はアカウントアイコンの位置調整のために記載しています。
<style>
  .sp_account {
    position: absolute;
    left: 50px;
    top: 17px;
  }
  @media screen and (min-width: 750px) {
    .sp_account {
      display:none !important;
    }
  }
</style>
<a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="sp_account header__icon header__icon--account focus-inset">
  {% render 'icon-account' %}
  <span class="visually-hidden">
    {%- liquid
      if customer
        echo 'customer.account_fallback' | t
      else
        echo 'customer.log_in' | t
      endif
     -%}
  </span>
</a>

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
8910
遊覧客
41 0 2

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

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

 

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