# カートアイコンを変更したい。

**URL:** <https://community.shopify.com/t/topic/371036>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [November 3, 2024, 5:13pm UTC](https://community.shopify.com/t/topic/371036 "2024-11-03T17:13:48Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

ユーザーはShopifyの無料テーマ「Dawn」で、現在のポーチ型カートアイコンをAmazonのようなショッピングカート型に変更したいと質問しています。

**提案された解決方法:**
- Font AwesomeなどからSVG形式のアイコンを用意
- Shopifyテーマエディタで新しいスニペットファイル(icon-custom-cart.liquid)を作成
- SVGコードにclass="icon icon-cart"とstyle="height: 2rem; width: 2rem;"を追加
- header.liquidファイルでアイコンの参照部分を変更

**現在の課題:**
ユーザーはHTML/コードの知識がなく、SVGコードのどの部分に具体的にclass属性やstyle属性を追加すればよいかわからない状態です。Font AwesomeのSVGコードは用意できているものの、タグへの属性追加方法について具体的な記入場所の説明を求めています。

**ステータス:** 解決待ち - 技術的な実装の詳細説明が必要

<div class="post-metadata">

**Author:** ![AMOURETVIE001](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/amouretvie001/32/229935_2.png) [@AMOURETVIE001](https://community.shopify.com/u/AMOURETVIE001)\
**Post date:** [November 3, 2024, 5:13pm UTC](https://community.shopify.com/t/topic/371036/1 "2024-11-03T17:13:48Z")

</div>

現在無料テーマのDAWNを利用しております。

利用しているカートアイコンがポーチのような形ですが、

amazonのようなショッピングカートに変更したいと思っております。

変更方法をご享受いただけましたら幸いです。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [November 5, 2024, 12:17am UTC](https://community.shopify.com/t/topic/371036/2 "2024-11-05T00:17:18Z")

</div>

ご質問拝見しました。

以下手順に従って編集していただければと思います！

Shopifyの無料テーマ「Dawn」で、ヘッダーのカートアイコンをAmazonのようなショッピングカートの形状に変更するには、以下の手順をお試しください。

1. **新しいアイコンの準備** :

2. **スニペットファイルの作成** :

3. **ヘッダーファイルの編集** :

4. **変更の保存と確認** :

この手順により、Dawnテーマのカートアイコンを希望のデザインに変更できます。 詳細な手順や注意点については、以下の参考記事もご覧ください。

下記記事もわかりやすいのでご参考にしていただければと思います！

[https://zenn.dev/kosuke\_shopify/articles/dd3910aa60f427](https://zenn.dev/kosuke_shopify/articles/dd3910aa60f427)

ご参考にしていただければと思います！

なにかご質問があれば、お気軽にご相談ください。  
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![AMOURETVIE001](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/amouretvie001/32/229935_2.png) [@AMOURETVIE001](https://community.shopify.com/u/AMOURETVIE001)\
**Post date:** [November 7, 2024, 5:26am UTC](https://community.shopify.com/t/topic/371036/3 "2024-11-07T05:26:19Z")

</div>

この度はご回答を頂きましてありがとうございます。

早速ためそうとしたところ、当方HTMLやコードを全くさわれない為に、SVGのコードまでは用意できたのですが、

SVGコードのどの部分に

- SVGタグにclass="icon icon-cart"を追加し、サイズを調整するためにstyle="height: 2rem; width: 2rem;"を指定します。

このコードをどの部分に追加するのかがわかりません。

> \<のようなものも追加すると聞いたことがあるのですが、あまり理解しておりません。

ご享受いただいたURLを見ても上手くいきませんでした。

そこを解決できれば他の部分は自力でできるかと思います。

もし可能であれば具体的に記入場所などあれば教えて頂ければと存じます。

念の為いれようとしている元のSVGコードはこちらです。

宜しくお願い申し上げます。