【徹底解説】Shopify アプリ「シンプル追従電話ボタン｜お手軽お問い合わせ・電話サポート」でできること

【徹底解説】Shopify アプリ「シンプル追従電話ボタン｜お手軽お問い合わせ・電話サポート」でできること

「このサイズで合うか、店の人に聞いてから買いたい」「注文したら何日で届くのか、電話で確かめたい」。ネットショップのお客様は、買う直前にこうした小さな疑問を抱えています。ところが問い合わせ先がフッターの奥やお問い合わせページにしか無いと、お客様は探すのをあきらめて、そのままページを閉じてしまいます。実店舗なら店員に一声かければ済む話が、ネットでは離脱の原因になっているわけです。

この記事で取り上げる「シンプル追従電話ボタン｜お手軽お問い合わせ・電話サポート」は、ストアのすべてのページに、電話・LINE・WhatsApp へつながる追従ボタンを置く Shopify アプリです。ボタンは画面の隅に張り付いたまま、スクロールしても消えません。お客様は商品を見ている最中でも、ワンタップで電話をかけたり、LINE や WhatsApp のトーク画面を開いたりできます。

本記事では、アプリの管理画面とテーマエディタの設定項目を 1 つ残らず取り上げ、画面のスクリーンショットと一緒に解説します。画面には出てこない細かな決まり（入力できる番号の形式、ボタンが消える条件、テーマを変えたときの扱いなど）も、実装を確かめたうえで書いています。導入を検討している方も、すでに使っていて設定を見直したい方も、必要な節から読んでください。

アプリは Shopify App Store からインストールできます。管理画面の上部やアプリの一覧では、英語名の「UR:Sticky Click to Call Button」と表示されますが、同じアプリです。

シンプル追従電話ボタンとは

シンプル追従電話ボタンは、UnReact が提供する Shopify アプリです。ストアフロントの右下（または左下）に、次の 3 つのボタンを縦に並べて固定表示します。

• WhatsApp ボタン … 押すと WhatsApp のチャット画面が新しいタブで開きます
• LINE ボタン … 押すと LINE 公式アカウントの友だち追加画面が新しいタブで開きます
• 電話ボタン … スマートフォンでは押すとそのまま発信画面になり、パソコンでは電話番号そのものをボタンの中に表示します

3 つのうち、使うものだけを選んで出せます。電話だけ、LINE だけ、といった使い方もできますし、3 つすべてを並べることもできます。使わないチャネルは表示されず、ボタンの並びが自動で詰まります。

ボタンが表示される仕組み

ボタンの本体は、Shopify の「テーマアプリ拡張機能」のうち、埋め込みアプリ（App Embed）と呼ばれる形で作られています。埋め込みアプリは、テーマのコードを書き換えずに、ページの body の末尾へ部品を差し込む仕組みです。そのため、ホームページで一度オンにすれば、商品ページ・コレクションページ・カート・お問い合わせページなど、テーマが描くすべてのページに同じボタンが出ます。

連絡先（電話番号・LINE の URL・WhatsApp の番号）は、アプリの管理画面で入力し、ストアのメタフィールドに保存されます。一方、ボタンの位置や大きさといった見た目は、テーマエディタの設定としてテーマ側に保存されます。「中身は管理画面、見た目はテーマエディタ」と役割がはっきり分かれているのが、このアプリの設計上の特徴です。

この分け方には理由があります。テーマエディタの設定欄には、入力された値を検証する仕組みがありません。もし電話番号をテーマエディタで入力させると、090-1234-5678 のような国内の書き方をそのまま受け付けてしまい、WhatsApp のリンクが国番号なしで作られて、押しても誰にもつながらない状態になります。しかもエラーは一切出ません。管理画面で入力させることで、保存の前に形式を確かめ、間違っていればその場で直し方を示せるようにしています。

ストアに外部のスクリプトを読み込まない

ボタンは、テーマに同梱した小さな CSS と、課金状態を確かめるためのごく小さな JavaScript だけで描いています。外部のサーバーからウィジェットのスクリプトを読み込む方式ではないので、ページの表示速度に与える影響はわずかです。チャット系のウィジェットでよく聞く「入れたらサイトが重くなった」という不満が起きにくい作りになっています。

また、テーマアプリ拡張機能は、アプリをアンインストールすると拡張ごと取り除かれます。昔ながらの「テーマのコードにスクリプトタグを埋め込む」方式のアプリでは、アンインストールしてもボタンが残り続ける、という事故が起きることがありますが、このアプリではその心配がありません。

シンプル追従電話ボタンのメリット

問い合わせ先が、どのページにも常にある

いちばんの効果は、お客様が「聞きたい」と思ったその瞬間に、目の前に連絡手段があることです。商品ページを見ていても、カートを見直していても、ボタンは同じ場所にあります。問い合わせページを探す手間が無くなるので、迷っているお客様をそのまま取りこぼしにくくなります。

