Shopifyで作成したネットショップにformrunのフォームを表示する方法

Shopifyで作成したネットショップにformrunのフォームを表示する方法、フォームが表示されない場合の対応について説明します。

Shopifyで作成したネットショップにformrunのフォームを表示する方法

Shopifyで作成したネットショップにformrunのフォームを表示する方法は4つあります。

なお、Shopify上にformrunを埋め込む場合は「テーマセクションに埋め込み」が簡単です。
 

Shopifyストアにformrunのフォームが表示されない場合、こちらをご確認ください。

テーマセクションに埋め込み

特定のモジュール(セクション・要素)の設置や詳細の変更をリアルタイムで行えるページから、formrunで作成したフォームを埋め込むことができます。

Shopify画面「アプリ>formrun」より、「テーマセクションに埋め込み」をクリックします。

Shopify画面「アプリ>設定>テーマ選択」に自動遷移後、任意のテーマを選択してインストールします。

 

「インストール済み」と表示されたことを確認してください。

Shopify画面「ホーム>テーマをカスタマイズする」より、「テーマをカスタマイズする」をクリックします。

 

遷移した画面の該当テーマにて「カスタマイズ」をクリックします。

「セクションを追加>formrun〇〇(フォーム名)」をクリックします。

Shopifyの画面に戻り「保存する」をクリックするとフォームが表示され、formrunで作成したフォームが埋め込まれていることを確認できます。

なお、フォームの表示位置を変更したい場合は、ドラッグ&ドロップで変更できます。

 
iframeタグでブログやページ埋め込み

Shopify内にformrunで作成したフォームを埋め込むことが可能です。ただし、Liquidファイルを作成する必要があるため、HTMLとCSSを把握していて、Liquidについての基本的な知識がある場合のみ、こちらを参考にご利用ください。

なお、こちらの機能は、
デザイナー・エンジニア向けの機能のため、
formrun側で設置作業におけるサポートは行なっておりませんので、ご了承くださいませ。

「iframeタグでブログやページ埋め込み」をクリックします。

スクリプトが表示されたら、「コピー」をクリックします。

「オンラインストア>テーマ」の「・・・」をクリックし、「コードを編集」をクリックします。

 

先ほどコピーしたテキストを貼り付けたら、「保存する」をクリックします。

「プレビュー」をクリックし、プレビュー先の画面でリロードすることで、プレビュー表示を確認できます。

URLをコピーしてリンク設定

クリックすることで、formrunで作成したURLをコピーできます。Shopify内の任意の箇所へコピーしたURLをペーストしてください。

QRコード表示

クリックすることで、formrunで作成したフォームのQRコードを表示できます。
ダウンロードし、サイトに貼り付けてフォームへ流入させることも可能です。

 
 

テーマセクションに埋め込み

特定のモジュール(セクション・要素)の設置や詳細の変更をリアルタイムで行えるページから、formrunで作成したフォームを埋め込むことができます。

Shopify画面「アプリ>formrun」より、「テーマセクションに埋め込み」をクリックします。

Shopify画面「アプリ>設定>テーマ選択」に自動遷移後、任意のテーマを選択してインストールします。

 

「インストール済み」と表示されたことを確認してください。

Shopify画面「ホーム>テーマをカスタマイズする」より、「テーマをカスタマイズする」をクリックします。

 

遷移した画面の該当テーマにて「カスタマイズ」をクリックします。

「セクションを追加>formrun〇〇(フォーム名)」をクリックします。

Shopifyの画面に戻り「保存する」をクリックするとフォームが表示され、formrunで作成したフォームが埋め込まれていることを確認できます。

なお、フォームの表示位置を変更したい場合は、ドラッグ&ドロップで変更できます。

 
iframeタグでブログやページ埋め込み

Shopify内にformrunで作成したフォームを埋め込むことが可能です。ただし、Liquidファイルを作成する必要があるため、HTMLとCSSを把握していて、Liquidについての基本的な知識がある場合のみ、こちらを参考にご利用ください。

なお、こちらの機能は、
デザイナー・エンジニア向けの機能のため、
formrun側で設置作業におけるサポートは行なっておりませんので、ご了承くださいませ。

「iframeタグでブログやページ埋め込み」をクリックします。

スクリプトが表示されたら、「コピー」をクリックします。

「オンラインストア>テーマ」の「・・・」をクリックし、「コードを編集」をクリックします。

 

先ほどコピーしたテキストを貼り付けたら、「保存する」をクリックします。

「プレビュー」をクリックし、プレビュー先の画面でリロードすることで、プレビュー表示を確認できます。

URLをコピーしてリンク設定

クリックすることで、formrunで作成したURLをコピーできます。Shopify内の任意の箇所へコピーしたURLをペーストしてください。

QRコード表示

クリックすることで、formrunで作成したフォームのQRコードを表示できます。
ダウンロードし、サイトに貼り付けてフォームへ流入させることも可能です。

 

有料プランに変更できていない/無料トライアルの期間が過ぎている

Shopify連携を行うためには、以下が必須条件となります。

  • 有料プラン(BEGINNERプラン以上)
  • 無料トライアル期間中である

それぞれについては、プラン変更画面よりご確認ください。

API連携後に、Shopifyストアのドメインを変更した

formrunとShopifyをAPI連携した後に、Shopifyの管理画面からShopifyストアのドメインを変更した場合は、Shopifyストアにformrunが表示されない場合があります。

上記の場合は、以下の手順で操作してください。

  1. 設定画面「開発者向け>iframe埋め込みフォーム」より画面遷移。
  2. フォームの埋め込み先URLを指定」の「フォーム設定URL」に、変更後のShopifyストアのドメインを入力する。
  3. 「更新する」をクリックします。