# 「カートに追加する」の横にカートアイコンを表示させたい。

**URL:** <https://community.shopify.com/t/topic/195100>\
**Category:** 技術的なQ＆A\
**Created:** [February 26, 2023, 8:07am UTC](https://community.shopify.com/t/topic/195100 "2023-02-26T08:07:11Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

商品詳細ページの「カートに追加する」ボタンにカートアイコンが表示されていない問題について質問が投稿されました。

**解決方法:**
- Dawnテーマを使用している場合、`main-product.liquid`ファイルを編集してカートアイコンを追加できます
- 具体的な手順として、管理画面から「コードを編集」を開き、該当ファイル内の`<span>`タグの前に指定コードを記載します

**質問者の状況:**
- 最初の実装では、追尾するカート部分には反映されたが、メインの「カートに追加する」ボタンには反映されませんでした
- 最終的に`buy-buttons.liquid`ファイルにも同じ手順を適用することで、両方の箇所にカートアイコンが表示されるようになりました

**結果:** 問題は解決し、商品詳細ページの該当ボタンにカートアイコンが正常に表示されるようになりました。

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [February 26, 2023, 8:07am UTC](https://community.shopify.com/t/topic/195100/1 "2023-02-26T08:07:11Z")

</div>

商品詳細ページにて、

自分のには「カートに追加する」ボタンにアイコンが表示されていません。

これは元々なのか、何かのエラーでこうなっているのか、

どちらにせよここにカートアイコンを表示させるためにどうすればいいですか？

 ![スクリーンショット_2023-02-26_17_04_17.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/c/9cca57c3c7e2083f0452ef4c517b12ba68618504.jpeg)

---

<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 28, 2023, 10:27am UTC](https://community.shopify.com/t/topic/195100/2 "2023-02-28T10:27:00Z")

</div>

ご質問いただいている、添付画像赤枠にカートアイコンを表示させることは可能です。

ご使用のテーマが不明なため、Dwanテーマを例に解説させていただきます。

Dwanテーマでない場合は下記手順のファイル名等が異なる場合があります。

**カートアイコン表示手順**

1. 管理画面より「オンラインストア \> テーマ \> カスタマイズボタンの横にある「…」 \> コードを編集」からコード編集画面を開きます。
2. コード編集画面の「ファイルを検索」エリアに、『main-product.liquid』と入力しソートされたファイルを開きます。
3. main-product.liquidファイル内で、『』を検索してください。
4. 3で検索した『』の前の行に下記コードを記載

```markup

```

**追加例イメージ**

 ![Qcoltd_0-1677579920478.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/3/d33e6efa64eb6f3ddc88a77d3aaf5fe61b17be03.png)

**表示例イメージ**

 ![Qcoltd_1-1677579920371.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/f/d/3/fd32ce055c1873f848f030c8fa76dc68e9043b61.png)

ご参考まで。

(キュー小坂)

---

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [March 3, 2023, 1:56am UTC](https://community.shopify.com/t/topic/195100/3 "2023-03-03T01:56:10Z")

</div>

回答ありがとうございます。(テーマはDAWN)

教えて頂いた箇所に指定コードを書き込んだところ、以前実装した追尾するカート部分には反映されたのですが、メインの部分には反映されなかったです。

２つの部分は使用しているコードは同じなのですが、なぜか片方しか反映されないです。色々試してみたんですが、原因がよくわかりません。

 ![スクリーンショット_2023-03-03_10_52_37.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/d/4/0d429d7b86f2960d10943269475d76bfbcb9a1f5.jpeg)

---

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [March 3, 2023, 4:22am UTC](https://community.shopify.com/t/topic/195100/4 "2023-03-03T04:22:19Z")

</div>

反映しなかった部分はセクションのbuy-buttons.liquidで同じ手順を踏むと反映されました。

 ![スクリーンショット 2023-03-03 13.21.54.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/b/eb369d9d78725c322e278ee3a271b48c6a63312b.jpeg)