電話・LINE・WhatsApp を 1 本のアプリでまとめられる

電話ボタンだけのアプリ、LINE 誘導だけのアプリ、WhatsApp だけのアプリを別々に入れると、ボタンの位置やデザインがそろわず、画面の隅がごちゃごちゃします。このアプリなら 3 つのチャネルを 1 つの縦並びにまとめて表示できます。国内のお客様には電話と LINE、海外のお客様には WhatsApp、というように、客層に合わせてチャネルを組み合わせられます。

「押しても繋がらない」設定ミスを保存前に防げる

電話と WhatsApp は、番号の書き方が少し違うだけで繋がらなくなります。このアプリは、保存する前に番号が「＋と国番号」から始まっているかを確かめ、違っていれば保存せずにエラーを出します。LINE も、友だち追加の URL として正しい形かを確かめます。設定したつもりで実は動いていなかった、という事態を入口で止められます。

パソコンのお客様にも電話番号が伝わる

パソコンには電話アプリが設定されていないことが多く、tel: のリンクを押しても何も起きない場合があります。このアプリは、パソコンで見たときに電話ボタンの中へ番号そのものを表示します。お客様は番号を見て、手元のスマートフォンから電話をかけられます。

管理画面もストアの表示も 20 言語に対応

アプリの管理画面、テーマエディタの設定ラベル、ストアのボタンの読み上げ用ラベルが、日本語を含む 20 言語に対応しています。日本語の管理画面で設定できるので、英語のアプリに不慣れな方でも迷わずに使えます。

顧客や注文のデータに触れない

アプリが求める権限は、テーマの閲覧（read_themes）だけです。テーマの一覧を「テーマを選択」に出すために使っており、顧客・注文のデータには一切アクセスしません。お客様の個人情報を扱わないので、導入のハードルが低いアプリです。

シンプル追従電話ボタンのデメリット

便利な反面、次のような制約があります。導入前に把握しておいてください。

• チャネルごとに登録できる連絡先は 1 件だけ … 店舗別・部署別に複数の電話番号を出し分けることはできません
• ボタンが押された回数は分からない … クリック数を計測する機能はありません。効果を測りたい場合は、電話の着信数や LINE の友だち追加数など、各サービス側の数字で見てください
• 営業時間による出し分けはできない … 時間帯でボタンを隠す機能はありません。夜間は、後から返信できる LINE や WhatsApp を中心に出す、といった組み合わせで対応します
• 表示するページを選べない … 埋め込みアプリなので、チェックアウト画面を除く全ページに出ます。特定のページだけに出すことはできません
• LINE と WhatsApp の色は変えられない … お客様がひと目でサービスを見分けられるよう、それぞれのブランド色で固定しています。色を変えられるのは電話ボタンだけです
• チェックアウト画面には表示されない … これは Shopify の仕様で、埋め込みアプリはチェックアウト画面では動きません

いずれも「多機能にしすぎない」ことを優先した結果の制約です。そのぶん設定項目が少なく、入れてから数分でボタンを出せます。

料金プラン

料金は次のとおりです（2026 年 9 月時点の Shopify App Store の表示）。

• 月払い … 月額 $2.49
• 年払い … 年額 $24.90（月払いより 2 か月分お得）

インストールから 7 日間は無料で試せます。プランによる機能の制限はありません。

料金プランが無効になると（解約した場合や、料金プランを承認していない場合）、ストアのボタンは自動的に表示されなくなります。ボタンが表示されてよいかは、ストアのページを開いたときに、アプリのサーバーへ App Proxy 経由で問い合わせて確かめています。この問い合わせに失敗したとき（通信エラーなど）は、ボタンを消さずに表示したままにする作りです。アプリ側の一時的な障害で、料金をお支払いいただいているストアのボタンが消えてしまうことはありません。

インストール

インストールの流れは、ほかの Shopify アプリと同じです。

Shopify 管理画面から App Store を開く

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

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

アプリのページでインストールする

App Store の検索窓に「UR:Sticky Click to Call Button」と入力するか、アプリのページを直接開きます。詳細ページの「インストール」をクリックすると、権限の確認画面が出ます。求められるのはテーマの閲覧だけです。内容を確認してインストールし、料金プランを承認すると、アプリの管理画面が開きます。

上の画像はインストール済みのストアで撮ったため「開く」と表示されていますが、まだ入れていないストアでは同じ位置に「インストール」のボタンが出ます。

アプリ管理画面の構成

アプリを開くと「設定」という 1 枚の画面が表示されます。画面は 1 枚だけで、タブや別ページはありません。上から順に、次のカードが並んでいます。

1. テーマにボタンを追加 … ボタンをテーマで有効にする入口
2. 自動追加に失敗したときの注意（日本語表示のときだけ）
3. 連絡先の設定 … 電話・LINE・WhatsApp の連絡先の登録
4. 言語設定 … 管理画面の表示言語の切り替え
5. おすすめアプリ … UnReact の他のアプリの紹介

