Shopifyで電話・LINE・WhatsAppの追従ボタンを全ページに表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/09/23

はじめに

「このサイズで合うか、聞いてから買いたい」「いつ届くのか電話で確かめたい」。買う直前に出てくるこうした疑問に、すぐ答えられる場所がストアにありますか？問い合わせ先がフッターの奥やお問い合わせページにしか無いと、お客様は探す前にページを閉じてしまいます。

Shopify は、ネットショップを作って運営できるサービスです。Shopify アプリを追加すると、標準では足りない機能をストアに足せます。

UR:Sticky Click to Call Button は、ストアのすべてのページに 電話・LINE・WhatsApp の追従ボタンを置くアプリです。ボタンは画面の隅に張り付いたまま、スクロールしても消えません。お客様はワンタップで電話をかけたり、LINE や WhatsApp のトーク画面を開いたりできます。

連絡先は管理画面で一度入力するだけ。使うチャネルだけを選べます
電話番号は「＋と国番号」の形式を保存前に確認するので、「押しても繋がらない」設定ミスを防げます
位置・余白・大きさ・色・表示する端末は、テーマエディタで調整できます
パソコンでは電話番号そのものを表示するので、電話をかけられない環境のお客様にも番号が伝わります

料金

プラン	料金
月払い	月額 $2.49
年払い	年額 $24.90（月払いより 2 か月分お得）

インストールから 7 日間は無料でお試しいただけます。

アプリのインストールはこちら：UR:Sticky Click to Call Button - Shopify App Store

UR:Sticky Click to Call Button のメイン画像。「電話・チャットの連絡ボタンをストアに簡単に追加できます！」の文字と、ストアの右下に並ぶ WhatsApp・LINE・電話のボタン

「UR:Sticky Click to Call Button」でできること

できることは次の 5 つです。

電話・LINE・WhatsApp のボタンを、ストアの全ページに追従表示できます
使うチャネルだけを選んで表示できます。連絡先は管理画面で一度入力するだけです
ボタンの位置・余白・大きさ・色を、テーマエディタで調整できます
すべての端末・スマートフォンのみ・パソコンのみから、表示する端末を選べます
管理画面・テーマエディタ・ストアの表示が 20 言語に対応しています

問い合わせ先を全ページに常に出しておきたいときは

ボタンは画面の右下（または左下）に固定され、どのページを見ていても同じ場所に出ます。上から WhatsApp → LINE → 電話 の順に縦に並びます。使わないチャネルは表示されず、並びが詰まります。

LINE と WhatsApp のボタンは、お客様が見慣れたそれぞれのブランド色（LINE は緑 #06C755、WhatsApp は緑 #25D366）で固定しています。色を変えられるのは電話ボタンだけです。

パソコンで見たストア。右下に WhatsApp・LINE と、電話番号つきの電話ボタンが縦に並んでいる

「押しても繋がらない」を防ぎたいときは

電話と WhatsApp は、番号の書き方が少し違うだけで繋がらなくなります。たとえば 090-1234-5678 のような国内の書き方で登録すると、WhatsApp は国番号が分からず、エラーも出さずに失敗します。

このアプリは、保存する前に「＋と国番号」から始まっているかを確かめます。形式が違えば保存されず、その場で直し方が表示されます。登録した番号は、電話用と WhatsApp 用にそれぞれ正しい形へ自動で整えてから保存します。

電話番号に 03-9999-8888 と入れて保存したときのエラー表示。「＋と国番号から入力してください（例: +81 90-1234-5678）」と出ている

パソコンのお客様にも番号を伝えたいときは

スマートフォンでは、電話ボタンはアイコンだけで、タップするとそのまま発信します。パソコンでは電話をかけられないことが多いため、ボタンの横に電話番号そのものを表示します（テーマエディタの「電話番号を表示する」でオン・オフできます）。

スマートフォンで見たストア。右下に WhatsApp・LINE・電話のアイコンだけのボタンが並んでいる

インストールの手順

どのアプリでも共通の、Shopify App Store からのインストール手順です。

1. Shopify 管理画面の「設定」を開く

管理画面の左下にある「設定」をクリックします。

Shopify 管理画面の左下にある設定

2. 「アプリと販売チャネル」から Shopify App Store を開く

「アプリと販売チャネル」を開き、「Shopify App Store」をクリックします。

設定のアプリと販売チャネルから Shopify App Store を開くボタン

3. アプリを検索する

App Store の検索窓に「UR:Sticky Click to Call Button」と入力します。検索で見つからない場合は、アプリのページを直接開いてください。

