Shopifyでフォーム一体型LPを導入して、チャットボット購入を行う方法を徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/31

はじめに

Shopify（ショッピファイ）は、世界中で多くのお店が利用しているネットショップ作成サービスです。そして「Shopify アプリ」は、その Shopify ストアにさまざまな機能を追加できる拡張プログラムです。アプリを導入することで、コーディングの知識がなくても、お店に新しい機能を簡単に取り入れることができます。

このガイドでご紹介する 「シンプルフォーム一体型LP｜お手軽チャットボット購入」 は、チャットUIと購入フォームをひとつのページに統合したテーマ拡張アプリです。お客様は画面右下のチャットボタンをタップするだけで、チャット形式でステップごとに注文を進められます。バリアント（商品の種類）選択・連絡先・配送先の入力が会話感覚で進むので、お客様が迷わず注文を完了できます。固定フォームとチャットは常に同期されているため、どちらからでも注文が可能です。

すべての設定はテーマエディタで完結します。吹き出しメッセージ・訴求画像・ボタンの色や位置・オペレーターアバターなど、細かいデザインもコードなしで調整でき、コーディング不要で手軽に導入できるのが特長です。

料金について

Basic Plan 月額 $49.99（または年払い $499.90 で 17% お得）でご利用いただけます。インストールから 7 日間は無料でアプリをお試しいただけます。また、年払いを選ぶと実質 2 ヶ月分が無料になり、お得にご利用いただけます。

アプリストアはこちら

シンプルフォーム一体型LP｜お手軽チャットボット購入 - Shopify App Store

フォーム一体型LP・チャットボット形式の購入フォームをストアに設置できる！

「シンプルフォーム一体型LP｜お手軽チャットボット購入」でできること

このアプリは、チャット形式の購入フォームと、フォーム一体型のランディングページ（LP）をストアに設置できるテーマ拡張アプリです。お客様は会話を進める感覚で、商品の選択から連絡先・配送先の入力までをスムーズに行えます。固定フォームとチャットフォームは常に同期しているので、お客様はどちらのスタイルでも注文を完了できます。設定はすべてテーマエディタから行えるため、専門知識がなくても安心してご利用いただけます。

フォーム一体型LP・チャットボット形式の購入フォームをストアに設置できる！

主な特徴

チャット形式のステップ入力で、お客様が迷わず注文を完了できます。
固定フォームとチャットフォームが同期。どちらから入力しても注文できます。
商品・吹き出し・ボタン色など、テーマエディタでコードなしにカスタマイズできます。
画像カードやコード入力でクーポンを適用できます。
スマホでは横幅いっぱいの固定ボタンも設置でき、モバイルでの購入を後押しします。

チャットボットで購入することができる！

画面右下のチャットボタンをタップすると、チャット形式で注文を進められます。お客様は会話に答えていく感覚で、商品の選択から連絡先・配送先の入力までを完了できます。フォーム入力に苦手意識のあるお客様でも、迷わず注文できるのが魅力です。

チャットボットで購入することができる！

フォーム一体型LPを導入することができる！

商品紹介と購入フォームをひとつにまとめた、フォーム一体型のランディングページを設置できます。訴求画像や吹き出しメッセージを使って商品の魅力を伝えながら、そのまま注文へつなげられるため、コンバージョン向上が期待できます。

フォーム一体型LPを導入することができる！

フォーム一体型LPとチャットボットを同期できる！

固定フォームとチャットフォームの入力内容は常に同期されています。お客様がどちらで入力を始めても、もう一方に内容が反映されるため、入力途中で迷っても安心です。お客様の好みのスタイルで注文を完了できます。

フォーム一体型LPとチャットボットを同期できる！

様々な項目をノーコードで編集できる！

商品・吹き出しメッセージ・訴求画像・ボタンの色や位置・オペレーターアバターなど、さまざまな項目をテーマエディタから編集できます。コードを書く必要がないので、デザインの調整やメッセージの変更もどなたでも手軽に行えます。

様々な項目をノーコードで編集できる！