インストールした直後は、電話・LINE・WhatsApp のどれも無効になっています。この状態ではストアに何も表示されません。最初に済ませることは、連絡先の設定で使うチャネルを登録すること、テーマにボタンを追加すること、テーマエディタで保存すること、の 3 つです。以下、画面の上から順に説明します。

各画面の説明

テーマにボタンを追加

「テーマにボタンを追加」は、ボタンをテーマで有効にするためのカードです。カードの説明文には「テーマを選択してストアにボタンを追加します。」とあり、その下に、テーマのバージョンによっては選択欄が空になる場合がある旨の注意書きが添えられています。

このカードには、次の 3 つの操作があります。

• テーマを選択 … ストアにあるテーマの中から、ボタンを追加するテーマを選ぶ欄です。初期状態では公開中のテーマが選ばれていて、名前の後ろに「（公開中のテーマ）」と付きます。デモ用のテーマは一覧に出ません
• テーマに追加 … 選んだテーマのテーマエディタを新しいタブで開き、ボタンの埋め込みアプリがオンになった状態で表示します
• テーマをプレビュー … 選んだテーマのホームページのプレビューを新しいタブで開きます。公開前のテーマで見え方を確かめたいときに使います

「テーマに追加」で開くのは、常にホームページのテーマエディタです。埋め込みアプリはページの種類に関係なく全ページに差し込まれるので、ホームページで有効にするだけで十分です。

ここで大事なのは、テーマエディタが開いた時点では、まだストアに反映されていないということです。テーマエディタの右上の「保存」を押して、はじめて公開中のストアにボタンが出ます。トグルがオンに見えているので保存を忘れやすく、「設定したのに出ない」という問い合わせのいちばん多い原因になっています。

テーマの選択欄の中身は、アプリがテーマの一覧を読み取って作っています。テーマの種類やバージョンによってはこの一覧が空欄になることがあり、その場合はテーマエディタから手動で有効化します（手順は後述の「テーマへの追加」の節にあります）。

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

管理画面を日本語で表示しているときは、「テーマにボタンを追加」の下に、黄色い注意のバナーが出ます。「テーマに追加」をクリックしてもアプリが自動で有効にならなかった場合に、テーマ編集画面から手動で有効化するよう案内するものです。

このバナーは日本語のときだけ出す作りです。ほかの言語で表示しているときは出ません。

連絡先の設定

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

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

カードの中は、電話・LINE・WhatsApp の 3 つのまとまりに分かれていて、それぞれ「表示するかどうかのチェック」と「連絡先の入力欄」が 1 組になっています。チェックを外している間は、そのチャネルの入力欄は灰色になり、入力できません。

以下、3 つのまとまりを順に見ていきます。

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

「電話ボタンを表示する」にチェックを入れると、電話ボタンがストアに出ます。初期値はオフです。チェックの下には「スマートフォンではタップで発信します。パソコンでは番号を表示します。」という説明が添えられています。

「電話番号」には、発信先の番号を「＋」と国番号から入力します。日本の番号なら、先頭の 0 を取って +81 を付けます。たとえば 03-1234-5678 なら +81 3-1234-5678、090-1234-5678 なら +81 90-1234-5678 です。

入力のルールは次のとおりです。

• 区切りのハイフン・空白・括弧は入れても構いません。保存するときに取り除き、発信用の形（例: +819012345678）にします
• 「＋」の後ろは、0 以外で始まる 7〜15 桁の数字にしてください。これは国際電話番号の規格（E.164）に合わせた決まりです
• パソコンのボタンに表示される番号は、ここに入力した文字列そのままです。お客様に読みやすい区切り方（+81 3-9999-8888 など）で入力しておくのがおすすめです

最後の点は見落としがちです。発信に使う番号は区切りを取り除いた形に整えますが、画面に見せる番号は入力したとおりに出します。区切りなしで入力すると、パソコンのボタンにも区切りのない長い数字が並ぶことになります。

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

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

「LINE の友だち追加 URL」には、番号ではなく URL を入れます。LINE は電話番号でつながるサービスではなく、友だち追加の URL を通じてトークを始めるからです。受け付ける形式は次の 2 つだけです。

• https://lin.ee/ から始まる短縮 URL（LINE 公式アカウントの管理画面で発行されるもの）
• https://line.me/R/ti/p/ の後ろに、@ または ~ で始まる ID が続くもの

ベーシック ID だけ（@abc1234 など）を入れたり、http:// で始まる URL を入れたりすると、保存できません。下の画像は、@abc1234 とだけ入れて保存しようとしたときの表示です。欄が赤くなり、「友だち追加の URL を入力してください（例: https://lin.ee/xxxxxxx）」と出ています。

