FROM CACHE - jp_header

ヘッダーアイコンのカスタマイズについて

8910
遊覧客
41 0 2

現在使っているテーマ「Dawn」のVerアップに伴い、再度質問させて頂きます。

 

ヘッダーアイコンの虫眼鏡検索アイコンのカスタマイズ方法を教えて頂きたいです。

・通常時

・虫眼鏡検索アイコンを押した後に現れる、検索バーに表示される虫眼鏡検索アイコン

・検索結果で表示される虫眼鏡検索アイコン

 

部分的な回答でも問題ないです。ご協力頂ける方がいましたら、よろしくお願いします。

 

 

(前Verで教えて頂いた対応方法を記述しておきます。header.liquidの中身がアップデートで変わった?ことで、対象のコードが見つからなくなりました、、)

  1. header.liquid」を検索し表示
  2. 以下のコードを置換

    <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation">

      <use href="#icon-search">

    </svg>

    <a href="#icon-search">
      <img  src="コピーした対象画像のリンク" class="modal__toggle-open icon icon-search" id="icon-size"  >

    </a>

  3. 変更が終わったら保存

 

3件の返信3

Qcoltd
Shopify Partner
1056 432 419

@8910 

 

ご質問いただいている、Dawnヘッダーの虫眼鏡検索アイコンを変更する件ですが、Dawn バージョン10.0.0より『header.liquid』から『header-search.liquid』にコードの格納場所が変更となっております。

 

header-search.liquid』の以下のコードを置換

 

<svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false">
  <use href="#icon-search">
</svg>

 

 

<a href="#icon-search">
  <img src="コピーした対象画像のリンク" class="modal__toggle-open icon icon-search" id="icon-size">
</a>

 


ご参考まで。
(キュー小坂)

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

ありがとうございます!

対応できました。

他にもVerアップデートによって対応の仕方が分からなくなったカスタマイズがありまして、、

もしお時間ありましたらご回答頂けますと幸いです。

 

ブラウザからサイトを見た時、アカウントアイコンをヘッダー内に表示させる

前Ver時の質問スレッド↓

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%82%A2%E3%82%AB%E3%82%A6%...

 

よろしくお願いします!

 

Qcoltd
Shopify Partner
1056 432 419

@8910 

 

アカウントアイコンをヘッダー内に表示させるの件ですが、

こちらは、header.liquidより『{%- if section.settings.logo_position != 'middle-center' -%}』を検索いただき、その上の行に下記の記事でご提示したコードを追加いただければ、スマホサイズの際ハンバガーメニューの右側にアカウントアイコンが表示するかと思います。

 

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%82%A2%E3%82%AB%E3%82%A6%...

 

ご参考まで。
(キュー小坂)

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