4. 「インストール」をクリックする

アプリの詳細ページで「インストール」をクリックします。下の画像はインストール済みのストアで撮ったため「開く」と表示されていますが、まだインストールしていないストアでは同じ場所に「インストール」が出ます。

UR:Sticky Click to Call Button のアプリ詳細ページ。左側に料金と開くボタンがある

5. アクセス権限を確認してインストールする

アプリが使う権限の確認画面が出ます。このアプリが求めるのは テーマの閲覧（read_themes）だけです。テーマの一覧を「テーマを選択」に出すために使います。顧客・注文のデータには一切触れません。内容を確認してインストールすると、料金プランの承認画面を経てアプリの管理画面が開きます。

インストールしたら、まずこの 3 ステップ

インストールした直後は、電話・LINE・WhatsApp のどれも無効になっています。このままではストアに何も表示されません。次の 3 つを順に済ませてください。

連絡先の設定で、使うチャネルにチェックを入れ、番号または URL を入力して「保存する」を押す
テーマにボタンを追加で、ボタンを出したいテーマを選んで「テーマに追加」を押す
新しいタブでテーマエディタが開くので、埋め込みアプリの「電話・チャットボタン」がオンになっていることを確かめ、右上の「保存」を押す

🚨 3 の「保存」を忘れないでください。 「テーマに追加」を押すとトグルはオンの状態で開きますが、テーマエディタで「保存」を押すまで、ストアには反映されません。

「テーマに追加」で開くのは、常にホームページのテーマエディタです。この「電話・チャットボタン」は埋め込みアプリなので、ホームページで有効にすれば商品ページ・コレクションページ・カートなど全ページに出ます（チェックアウト画面を除く）。

テーマエディタの埋め込みアプリ。電話・チャットボタンのトグルがオンになり、右のプレビューにボタンが並んでいる

管理画面の「設定」でできること

アプリを開くと「設定」画面が表示されます。画面は 1 枚だけで、上から次のカードが並んでいます。

カード	できること
テーマにボタンを追加	ボタンをテーマに有効化する、テーマをプレビューする
連絡先の設定	電話・LINE・WhatsApp の連絡先を登録し、表示するチャネルを選ぶ
言語設定	アプリの管理画面の表示言語を切り替える
おすすめアプリ	UnReact の他のアプリの紹介（右上の × で閉じられます）

アプリの設定画面。上からテーマにボタンを追加、注意のバナー、連絡先の設定が並んでいる

テーマにボタンを追加したいときは

「テーマにボタンを追加」カードで、ボタンをテーマに有効化します。

テーマにボタンを追加カード。テーマを選択の欄と、テーマに追加・テーマをプレビューのボタン、その下に注意のバナー

テーマを選択

ストアにあるテーマから、ボタンを追加するテーマを選びます。

初期状態では、公開中のテーマが選ばれています。名前の後ろに「（公開中のテーマ）」と付くのが目印です
デモ用のテーマは一覧に出ません
テーマのバージョンによっては、選択欄が空欄になることがあります。その場合は、テーマエディタの「埋め込みアプリ」から手動で有効化してください（手順は「ストアフロントの見た目を整える」の章にあります）

テーマに追加

押すと、選んだテーマのテーマエディタが新しいタブで開き、「電話・チャットボタン」がオンになった状態で表示されます。右上の「保存」を押すまでストアには反映されないので、必ず保存まで済ませてください。

テーマをプレビュー

押すと、選んだテーマのホームページのプレビューが新しいタブで開きます。公開前のテーマで見え方を確かめたいときに便利です。

自動追加に失敗したときの注意バナー

管理画面を日本語で表示しているときは、カードの下に「『テーマに追加』をクリック後、アプリの自動追加が失敗する場合は…」という黄色いバナーが出ます。自動で有効にならなかったときは、テーマエディタの「埋め込みアプリ」から手動でオンにしてください。

連絡先を登録したいときは

「連絡先の設定」カードで、ボタンの押し先を登録します。使うものだけにチェックを入れてください。 チェックを入れたチャネルだけがストアに表示されます。

カードの上部には「電話番号は『＋』と国番号から入力してください。国内の表記のままでは、海外からの発信や WhatsApp が繋がりません。」という案内が常に出ています。

連絡先の設定カード。電話・LINE・WhatsApp それぞれのチェックボックスと入力欄、保存するボタン

電話ボタンを表示する / 電話番号