前後に入った空白は、保存するときに自動で取り除きます。LINE 公式アカウントの管理画面からコピーしたときに余計な空白が付いてきても、そのまま貼り付けて問題ありません。

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

「WhatsApp ボタンを表示する」にチェックを入れると、WhatsApp ボタンがストアに出ます。初期値はオフで、説明文は「WhatsApp のチャットを開きます。」です。

「WhatsApp の電話番号」には、WhatsApp を使っている番号を、電話番号と同じく「＋」と国番号から入力します。電話ボタンと同じ番号でも、別の番号でも構いません。

WhatsApp のリンクは、国番号を含めた数字だけの形（例: 819012345678）でないと正しく動きません。このアプリは保存するときに「＋」や区切りを取り除いて、この形にして保存します。そのため、次に管理画面を開くと、入力欄には +817011112222 のように区切りのない形で表示されます。見た目が変わっても、番号自体は正しく保存されています。

国内の書き方のまま入れると、次の画像のように保存できません。WhatsApp は国番号が分からない番号を受け取ると、エラーも出さずに誰にもつながらない画面を開いてしまうので、ここで止めています。

チェックを外すと、入力欄は灰色になって入力できなくなります。

チェックを外したまま保存すると、そのチャネルに登録していた番号や URL は消えます。一時的にボタンを隠すつもりでチェックを外した場合も、もう一度出すときは番号を入れ直す必要があります。この仕様は画面には書かれていないので、覚えておいてください。

保存する

入力が終わったら、カードのいちばん下にある「保存する」を押します。保存できると、画面の下に「保存しました」と表示されます。

形式が違う欄があると、その欄が赤くなり、直し方が表示されます。この場合は、ほかの欄も含めて何も保存されていません。電話番号を 03-9999-8888 のまま入れたときは、次のようになります。

通信などの理由で保存できなかったときは「保存に失敗しました」と表示されます。時間をおいて、もう一度押してください。

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

言語設定

「言語設定」は、アプリの管理画面の表示言語を切り替えるカードです。「言語を選択」で言語を選び、「変更する」を押すと切り替わります。

選べるのは、日本語・英語・ドイツ語・フランス語・スペイン語・イタリア語・オランダ語・デンマーク語・ノルウェー語・スウェーデン語・フィンランド語・チェコ語・ポーランド語・ポルトガル語（ブラジル）・ポルトガル語（ポルトガル）・トルコ語・タイ語・中国語（簡体字）・中国語（繁体字）・韓国語の 20 言語です。

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

おすすめアプリ

画面のいちばん下には、UnReact が提供するほかのアプリを紹介するカードがあります。アプリ名と一言の説明が並んでいて、気になるものがあればそこから詳細を確かめられます。右上の × で閉じることもできます。

テーマへの追加

ボタンをストアに出すには、テーマエディタの「埋め込みアプリ」で「電話・チャットボタン」をオンにして保存します。開き方は 2 通りあります。

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

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

見た目の設定はテーマごとに保存されます。テーマを切り替えたときは、新しいテーマでも「電話・チャットボタン」をオンにして保存し、見た目を調整し直してください。連絡先はストアに保存されているので、入れ直す必要はありません。

ストアフロントの見た目を変える

ここからは、テーマエディタの設定項目を 1 つずつ見ていきます。画像は、設定を変えたときのプレビューです。変更は右上の「保存」を押すまでストアには反映されないので、プレビューで見え方を確かめながら調整できます。

表示位置のグループ

「表示位置」は、ボタンを画面のどこに、どの端末で出すかを決めるグループです。「位置」「表示するデバイス」「下からの距離」「左右からの距離」の 4 項目があります。

位置

「位置」は、ボタンを画面の右下に出すか、左下に出すかを選ぶ項目です。選択肢は「右」と「左」で、初期値は右です。

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

表示するデバイス

「表示するデバイス」は、ボタンを出す端末を選ぶ項目です。選択肢は「すべての端末」「スマートフォンのみ」「パソコンのみ」の 3 つで、初期値は「すべての端末」です。

端末の判定は、画面の横幅で行っています。横幅 768px 未満をスマートフォン、768px 以上をパソコンとして扱います。そのため、横幅の広いタブレットは「パソコン」として扱われます。

次の画像は「スマートフォンのみ」にしたときのプレビューです。テーマエディタのプレビューはパソコンの幅なので、右下にあったボタンが消えています。

スマートフォンで見たときは、次のようにアイコンだけのボタンが並びます。電話ボタンはタップするとそのまま発信画面になります。

「スマートフォンのみ」は、パソコンのお客様にはお問い合わせフォームなど別の導線を用意していて、電話はスマートフォンからだけ受けたい、というストアに向いています。

下からの距離・左右からの距離

「下からの距離」は、画面の下端からボタンまでの距離です。「左右からの距離」は、画面の左右の端からボタンまでの距離で、「位置」で選んだ側からの距離になります。どちらも 8〜120px の範囲で、4px 刻みで調整でき、初期値は 20px です。

