Shopifyで作成したネットショップにformrunのフォームを表示する方法
■目次
Shopifyで作成したネットショップにformrunのフォームを表示する方法
Shopifyで作成したネットショップにformrunのフォームを表示する方法は4つあります。
なお、Shopify上にformrunを埋め込む場合は「テーマセクションに埋め込み」が簡単です。
※Shopifyストアにformrunのフォームが表示されない場合、こちらをご確認ください。
テーマセクションに埋め込み
特定のモジュール(セクション・要素)の設置や詳細の変更をリアルタイムで行えるページから、formrunで作成したフォームを埋め込むことができます。
Shopify画面「アプリ>formrun」より、「テーマセクションに埋め込み」をクリックします。
![](https://faq.form.run/hubfs/undefined-Nov-09-2022-08-27-24-9116-AM.png)
Shopify画面「アプリ>設定>テーマ選択」に自動遷移後、任意のテーマを選択してインストールします。
![](https://faq.form.run/hubfs/undefined-Nov-09-2022-12-25-10-0841-AM.png)
「インストール済み」と表示されたことを確認してください。
![](https://faq.form.run/hubfs/undefined-Nov-09-2022-12-25-09-7886-AM.png)
Shopify画面「ホーム>テーマをカスタマイズする」より、「テーマをカスタマイズする」をクリックします。
![](https://faq.form.run/hubfs/undefined-Nov-09-2022-12-25-10-6783-AM.png)
遷移した画面の該当テーマにて「カスタマイズ」をクリックします。
![](https://faq.form.run/hubfs/undefined-Nov-09-2022-12-25-10-3582-AM.png)
「セクションを追加>formrun〇〇(フォーム名)」をクリックします。
![](https://faq.form.run/hubfs/undefined-Nov-09-2022-12-25-09-2802-AM.png)
Shopifyの画面に戻り「保存する」をクリックするとフォームが表示され、formrunで作成したフォームが埋め込まれていることを確認できます。
なお、フォームの表示位置を変更したい場合は、ドラッグ&ドロップで変更できます。
iframeタグでブログやページ埋め込み
Shopify内にformrunで作成したフォームを埋め込むことが可能です。ただし、Liquidファイルを作成する必要があるため、HTMLとCSSを把握していて、Liquidについての基本的な知識がある場合のみ、こちらを参考にご利用ください。
なお、こちらの機能は、
デザイナー・エンジニア向けの機能のため、
formrun側で設置作業におけるサポートは行なっておりませんので、ご了承くださいませ。
「iframeタグでブログやページ埋め込み」をクリックします。
![](https://ferret-one.akamaized.net/images/60ece245d32e052569c014cd/large.png?utime=1626137157)
スクリプトが表示されたら、「コピー」をクリックします。
![](https://ferret-one.akamaized.net/images/6018a431d9c75738b1178a99/large.png?utime=1612227633)
「オンラインストア>テーマ」の「・・・」をクリックし、「コードを編集」をクリックします。
![](https://faq.form.run/hubfs/undefined-Nov-09-2022-12-25-09-5744-AM.png)
先ほどコピーしたテキストを貼り付けたら、「保存する」をクリックします。
「プレビュー」をクリックし、プレビュー先の画面でリロードすることで、プレビュー表示を確認できます。
![](https://ferret-one.akamaized.net/images/601931b27ef3a912ab560187/large.png?utime=1612263858)
URLをコピーしてリンク設定
クリックすることで、formrunで作成したURLをコピーできます。Shopify内の任意の箇所へコピーしたURLをペーストしてください。
![](https://ferret-one.akamaized.net/images/60ece2768fd3113c99e06182/large.png?utime=1626137206)
QRコード表示
クリックすることで、formrunで作成したフォームのQRコードを表示できます。
ダウンロードし、サイトに貼り付けてフォームへ流入させることも可能です。
![](https://ferret-one.akamaized.net/images/600f67f45e8d702c5d7080fd/large.png?utime=1611622388)
Shopifyストアにフォームが表示されない場合
有料プランに変更できていない/無料トライアルの期間が過ぎている
Shopifyへの埋め込みを行うためには、以下が必須条件となります。
- 有料プラン(BEGINNERプラン以上)
- 無料トライアル期間中である
API連携後に、Shopifyストアのドメインを変更した
formrunとShopifyをAPI連携した後に、Shopifyの管理画面からShopifyストアのドメインを変更した場合は、Shopifyストアにformrunが表示されない場合があります。
上記の場合は、以下の手順で操作してください。
- 設定画面「フォームの設置>フォームの埋め込み(iframe)」より画面遷移。
- 「フォームの埋め込み先を指定」の「フォーム設置先(ドメインまたはURL)」に、変更後のShopifyストアのドメインを入力する。
- 「更新する」をクリックする。
![](https://faq.form.run/hubfs/undefined-Jan-16-2023-09-49-17-0463-AM.png)