項目	内容
電話ボタンを表示する	チェックを入れると、電話ボタンをストアに出します。初期値はオフです。「スマートフォンではタップで発信します。パソコンでは番号を表示します。」と説明が添えられています
電話番号	発信先の番号です。「＋」と国番号から入力します（例: `+81 90-1234-5678`）。チェックを外している間は入力できません

区切りのハイフン・空白・括弧は入れても構いません。保存時に取り除いて発信用の形（例: +819012345678）にします
日本の番号なら、先頭の 0 を取って +81 を付けます。03-1234-5678 なら +81 3-1234-5678 です
「＋」の後ろは 0 以外で始まる 7〜15 桁の数字にしてください。それ以外は保存できません
パソコンのボタンに表示される番号は、ここに入力した文字列そのままです。 お客様に読みやすい区切り方で入力しておくのがおすすめです

LINE ボタンを表示する / LINE の友だち追加 URL

項目	内容
LINE ボタンを表示する	チェックを入れると、LINE ボタンをストアに出します。初期値はオフです。「LINE 公式アカウントの管理画面で発行した、友だち追加の URL を貼り付けてください。」と説明が添えられています
LINE の友だち追加 URL	LINE 公式アカウントの友だち追加 URL です。番号ではなく URL を入れます

受け付けるのは次の 2 つの形式だけです。

https://lin.ee/xxxxxxx（LINE 公式アカウントの管理画面で発行される短縮 URL）
https://line.me/R/ti/p/@ベーシックID（@ の代わりに ~ で始まるものも可）

ベーシック ID だけ（@abc1234 など）や、http:// で始まる URL は保存できません。前後の空白は自動で取り除きます。

WhatsApp ボタンを表示する / WhatsApp の電話番号

項目	内容
WhatsApp ボタンを表示する	チェックを入れると、WhatsApp ボタンをストアに出します。初期値はオフです。「WhatsApp のチャットを開きます。」と説明が添えられています
WhatsApp の電話番号	WhatsApp を使っている番号です。電話番号と同じく「＋」と国番号から入力します

保存時に「＋」と区切りを取り除き、WhatsApp のリンク用の形（例: 819012345678）にして保存します。そのため、次に画面を開くと +819012345678 のように区切りのない形で表示されます。番号自体は正しく保存されています
電話ボタンと同じ番号でも、別の番号でも構いません

保存する

入力が終わったら「保存する」を押します。

保存できると、画面の下に「保存しました」と表示されます
形式が違う欄があると、その欄が赤くなり、「＋と国番号から入力してください（例: +81 90-1234-5678）」や「友だち追加の URL を入力してください（例: https://lin.ee/xxxxxxx）」と表示されます。この場合は保存されていません
通信などの理由で保存できなかったときは「保存に失敗しました」と表示されます。時間をおいて、もう一度押してください

保存するを押したあと、画面の下に保存しましたと表示されている

🚨 チェックを外して保存すると、そのチャネルの番号・URL は消えます。 一時的にボタンを隠すつもりでチェックを外した場合も、もう一度出すときは番号・URL を入れ直してください。

連絡先はストアに保存されます（テーマには保存されません）。テーマを切り替えても、登録した連絡先はそのまま使えます。

管理画面の言語を変えたいときは

「言語設定」カードで、アプリの管理画面の表示言語を切り替えます。

言語設定カード。言語を選択の欄に日本語が選ばれ、変更するボタンがある

「言語を選択」から言語を選ぶ
「変更する」を押す

選べる言語は、Čeština / Dansk / Deutsch / English / Español / Français / Italiano / Nederlands / Norsk (bokmål) / Polski / Português (Brasil) / Português (Portugal) / Suomi / Svenska / Türkçe / ภาษาไทย / 日本語 / 简体中文 / 繁體中文 / 한국어 の 20 言語です。

変わるのはアプリの管理画面の表示だけです。ストアのボタンの読み上げ用ラベルは、お客様が見ている言語で自動的に切り替わります
選んだ言語はお使いのブラウザに保存されます。別のパソコンや別のブラウザで開いたときは、もう一度選んでください

ストアフロントの見た目を整える（テーマエディタ）

ボタンの位置や大きさは、テーマエディタの 埋め込みアプリ → 電話・チャットボタン で調整します。

開き方は次の 2 通りです。

アプリの「テーマに追加」を押す
Shopify 管理画面の「オンラインストア」→「テーマ」→「カスタマイズ」を開き、左端のアイコン列から「埋め込みアプリ」を選ぶ

「電話・チャットボタン」の左の矢印を押すと、設定が開きます。設定は 表示位置 と 見た目 の 2 つのグループに分かれています。変更したら、右上の「保存」を押してください。