上の画像は「下からの距離」を 120px にしたところです。ボタンの並びが画面の下端から離れて、上に上がっています。テーマによっては、画面下に固定されるカートの追従バーやクッキーの同意バナーがあります。そうした要素とボタンが重なるときは、「下からの距離」を大きくして避けてください。

見た目のグループ

「見た目」は、ボタンの大きさと電話ボタンの色、パソコンで番号を出すかどうかを決めるグループです。「ボタンの大きさ」「電話ボタンの色」「電話番号を表示する」の 3 項目があります。

ボタンの大きさ

「ボタンの大きさ」は、ボタンの高さです。40〜76px の範囲で、2px 刻みで調整でき、初期値は 56px です。アイコンもボタンの大きさに合わせて大きくなります。

76px にすると、上の画像のようにボタンがひと回り大きくなり、目立ちます。電話やチャットでの接客に力を入れているストアに向いた設定です。逆に 40px まで小さくすると、次のように控えめな表示になります。

スマートフォンで押しやすい大きさは、おおむね 44px 以上と言われます。小さくしすぎると押し間違いが増えるので、スマートフォンのお客様が多いストアでは 48px 以上を目安にしてください。

電話ボタンの色

「電話ボタンの色」は、電話ボタンの背景色です。任意の色を選べて、初期値は #1F6FEB（青）です。色の欄を押すとカラーピッカーが開き、色コードを直接入力することもできます。

ストアのアクセントカラーに合わせると、ボタンがデザインになじみます。一方、LINE と WhatsApp のボタンの色は変わりません。それぞれ LINE の緑（#06C755）、WhatsApp の緑（#25D366）で固定しています。お客様が見慣れたブランド色のほうが、何のボタンかをひと目で分かってもらえるからです。

電話番号を表示する

「電話番号を表示する」は、パソコンで電話ボタンの横に番号を出すかどうかを決める項目です。初期値はオンで、「パソコンで表示されます。タップでの発信ができない場合があるためです。」という注記が添えられています。

オフにすると、上の画像のように電話ボタンもアイコンだけの丸いボタンになります。スマートフォンでは、この設定に関係なく常にアイコンだけです。

オンのときのパソコンの表示は次のとおりです。電話ボタンの中に、管理画面で入力した番号がそのまま出ています。

パソコンは電話アプリが設定されていないことが多く、ボタンを押しても何も起きない場合があります。特に理由がなければ、オンのままにしておくのがおすすめです。

ストアでの表示を確かめる

最後に、実際のストアでどう見えるかを確かめておきます。埋め込みアプリなので、どのページでも同じ位置にボタンが出ます。

コレクション（商品一覧）のページです。

カートのページです。カートが空の状態でも、ボタンは表示されます。

テーマのお問い合わせページにも出ます。フォームに書き込むより早く聞きたいお客様は、ここからそのまま電話や LINE に移れます。

スマートフォンでも同じです。商品ページとコレクションページの例を載せておきます。

アプリストアの掲載画像でも、全ページにボタンが出る様子と、見た目の設定をまとめて紹介しています。

ボタンには、画面の読み上げ機能向けのラベルを付けています。日本語のストアなら「電話をかける +81 3-9999-8888」「LINE で問い合わせる」「WhatsApp で問い合わせる」と読み上げられ、ほかの言語のページではその言語のラベルに切り替わります。LINE と WhatsApp は新しいタブで開くので、お客様がストアのページを見失うこともありません。

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

設定項目の組み合わせで、ストアに合った置き方ができます。よくある場面ごとに、おすすめの設定をまとめます。

右下のチャットボタンと重なるとき

右下にすでにチャットやレビューのウィジェットがあるストアでは、「位置」を左にするのがいちばん簡単です。どうしても右側に置きたい場合は、「下からの距離」を大きくして、既存のボタンの上に積むように配置してください。

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

「ボタンの大きさ」を 64〜76px に上げ、「電話ボタンの色」をストアのアクセントカラーに合わせます。番号も見せたいなら「電話番号を表示する」はオンのままにします。高額な商品や、サイズ・仕様の相談が多い商品を扱うストアで効果的です。

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

「ボタンの大きさ」を 40〜48px に下げ、「電話番号を表示する」をオフにします。「下からの距離」と「左右からの距離」を 8〜12px にすると、画面の隅に寄って目立ちにくくなります。デザインを重視したブランドサイトで、問い合わせ先は用意しつつ主張させたくない場合に向いています。

国内と海外の両方にお客様がいるとき

電話と LINE を国内向け、WhatsApp を海外向けとして 3 つとも出しておくと、お客様が普段使っている手段を選べます。電話番号は国番号付きで登録するので、海外からの発信にもそのまま使えます。

営業時間外の問い合わせを取りこぼしたくないとき

