# モバイル表示でAPPのアイコンを綺麗に表示させたい

**URL:** <https://community.shopify.com/t/app/221154>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [June 2, 2023, 2:26am UTC](https://community.shopify.com/t/app/221154 "2023-06-02T02:26:56Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

モバイル画面でShopifyのINBOXチャットアプリとポイントアプリの両方を使用したいが、右下に2つのアイコンが表示されると邪魔に感じる問題について相談されています。

**提案された解決策：**
1. INBOXを問い合わせページのみに表示し、ポイントアプリは常時表示
2. スマホフッターにナビゲーションアイコンとしてINBOXとポイントを統合

**回答者からのアドバイス：**
- 実際に2つのアイコンを使用しているストア事例が紹介されました（circles-jp.com）
- CSSよりもJavaScriptでDOMを組み替える方が綺麗にカスタマイズ可能
- 代替案として、非会員にはヘッダーバーで周知し、会員にはマイページで表示、ポイントアイコンは常時非表示にする方法も提案

**制約事項：**
- 国内利用では日本円とポイントレートが変更不可のアプリが多い（1ドル=1ポイント=10,000円で10,000ポイント貯まる仕様など）
- 高額プランでないとカスタマイズが難しい状況

<div class="post-metadata">

**Author:** ![shop-beginner12](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@shop-beginner12](https://community.shopify.com/u/shop-beginner12)\
**Post date:** [June 2, 2023, 2:26am UTC](https://community.shopify.com/t/app/221154/1 "2023-06-02T02:26:56Z")

</div>

現在ShopifyのチャットアプリINBOXを設定しています。

スマホだと”問い合わせはこちら”のようにアイコンが右下に表示されています。

新しくポイントAPPもインストールしたいと考えています。

この場合もポイントAPPのアイコンが右下もしくは左に表示されます。

スマホの下部に2つもアイコンがあるのは正直邪魔ではないかと感じました。

どちらもCSSコード等でのカスタマイズは不可と言われております。

INBOXはCSSコードを編集して多少ボタンとチャットの大きさ、位置は変えられそうです。

どちらも利用したいのですが、下記の方法くらいしか思い浮かびません。

1.INBOXはお問い合わせページのみに表示させて他のページでは読み込みしないカスタマイズを行い、ポイントAPPをは常に表示させる

2.スマホのフッターに、ナビゲーションバー（アイコン）的なものを導入して、ポイント、INBOXをフッターアイコンに入れる（実装可否は不明）

他に何かいい案があればぜひご教示ください。

もしカスタマイズしても良いというエキスパートナー様がいらっしゃれば有料で依頼したいと思いますので、ぜひお知らせください。よろしくお願い致します。

---

<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:** [June 2, 2023, 10:33am UTC](https://community.shopify.com/t/app/221154/2 "2023-06-02T10:33:08Z")

</div>

興味があり調査してみました。

フッターにアイコンが2つあってもそれほど不自然ではないかもしれません。

下記のストア様はそうされているようです。

[https://shop.circles-jp.com/](https://shop.circles-jp.com/)

しかし、

やはり「不自然」と感じられるかもしれませんね。

ポイントアプリ側の仕様が分からないので言い切れませんが、

InBoxに限って言えば、

質問者様がお考えになっている案の1も2も実現可能に思えました。

しかし、CSSではなくJavaScriptも使ってDOMを組み替えた方が綺麗にカスタマイズできそうです。

(ShopifyがInBoxのアイコンに付与しているCSS IDを変更すると破綻してしまいますが。)

他の案としては、

逆にポイントアプリの方の自由度が高いようでしたら、

ポイントアプリの方は常に表示させず、

会員向けには、マイページの目立つ場所に情報を表示させ、

非会員向けには、(Dawnであれば)ヘッダー上のお知らせバーを使用して情報を周知する、

で良いかもしれません。

お問い合わせは、疑問に思った時にすぐ使用できた方が良いと思いますが、

ポイントは常に見えている必要が薄いようにも思えるからです。

大した情報がなく恐縮ですが、

何か参考になれば幸いです。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![shop-beginner12](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@shop-beginner12](https://community.shopify.com/u/shop-beginner12)\
**Post date:** [June 3, 2023, 2:49am UTC](https://community.shopify.com/t/app/221154/3 "2023-06-03T02:49:18Z")

</div>

キュー田辺様

ご返信誠にありがとうございます。

ポイントアイコンの形が横長バージョンのAPPもあるのだと参考になります！

ポイントアプリを逆に会員ページのみで周知する案も素晴らしいですね。

可能なのかちょっと調べてみたいと思います。

ちなみにポイントAPPは高額だとカスタマイズ出来そうですが、やはり月額費用がリーズナブルだとカスタマイズは不可なところが多いようです。

そもそも英語圏APPだとポイント換算のレートが変更不可のAPPが多く（1ドル1ポイントが基本のため、日本だと10,000円で10,000ポイント溜まっちゃう）なので国内利用では選択肢がかなり限られているように思いました。

貴重なご意見誠にありがとうございます。