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

**URL:** <https://community.shopify.com/t/topic/188486>\
**Category:** 技術的なQ＆A\
**Created:** [February 2, 2023, 4:03am UTC](https://community.shopify.com/t/topic/188486 "2023-02-02T04:03:48Z")\
**Posts on this page:** 10\
**Page:** 1

## AI-generated summary

Shopify公式テーマDawnのヘッダー等のアイコン（カート／検索／アカウント／ハンバーガー）を独自画像に差し替える方法の共有。画像は管理画面>設定>ファイルへアップし、各テンプレートで既存SVGを<img>に置換。

主な編集箇所と手順:
- icon-cart.liquid／icon-cart-empty.liquid／icon-hamburger.liquid／icon-close.liquid：先頭のSVGを<img src="アップロード画像URL" class="icon …" id="icon-size">に置換。
- header.liquid：ヘッダーの検索アイコン、検索モーダル内の虫眼鏡と×を同様に置換。
- main-search.liquid：検索結果ページの検索アイコンを置換。
- base.css：必要時のみサイズ調整を追加。
- icon-instagram.liquid（および各SNSのicon-*.liquid）：モバイルメニュー／フッターのSNSアイコンを共通置換。

進捗:
- 当初、検索アイコンのみ未反映→修正箇所の再指示で解決。
- 検索モーダル内の虫眼鏡・×、モバイルメニューの×、Instagramアイコンも追加手順で解決。

最新状況:
- Dawnをv10以降にアップデート後、header.liquidの構造変更で旧手順が適用できず（対象SVGが見当たらない）。新バージョンでの差し替え手順の提示を依頼中。現時点未解決。

補足:
- スクリーンショットと具体的なコード抜粋・行番号が提示されており、理解に有用。

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [February 2, 2023, 4:03am UTC](https://community.shopify.com/t/topic/188486/1 "2023-02-02T04:03:48Z")

</div>

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

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

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

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

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

 ![8910_0-1675310423366.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/b/2b9544223278f3bedc4618dfccaa3a9a2acf3c0d.png)

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [February 7, 2023, 10:56am UTC](https://community.shopify.com/t/topic/188486/2 "2023-02-07T10:56:31Z")

</div>

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

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

**前提作業**

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

 ![Qcoltd_4-1675767134039.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/4/b494c64d6a3c25e00269efc6d1f748bcaa504f5e.png)

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

1. 管理画面より「オンラインストア \> テーマ \> カスタマイズボタンの横にある「…」 \> コードを編集」からコード編集画面を開きます。

2. ファイル検索にて「icon-cart.liquid」を検索し表示してください。

3. 添付画像1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。

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

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

1. 上記\*\*「カートに商品が入っている時用」\*\*と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-cart-empty.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。  
 ![]()
3. 変更が終わったら保存ボタンを押してください。

**アカウントロゴ変更方法**

1. 上記\*\*「カートに商品が入っている時用」\*\*と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-account.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。  
 ![]()
3. 変更が終わったら保存ボタンを押してください。

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

1. 上記\*\*「カートに商品が入っている時用」\*\*と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-hamburger.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。  
 ![]()
3. 変更が終わったら保存ボタンを押してください。

**検索虫眼鏡ロゴ変更方法**

1. 上記\*\*「カートに商品が入っている時用」\*\*と同じ手順で、コード編集画面に進み、ファイル検索にて「header.liquid」を検索し表示してください。

2. 添付画像選択部分（下記コード）が現在のアイコン部分になります。

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

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

**CSS追加方法**

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

2. ファイルの先頭に下記を追加してください。

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

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

ご参考まで。

(キュー小坂)

---

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [February 11, 2023, 2:00pm UTC](https://community.shopify.com/t/topic/188486/3 "2023-02-11T14:00:29Z")

</div>

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

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

大変感謝しております。

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

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

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

 ![スクリーンショット 2023-02-11 22.41.42.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/2/428599fad4ba3d8564d6ba8793efb5ec459141c9.png)

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [February 13, 2023, 1:28am UTC](https://community.shopify.com/t/topic/188486/4 "2023-02-13T01:28:16Z")

</div>

@8910 様

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

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

ご参考まで。

(キュー小坂)

---

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [February 13, 2023, 10:14am UTC](https://community.shopify.com/t/topic/188486/5 "2023-02-13T10:14:45Z")

</div>

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

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

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

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

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

 ![スクリーンショット 2023-02-13 19.03.19.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/d/cdd21566221a6d720cb29f9701e42085496ca788.png)

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

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [February 13, 2023, 11:16am UTC](https://community.shopify.com/t/topic/188486/6 "2023-02-13T11:16:46Z")

</div>

@8910 様

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

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

1. 上記「 **カートに商品が入っている時用** 」と同じ手順で、コード編集画面に進み、ファイル検索にて「header.liquid」を検索し表示してください。
2. 562行目あたりにある（下記コード）がタップした後に表示される検索窓内の虫眼鏡アイコン部分になります。  
  
  
  
それを下記に変更してください。  
 ![]()
3. 変更が終わったら保存ボタンを押してください。

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

1. 上記「 **カートに商品が入っている時用** 」と同じ手順で、コード編集画面に進み、ファイル検索にて「header.liquid」を検索し表示してください。
2. 584行目あたりにある（下記コード）が検索窓内の虫眼鏡アイコン部分になります。  
  
  
  
それを下記に変更してください。  
 ![]()
3. 変更が終わったら保存ボタンを押してください。

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

1. 上記「 **カートに商品が入っている時用** 」と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-close.liquid」を検索し表示してください。
2. 1〜3行目が現在のアイコンになりますのでそれを下記に変更してください。  
 ![]()
3. 変更が終わったら保存ボタンを押してください。

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

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

1. 上記「 **カートに商品が入っている時用** 」と同じ手順で、コード編集画面に進み、ファイル検索にて「main-search.liquid」を検索し表示してください。
2. 112行目あたりにある（下記コード）が検索窓内の虫眼鏡アイコン部分になります。  
  
  
  
それを下記に変更してください。  
 ![]()
3. 変更が終わったら保存ボタンを押してください。

---

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [February 13, 2023, 2:04pm UTC](https://community.shopify.com/t/topic/188486/7 "2023-02-13T14:04:25Z")

</div>

ありがとうございます！

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

無事更新できました！

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

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

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

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

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [February 14, 2023, 10:12am UTC](https://community.shopify.com/t/topic/188486/8 "2023-02-14T10:12:05Z")

</div>

@8910 様

Instagramアイコンは共通ファイルになっていますので、  
ご質問いただいている①②共に、下記ファイルを修正していただければ変更されます。

**Instagramアイコン部分**

1. 上記「カートに商品が入っている時用」と同じ手順で、コード編集画面に進み、ファイル検索にて「icon-instagram.liquid」を検索し表示してください。
2. 1〜4行目が現在のアイコンになりますのでそれを下記に変更してください。  
 ![]()
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

ご参考まで。

(キュー小坂)

---

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [February 15, 2023, 9:47am UTC](https://community.shopify.com/t/topic/188486/9 "2023-02-15T09:47:58Z")

</div>

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

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

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

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

---

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [July 29, 2023, 8:59am UTC](https://community.shopify.com/t/topic/188486/10 "2023-07-29T08:59:22Z")

</div>

お世話になっております。

以前こちらのスレッドで、ヘッダーアイコンのカスタマイズについてご教示頂きました。

先日Dawnのアップデートをしまして、前回のバージョン同様にリキッドを編集しようとしたのですが、「header.liquid」のコードがアップデートによって変更されたのか、ご教示頂いた方法（↓添付）では変更ができませんでした。(svg class=,の該当のコードが見つからなかったです)

もし可能でしたら、Dawn10以降のバージョンでの変更方法を教えて頂けないでしょうか？

> **検索虫眼鏡ロゴ変更方法** \> \> 1. 上記\*\*「カートに商品が入っている時用」\*\*と同じ手順で、コード編集画面に進み、ファイル検索にて「header.liquid」を検索し表示してください。\> 1. 添付画像選択部分（下記コード）が現在のアイコン部分になります。\> \>
> 
> ![8910_2-1690620643790.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/5/5/755217bdfc2c8143b7eea7c9b5d352ce13034c7c.png)\> \> \> \> それを下記に変更してください。\> \> \> \> \> \> \> 1. 変更が終わったら保存ボタンを押してください。

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