このアプリには時間帯で出し分ける機能はありません。夜間や休日の問い合わせは、電話より LINE や WhatsApp のほうが受け止めやすいので、電話と一緒にこの 2 つも出しておき、翌営業日に返信する運用がおすすめです。

うまく表示されないとき

ボタンが出ないときは、次の順に確かめてください。

1. 連絡先の設定で、どのチャネルにもチェックが入っていない。チェックが 1 つも無い、または入力欄が空のままだと、ボタンは入れ物ごと表示されません
2. テーマエディタで「保存」を押していない。トグルがオンに見えていても、保存するまでストアには出ません
3. 公開中ではないテーマに追加している。「テーマを選択」で選んだテーマが公開中のものかを確かめてください
4. 料金プランが有効になっていない。料金プランが無効のストアでは、ボタンは自動的に非表示になります
5. ブラウザのキャッシュが残っている。ページを再読み込みするか、しばらく待ってから確かめてください

料金プランを承認した直後にボタンが出ないことがあります。表示してよいかの判定結果を、お客様のブラウザに 10 分間覚えさせているためです。承認する前から開いていたタブでは、最大 10 分ボタンが出ません。タブを閉じて開き直せば表示されます。

WhatsApp のボタンを押しても相手につながらない場合は、登録した番号で WhatsApp のアカウントを使っているかを確かめてください。アプリは番号の形式は確かめますが、その番号が WhatsApp に登録されているかまでは分かりません。

コードで自作する場合

電話・LINE・WhatsApp の追従ボタンは、テーマのコードを直接編集すれば、アプリを使わずに作ることもできます。ここでは、Shopify のテーマに自分でボタンを組み込む方法を紹介します。仕組みを知っておくと、アプリが何を肩代わりしているのかも見えてきます。

作業は、Shopify 管理画面の「オンラインストア」から「テーマ」を開き、「…」から「コードを編集」を選んで行います。編集する前に、必ずテーマを複製してバックアップを取ってください。

ボタンの部品を snippet として作る

まず、snippets フォルダに contact-buttons.liquid というファイルを作り、ボタンの HTML を書きます。連絡先は、テーマの設定で入力できるように settings から読む形にしています。

{%- comment -%}
  snippets/contact-buttons.liquid
  連絡先は settings_schema.json に追加した設定から読む
{%- endcomment -%}
{%- assign tel = settings.contact_tel | strip -%}
{%- assign line_url = settings.contact_line_url | strip -%}
{%- assign wa = settings.contact_whatsapp | remove: '+' | remove: '-' | remove: ' ' -%}

{%- if tel != blank or line_url != blank or wa != blank -%}
  <div class="contact-buttons" role="complementary">
    {%- if wa != blank -%}
      <a class="contact-buttons__item contact-buttons__item--wa"
         href="https://wa.me/{{ wa }}" target="_blank" rel="noopener"
         aria-label="WhatsApp で問い合わせる">WA</a>
    {%- endif -%}
    {%- if line_url != blank -%}
      <a class="contact-buttons__item contact-buttons__item--line"
         href="{{ line_url }}" target="_blank" rel="noopener"
         aria-label="LINE で問い合わせる">LINE</a>
    {%- endif -%}
    {%- if tel != blank -%}
      <a class="contact-buttons__item contact-buttons__item--tel"
         href="tel:{{ tel | remove: '-' | remove: ' ' }}"
         aria-label="電話をかける {{ tel }}">
        <span class="contact-buttons__number">{{ tel }}</span>
      </a>
    {%- endif -%}
  </div>
{%- endif -%}

ここでのポイントは、WhatsApp の番号から「＋」やハイフンを取り除いている部分です。wa.me のリンクは国番号から始まる数字だけでないと動かないため、Liquid の remove フィルターで記号を消しています。ただし、この書き方では 090-1234-5678 のような国番号なしの番号が入力されたときに、それを止める手段がありません。消した結果が 09012345678 になり、そのままリンクになってしまいます。

画面の隅に固定する CSS を書く

次に、assets フォルダに contact-buttons.css を作り、ボタンを画面の右下に固定します。

