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

[8910]

※未解決ですので再度質問させて頂きます。

ご協力頂ける方がいましたらご回答よろしくお願いします。

ヘッダーの下記の要素を自分で用意したロゴにカスタマイズすることは可能でしょうか？

テーマはDawnを使用しています。
・買い物カゴ
・検索虫眼鏡ロゴ

・アカウントロゴ
・ハンバーガーメニューロゴ

もし可能でしたら、具体的な手順をご教示頂けると嬉しいです。
よろしくお願いします。

[Qcoltd]

ご質問いただいている、ヘッダーアイコンのカスタマイズについてですが、アイコンの変更方法を記載させていただきます。

配置するアイコンは管理画面 > 設定 > ファイルにアップした画像を使用します。

前提作業

管理画面 > 設定 > ファイルでアップロードした画像の右側にある鎖マークをクリックし画像のリンクをコピーしてください。

買い物カゴ変更方法（カートに商品が入っている時用）

1. 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
2. ファイル検索にて「icon-cart.liquid」を検索し表示してください。
3. 添付画像1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。
   
   <img  src="前提作業でコピーした対象画像のリンクに置き換え"  class="icon icon-cart" id="icon-size" >
   
4. 変更が終わったら保存ボタンを押してください。
   

買い物カゴ変更方法（カートが空の時用）

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-cart-empty.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。
   <img  src="前提作業でコピーした対象画像のリンクに置き換え"  class="icon icon-cart-empty" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。

アカウントロゴ変更方法

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-account.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。
   <img  src="前提作業でコピーした対象画像のリンクに置き換え"  class="icon icon-account" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。

ハンバーガーメニューロゴ変更方法

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-hamburger.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。
   <img  src="前提作業でコピーした対象画像のリンクに置き換え"  class="icon icon-hamburger" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。

検索虫眼鏡ロゴ変更方法

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. 変更が終わったら保存ボタンを押してください。

CSSを設定しなくてもアイコンが想定通りのサイズで表示されていましたら、下記は不要となります。

CSS追加方法

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「base.css」を検索し表示してください。
2. ファイルの先頭に下記を追加してください。
   

   #icon-size {

     width: 2rem;

     height: 2rem;

   }

3. 変更が終わったら保存ボタンを押してください。

※アイコンサイズを変更する場合は「2rem」の2部分をお好みのサイズに変更ください。

ご参考まで。

(キュー小坂)

[8910]

 ご回答ありがとうございます！

検索虫眼鏡アイコン以外は変更することができました。

大変感謝しております。

検索虫眼鏡アイコンについてですが、記載の通り編集しましたがサイト上に変化がないです。

(他のアイコンの表示サイズが問題なかったのでCSSの追加はしていません。）

元々の構文はコメントアウトしている状態です。

大変お忙しい中恐縮なのですが、もし他の解決策をお知りでしたらご教示下さい。

以上、よろしくお願いします。

[Qcoltd]

@8910様

虫眼鏡アイコンの対象箇所ですが、修正箇所を明確に指示できておらず申し訳ございません。

修正箇所は先の添付ファイルにございます524行目あたりが、今回ご希望いただきました修正の対象箇所となりますので、ご変更いただきご確認いただければと思います。

ご参考まで。

(キュー小坂)

[8910]

お忙しい中ご回答ありがとうございます。

修正箇所をこちらが間違えていただけでした。

更新してみたところ、無事変更することができました！ありがとうございます。

追加の質問になってしまい大変申し訳無いのですが、下記についてももしご存知でしたらご教示お願いします。

①虫眼鏡をタップした後の、検索窓画面で表示させるアイコンも同じものに揃えたいです。

②上記の最右端の×マーク、モバイルでハンバーガーアイコンをタップした後に表示される×マークも変更したいです。

どちらかのみの回答でも構いません。

お忙しいとは思いますが、ご回答よろしくお願いします。

[Qcoltd]

@8910様

追加でご要望いただきました、アイコン部分の変更方法を記載させていただきます。

タップした後に表示される検索窓内の虫眼鏡アイコン部分

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「header.liquid」を検索し表示してください。
2. 562行目あたりにある（下記コード）がタップした後に表示される検索窓内の虫眼鏡アイコン部分になります。
   <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
     <use href="#icon-search">
   </svg>
   それを下記に変更してください。
   <img src="前提作業でコピーした対象画像のリンクに置き換え" class="icon icon-search" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。

タップした後に表示される検索窓内の×アイコン部分

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「header.liquid」を検索し表示してください。
2. 584行目あたりにある（下記コード）が検索窓内の虫眼鏡アイコン部分になります。
   <svg class="icon icon-close" aria-hidden="true" focusable="false" role="presentation">
     <use href="#icon-close">
   </svg>
   それを下記に変更してください。
   <img src="前提作業でコピーした対象画像のリンクに置き換え" class="icon icon-close" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。

ハンバーガーアイコンをタップした後の×アイコン部分

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-close.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。
   <img src="前提作業でコピーした対象画像のリンクに置き換え" class="icon icon-close" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。
   
   

下記は、Dawnテンプレートで変更を加えていない場合、ヘッダーで検索を行なった際の検索結果画面の虫眼鏡アイコン部分となります。

検索結果画面の検索窓内虫眼鏡アイコン部分

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「main-search.liquid」を検索し表示してください。
2. 112行目あたりにある（下記コード）が検索窓内の虫眼鏡アイコン部分になります。
   <svg class="icon icon-search">
     <use xlink:href="#icon-search">
   </svg>
   それを下記に変更してください。
   <img src="前提作業でコピーした対象画像のリンクに置き換え" class="icon icon-search" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。

[8910]

ありがとうございます！

とても分かりやすい上に、返信が早くて驚きました！

無事更新できました！

何度も追加で質問してしまい申し訳ないのですが（今回の質問で最後にします）、インスタグラムアイコンも変更できるのでしょうか？変更したい箇所は２つです。

①モバイルのメニュー欄のログインボタン下

②ホーム画面のフッター内（クレジットカードアイコン上）

大変お忙しいとは思いますが、もしお時間あれば教えて頂けますと嬉しいです。

よろしくお願いします。

[Qcoltd]

@8910様

Instagramアイコンは共通ファイルになっていますので、

ご質問いただいている①②共に、下記ファイルを修正していただければ変更されます。

Instagramアイコン部分

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-instagram.liquid」を検索し表示してください。
2. 1〜4行目が現在のアイコンになりますのでそれを下記に変更してください。
   <img src="前提作業でコピーした対象画像のリンクに置き換え" class="icon icon-instagram" id="icon-size" >
3. 変更が終わったら保存ボタンを押してください。

また、その他SNSアイコンも同様に下記liquidにてアイコンが用意されていますので、必要に応じて変更ください。

その際、class内にある「icon icon-instagram」のinstagram部分は使用するSNS名に変更ください。

例) Twitterの場合「icon icon-twitter」

各SNSアイコンのliquid名

■Twitter

icon-twitter.liquid

■Facebook

icon-facebook.liquid

■Pinterest

icon-pinterest.liquid

■Instagram

icon-instagram.liquid

■TikTok

icon-tiktok.liquid

■Tumblr

icon-tumblr.liquid

■Snapchat

icon-snapchat.liquid

■YouTube

icon-youtube.liquid

■Vimeo

icon-vimeo.liquid

ご参考まで。

(キュー小坂)

[8910]

返信ありがとうございます！

変更することが出来ました。

いくつも質問してしまいすいません。

また機会がありましたら是非お願いします。