入力内容を標準の決済ページへ自動反映できる！

チャットやフォームで入力された連絡先・配送先などの内容は、Shopify 標準の決済ページへ自動的に反映されます。お客様が同じ情報を二度入力する手間がなくなり、スムーズに決済まで進めます。

入力内容を標準の決済ページへ自動反映できる！

1クリックでテーマに追加できる！

アプリの管理画面から、追加したいテーマを選んでボタンをクリックするだけで、簡単にストアへ機能を追加できます。難しい設定は不要で、すぐにご利用を開始できます。

1クリックでテーマに追加できる！

アプリのインストール

まずはアプリストアからアプリをインストールしましょう。

シンプルフォーム一体型LP｜お手軽チャットボット購入 - Shopify App Store

料金：Basic Plan 月額 $49.99（または年払い $499.90 で 17% お得）。インストールから 7 日間は無料でお試しいただけます。年払いを選ぶと実質 2 ヶ月分が無料になり、お得にご利用いただけます。

インストールの手順は以下の通りです。

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
検索窓にアプリ名「シンプルフォーム一体型LP｜お手軽チャットボット購入」を入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので、内容を確認して「インストール」を完了します。

アプリブロックをテーマに追加

アプリをインストールしたら、ストアのテーマにアプリブロックを追加して機能を有効にします。追加方法には「自動でテーマに追加」と「手動でテーマに追加」の 2 通りがあります。

自動でテーマに追加（1 クリック追加）

もっとも簡単な方法です。アプリの管理画面から、ワンクリックでテーマに追加できます。

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

手動でテーマに追加（任意ページに設置したい場合）

特定のページにブロックを設置したい場合は、テーマエディタから手動で追加します。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブからアプリブロックを選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

アプリのカスタマイズ

テーマエディタでブロックを選択すると、右側のパネルでさまざまな設定を行えます。ここでは設定項目をグループごとにご紹介します。お店や商品に合わせて、自由にカスタマイズしてください。

商品設定

販売する商品を指定する設定です。

商品：チャット・フォームで販売する商品を選択します。ここで選んだ商品のバリアント（種類）や価格が、購入フォームに反映されます。

商品設定の設定画面

ポップアップ設定

チャットを開いた際に表示される、見出しやボタンの文言を設定します。お客様の購入意欲を高めるメッセージに変更すると効果的です。

タイトル：ポップアップの見出しです。初期値は「30秒でカンタン入力！」です。手軽さや所要時間を伝える文言にすると、お客様が安心して入力を始められます。
サブタイトル：タイトルを補足する文言です。初期値は「今すぐカンタンお申し込み！」です。
フォーム送信ボタンの文字：入力フォームの送信ボタンに表示する文言です。初期値は「決済情報を入力へ」です。次のステップが分かる文言にするのがおすすめです。
確認画面の送信ボタンの文字：確認画面に表示する送信ボタンの文言です。初期値は「決済情報を入力へ」です。

ポップアップ設定の設定画面

チャット表示設定

チャット画面に表示するアバターやメッセージ、訴求画像を設定します。商品の魅力を伝える重要なグループです。

オペレーターアバター画像：チャットの吹き出しに表示するアバター画像です。未設定の場合はデフォルト画像が使用されます。お店の雰囲気に合った画像を設定すると、親しみやすさが増します。
吹き出しメッセージ：チャットの最初に表示するメッセージです。初期値は「こちらから公式サイト限定価格でご注文いただけます。是非この機会にお申し込みください。」です。お客様への呼びかけや特典の案内に活用できます。
商品画像の差し替え：設定すると、商品名・価格の代わりにこの画像が表示されます。商品の魅力をより伝えたい場合に便利です。
訴求画像 1：チャットを開いた際、商品情報の下に順番に表示される画像です。商品の特長やお客様の声などを画像で伝えるのに役立ちます。
訴求画像 2：訴求画像 1 に続いて表示される画像です。
訴求画像 3：訴求画像 2 に続いて表示される画像です。