.contact-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.contact-buttons__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.contact-buttons__item--wa { background: #25d366; }
.contact-buttons__item--line { background: #06c755; }
.contact-buttons__item--tel { background: #1f6feb; padding: 0 20px; }

/* スマートフォンでは番号を隠してアイコンだけにする */
@media (max-width: 767px) {
  .contact-buttons__number { display: none; }
}

position: fixed で画面に固定し、z-index を大きくしてテーマの要素より手前に出しています。スマートフォンでは番号の文字を隠し、ボタンを小さく保つようにメディアクエリで切り替えています。実際には、ここにアイコンの SVG を入れたり、左右の位置を切り替えられるようにしたりと、さらに手を加える必要があります。

layout/theme.liquid から読み込む

最後に、layout/theme.liquid の body の閉じタグの直前で、CSS と snippet を読み込みます。

{{ 'contact-buttons.css' | asset_url | stylesheet_tag }}
{%- render 'contact-buttons' -%}
</body>

これで全ページにボタンが出ます。あわせて、config/settings_schema.json に contact_tel・contact_line_url・contact_whatsapp の 3 つのテキスト設定を追加すれば、テーマエディタから連絡先を入力できるようになります。

入力された番号を確かめるには

テーマエディタの設定欄には、入力値を検証する仕組みがありません。そこで、せめてブラウザ側で番号の形式を確かめ、おかしければボタンを出さない、という対策が考えられます。

// 国際電話番号（E.164）の形か確かめる：+ の後に 0 以外で始まる 7〜15 桁
const isE164 = (value) => /^\+[1-9]\d{6,14}$/.test(value.replace(/[\s()-]/g, ''));

document.querySelectorAll('.contact-buttons__item--tel').forEach((a) => {
  const number = a.getAttribute('href').replace('tel:', '');
  if (!isE164(number)) {
    // 形式が違う番号はボタンごと隠す（押しても繋がらないため）
    a.remove();
    console.warn('電話番号が国際表記ではありません:', number);
  }
});

このスクリプトは、電話ボタンのリンク先が「＋と国番号」で始まる形かを正規表現で確かめ、違っていればボタンを取り除きます。ただし、これはお客様のブラウザで動くので、ストアオーナーが入力を間違えたことに気づく手段にはなりません。ボタンが黙って消えるだけで、原因を調べるにはブラウザの開発者ツールを開く必要があります。

自作とアプリの違い

ここまでのコードで、見た目の上では追従ボタンを作れます。ただし、実際に運用するには次のような手間がかかります。

• テーマを更新したり別のテーマに切り替えたりするたびに、snippet と CSS を移し替える必要があります
• 入力された番号の形式を、保存の時点で止めることができません。間違いに気づけるのは、お客様から「つながらない」と言われたときです
• アイコンの用意、左右の切り替え、端末ごとの出し分け、読み上げ用ラベルの多言語化を、すべて自分で書く必要があります
• テーマのコードを直接編集するので、書き間違いでページ全体の表示が崩れる危険があります

シンプル追従電話ボタンは、これらをテーマアプリ拡張機能と管理画面の入力チェックで引き受けています。コードを触らずに済み、テーマを切り替えても連絡先はそのまま残ります。月額 $2.49 で、この保守の手間を手放せると考えると、自作よりもアプリを選ぶ理由は十分にあると言えるでしょう。

競合アプリとの比較

Shopify App Store には、電話やチャットの追従ボタンを置くアプリがほかにもあります。代表的なものを 5 本取り上げ、シンプル追従電話ボタンとの違いを見ていきます。料金・評価・対応言語は、2026 年 9 月時点のアプリストアの表示です。

Chaty Chat Buttons & WhatsApp

WhatsApp をはじめ、複数のチャットのボタンをまとめて出せるマルチチャネル型のアプリです。今回取り上げた 5 本の中ではレビューの数が最も多く、評価は 4.9（314 件）です。

有料プランは $15/月 からで、上位のプランも用意されています。対応言語は英語のみです。多くのチャネルを扱えるぶん選ぶことも増えるので、電話・LINE・WhatsApp の 3 つで足りるストアなら、シンプル追従電話ボタンのほうが手早く設定を終えられます。LINE を日本語の管理画面で設定できる点も、国内のストアには分かりやすい違いです。

アプリのページ：Chaty Chat Buttons & WhatsApp

Floatify: Social & CTA Buttons

SNS への誘導や問い合わせのボタンを画面に浮かせて置けるアプリで、評価は 5（68 件）です。無料プランがあり、有料プランは $4.99/月 です。

対応言語は英語のみです。SNS への誘導ボタンを含めて多くの種類を並べたいストアに向いています。一方、電話番号の形式を保存前に確かめる仕組みや、パソコンで電話番号を表示する仕組みのように、「つながること」に絞った工夫はシンプル追従電話ボタンの特徴です。

アプリのページ：Floatify: Social & CTA Buttons

GetButton: WhatsApp, FB & More

WhatsApp・Facebook Messenger・Viber など 20 種類以上のボタンを出せるアプリで、評価は 4（45 件）です。料金は $4.99/月 で、14 日間の無料体験があります。

対応言語は英語のみです。扱えるボタンの種類が多いので、チャネルの数を重視する場合の選択肢になります。LINE を含む日本向けの 3 チャネルを、日本語の管理画面で扱いたいならシンプル追従電話ボタンが合っています。

アプリのページ：GetButton: WhatsApp, FB & More

SimpleCall ‑ Click to Call

電話ボタンに特化したアプリで、評価は 3.8（15 件）です。料金は $1.49/月 で、3 日間の無料体験があります。

電話専用なので、LINE や WhatsApp のボタンはありません。対応言語は英語のみです。価格は近い水準ですが、シンプル追従電話ボタンは同じくらいの価格で LINE と WhatsApp もまとめて出せ、日本語の管理画面で設定できます。

アプリのページ：SimpleCall ‑ Click to Call

Elfsight Click To Call Button

Elfsight が提供する電話ボタンのアプリです。料金は $5.99/月 で、7 日間の無料体験があります。調べた時点では、レビューはまだ付いていませんでした。

対応言語は英語のみです。電話ボタン単体としてはシンプル追従電話ボタンより価格が高めです。

アプリのページ：Elfsight Click To Call Button

比較してわかること

5 本を並べると、シンプル追従電話ボタンの立ち位置がはっきりします。

• 日本語で使える … 取り上げた 5 本は、いずれも英語のみの対応でした。シンプル追従電話ボタンは管理画面もテーマエディタの設定も日本語で使えます
• LINE を正式に扱える … 日本で問い合わせに使われることの多い LINE を、友だち追加の URL の形まで確かめたうえで設定できます
• つながることを最優先にしている … 番号の形式を保存前に確かめる仕組み、パソコンで番号を見せる仕組みは、ボタンを押したあとに確実に相手へ届くための工夫です
• 月額 $2.49 の定額 … 訪問者数や表示回数で料金が変わることはありません

反対に、Instagram や Messenger など、電話・LINE・WhatsApp 以外のチャネルも並べたい場合や、クリック数を計測したい場合は、マルチチャネル型のアプリが向いています。自分のストアで本当に必要なチャネルはどれかを考えて選ぶのが、いちばん失敗の少ない選び方です。

まとめ

シンプル追従電話ボタンは、「買う前にちょっと聞きたい」お客様を、その場で店とつなぐためのアプリです。

• 電話・LINE・WhatsApp のボタンを、チェックアウト画面を除く全ページに追従表示できます
• 連絡先は管理画面で一度入力するだけで、番号と URL の形式を保存前に確かめます
• 位置・距離・大きさ・電話ボタンの色・表示する端末・番号の表示を、テーマエディタで調整できます
• パソコンでは電話番号そのものを見せるので、電話をかけられない環境のお客様にも番号が伝わります
• 管理画面・テーマエディタ・ストアの表示が 20 言語に対応し、顧客や注文のデータには触れません

問い合わせの入り口は、お客様が探しに行く場所ではなく、お客様の目の前にあるべきものです。料金は月額 $2.49（年払いなら $24.90）で、インストールから 7 日間は無料で試せます。まずは電話と LINE の 2 つだけでも、全ページに置いてみてください。

インストールと料金プランの詳細は、Shopify App Store のアプリのページで確かめられます。

おすすめ Shopify アプリ

シンプル追従電話ボタンと組み合わせると、問い合わせや来店につながる導線をさらに整えられる、UnReact のアプリを紹介します。

シンプルLINE誘導｜お手軽追従LINEアイコン

LINE への誘導アイコンを、ストアに追従表示するアプリです。LINE だけを大きく目立たせたい場合や、アイコンのデザインにこだわりたい場合に向いています。シンプルLINE誘導の料金は $3.99/月 で、7 日間の無料体験があります。

アプリのページ：シンプルLINE誘導｜お手軽追従LINEアイコン

シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ

お問い合わせフォームの項目を自由に組み立てられるアプリです。電話や LINE では伝えにくい、写真付きの相談や長い問い合わせを受けたいときに役立ちます。シンプルお問い合わせフォームの料金は $9.99/月 で、7 日間の無料体験があります。

アプリのページ：シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ

シンプル追従営業日カレンダー｜お手軽追従休業日設定

営業日と休業日のカレンダーを、ストアに追従表示するアプリです。電話がつながる日をお客様に先に伝えておけるので、休業日の電話を減らせます。シンプル追従営業日カレンダーの料金は $6.99/月 で、7 日間の無料体験があります。

アプリのページ：シンプル追従営業日カレンダー｜お手軽追従休業日設定

シンプルサンクスページLINE友だち追加

注文完了後のサンクスページに、LINE の友だち追加を案内するアプリです。購入したお客様とのつながりを、次の購入や問い合わせに生かせます。シンプルサンクスページLINE友だち追加の料金は $1.99/月 で、7 日間の無料体験があります。

アプリのページ：シンプルサンクスページLINE友だち追加

シンプルアコーディオン表示｜お手軽折りたたみタブ

よくある質問などを、折りたたみ式のアコーディオンで表示するアプリです。よく聞かれる質問の答えを先に載せておけば、問い合わせの手間をお互いに減らせます。シンプルアコーディオン表示の料金は $3.99/月 で、7 日間の無料体験があります。

アプリのページ：シンプルアコーディオン表示｜お手軽折りたたみタブ