🚨 見た目の設定はテーマごとに保存されます。テーマを切り替えたら、新しいテーマでも「電話・チャットボタン」をオンにして保存し、見た目を調整し直してください。

表示位置

ボタンを画面のどこに、どの端末で出すかを決めます。

表示位置グループ。位置は右と左、表示するデバイスはすべての端末、下からの距離と左右からの距離は 20px

設定	選択肢・範囲	初期値	どう変わるか
位置	右 / 左	右	ボタンを画面の右下に出すか、左下に出すかを選びます
表示するデバイス	すべての端末 / スマートフォンのみ / パソコンのみ	すべての端末	ボタンを出す端末を選びます。画面幅 768px 未満をスマートフォン、768px 以上をパソコンとして扱います
下からの距離	8〜120px（4px 刻み）	20px	画面の下端からボタンまでの距離です。大きくするほどボタンが上に上がります
左右からの距離	8〜120px（4px 刻み）	20px	画面の左右の端からボタンまでの距離です。「位置」で選んだ側からの距離になります

「表示するデバイス」の境目は画面幅で決めています。横幅 768px 以上のタブレットは「パソコン」として扱われます
テーマのチャットウィジェットやカートの追従バーなど、画面下に固定される要素と重なるときは「下からの距離」を大きくしてください

見た目

ボタンの大きさと電話ボタンの色、パソコンで番号を出すかを決めます。

見た目グループ。ボタンの大きさは 56px、電話ボタンの色は #1F6FEB、電話番号を表示するはオン

設定	選択肢・範囲	初期値	どう変わるか
ボタンの大きさ	40〜76px（2px 刻み）	56px	ボタンの高さです。アイコンもボタンに合わせて大きくなります
電話ボタンの色	任意の色	#1F6FEB（青）	電話ボタンの背景色です。LINE・WhatsApp のボタンの色は変わりません
電話番号を表示する	オン / オフ	オン	オンにすると、パソコンで電話ボタンの横に番号を表示します。スマートフォンでは常にアイコンだけです

「電話番号を表示する」の下には「パソコンで表示されます。タップでの発信ができない場合があるためです。」と注記が出ています。パソコンは電話アプリが設定されていないことが多く、ボタンを押しても何も起きない場合があります。特に理由がなければオンのままにしておくのがおすすめです。

こんなときはこう設定する

ストアのチャットボタンが右下にあって重なるときは

右下にすでにチャットやレビューのボタンがあるストアでは、「位置」を左にすると重なりを避けられます。下の画像は、位置を左、「電話番号を表示する」をオフにした例です。ボタンがアイコンだけになり、商品画像にかかる面積も小さくなります。

位置を左、電話番号を表示するをオフにしたストア。左下にアイコンだけの WhatsApp・LINE・電話ボタンが並んでいる

どうしても右側に置きたい場合は、「下からの距離」を大きくして、既存のボタンの上に積むように配置してください。

スマートフォンのお客様だけに電話ボタンを出したいときは

「表示するデバイス」を スマートフォンのみ にします。パソコンではボタンが一切出なくなるので、パソコンのお客様にはお問い合わせフォームなど別の導線を案内したいストアに向いています。

電話やチャットでの接客を目立たせたいときは

「ボタンの大きさ」を 64〜76px に上げ、「電話ボタンの色」をストアのアクセントカラーに合わせます。電話番号も一緒に見せたいなら「電話番号を表示する」はオンのままにしてください。

控えめに置いておきたいときは

「ボタンの大きさ」を 40〜48px に下げ、「電話番号を表示する」をオフにします。「下からの距離」「左右からの距離」を 8〜12px にすると、画面の隅に寄って目立ちにくくなります。

うまく表示されないときは

ボタンが 1 つも表示されない

次の順に確認してください。

連絡先の設定で、どのチャネルにもチェックが入っていない。 チェックが 1 つも無い、または入力欄が空のままだと、ボタンは入れ物ごと表示されません
テーマエディタで「保存」を押していない。 「テーマに追加」でトグルがオンに見えていても、保存するまでストアには出ません。テーマエディタを開き直して、「電話・チャットボタン」がオンか、右上の「保存」が押せる状態（未保存の変更がある状態）になっていないかを確認してください
公開中ではないテーマに追加している。 「テーマを選択」で選んだテーマが公開中のテーマかを確かめてください
料金プランが有効になっていない。 料金プランが無効（未承認・解約後）のストアでは、ボタンは自動的に非表示になります
ブラウザや配信側のキャッシュ。 ページを再読み込みするか、しばらく待ってから確認してください