チャット表示設定の設定画面

チェックアウト設定

注文時に入力していただく項目や、クーポン機能を設定します。商材や運用方針に合わせて、必須・任意・非表示を選べます。

姓名の設定：お客様のお名前の入力方法を選択します。
- 姓のみ：姓だけを入力していただきます。
- 姓名の両方を必須：姓と名の両方を必須にします（初期値）。
配送先電話番号：電話番号欄の表示方法を選択します。配送連絡に電話番号が必要な場合は「必須」がおすすめです。
- 非表示（初期値）／任意／必須
会社名：会社名欄の表示方法を選択します。法人のお客様が多い場合に活用できます。
- 非表示（初期値）／任意／必須
住所2（建物名・部屋番号）：建物名や部屋番号の入力欄の表示方法を選択します。
- 非表示／任意（初期値）／必須
クーポン機能：クーポン入力・選択の機能を表示するかどうかを選択します。
- 非表示（初期値）／表示
クーポンの選択方式：クーポンの提示方法を選択します。「画像カードで選択」は固定フォームにも対応しています。
- 画像カードで選択（初期値）：画像のカードでクーポンを選んでもらう方式です。視覚的に分かりやすく、利用を促せます。
- コード入力欄：お客様にクーポンコードを入力してもらう方式です。
「利用する」選択肢の画像：画像カード方式の場合に、クーポンを「利用する」選択肢として表示する画像です。
「利用しない」選択肢の画像：画像カード方式の場合に、クーポンを「利用しない」選択肢として表示する画像です。
クーポンコード：適用するクーポンのコードを入力します。

チェックアウト設定の設定画面

UI設定

ボタンの色や位置、チャットボタンのデザインなど、見た目に関する設定をまとめたグループです。お店のブランドカラーに合わせて調整できます。

ヘッダー・見出しの背景色：ヘッダーや見出しの背景色です（初期値 #5bbcb5）。
送信ボタン・必須バッジの色：送信ボタンや必須バッジの色です（初期値 #e8594f）。
次へボタンの色：次へ進むボタンの色です（初期値 #f0932b）。
更新ボタンの色：更新ボタンの色です（初期値 #e8594f）。
進捗バーの色：入力ステップの進捗を示すバーの色です（初期値 #f0932b）。
チャットアイコンの文言：チャットボタンに表示する文言です（初期値「購入する」）。ボタン画像を設定した場合、この設定は表示されません。
チャットボタン画像（PC）：PC でチャットボタンとして表示する画像です。お店のデザインに合わせたボタンを設置できます。
チャットボタン画像（スマホ）：スマホでチャットボタンとして表示する画像です。設定する場合は「チャットボタン画像（PC）」も合わせて設定してください。未設定の場合、PC ではボタンが表示されません。
チャットボタンの大きさ（PC）：PC でのチャットボタンのサイズです（40〜200px、初期値 60px）。
チャットボタンの大きさ（スマホ）：スマホでのチャットボタンのサイズです（40〜200px、初期値 60px）。
チャットボタン位置（下）：画面下端からのボタンの距離です（0〜100px、初期値 20px）。
チャットボタン位置（右）：画面右端からのボタンの距離です（0〜100px、初期値 8px）。
チャットアイコンの色：チャットアイコンの色です（初期値 #5bbcb5）。ボタン画像を設定した場合、この設定は適用されません。
チャット吹き出しの背景色：チャットの吹き出しの背景色です（初期値 #f0f0f0）。
フォーム入力欄の背景色：フォーム入力欄の背景色です（初期値 #fdf5e6）。
スマホ用チャットボタンの表示：スマホでのチャットボタンの表示方法を選択します。「画面下部に固定」を利用する際は「チャットボタン画像（スマホ）」の設定が必須です。
- 右下に固定（初期値）：画面の右下にボタンを固定表示します。
- 画面下部に固定（横幅いっぱい）：画面下部に横幅いっぱいのボタンを固定表示します。モバイルでの購入を後押ししたい場合におすすめです。