テーマエディタでフォームブロックを追加する

Sami B2B Onboardingは、テーマにB2B application formブロックを追加します。フォームをページテンプレートの独立したセクションとして表示するため、バナーや卸売の買い手が受けられる特典の一覧など、独自のセクションをフォームの上下に配置できます。

ノート

始める前に：フォームが公開されている必要があります（FormsでActive）。ページにストアのアクセス設定を適用するため、アプリの埋め込みもオンのままにしてください。アプリの埋め込みをオンにするを参照してください。

フォーム用のテンプレートを選ぶ

ページテンプレートに追加したセクションは、そのテンプレートを使用するすべてのページに表示されます。ほとんどのページは、テーマのデフォルトのページテンプレートを使用しています。アプリがフォーム用に作成したページもその1つで、すでにフォームが入っています。フォームを1つのページにだけ表示するには、以下の手順のように、そのページに専用のテンプレートを割り当てます。

専用のテンプレートにブロックを追加する

1. テーマエディタを開く

   Shopify管理画面でオンラインストア › テーマに移動し、現在のテーマのテーマを編集をクリックします。

2. ページテンプレートを作成する

   テーマエディタ上部のテンプレートメニュー（エディタを開いた時点ではホームページと表示されています）を開きます。ページ、テンプレートを作成の順に選択します。たとえばwholesaleのように名前を付け、デフォルトのページをベースにして、テンプレートを作成をクリックします。

   エディタが新しいテンプレートに切り替わります。

3. フォームセクションを追加する

   左側のサイドバーで、テンプレートの下にあるセクションを追加をクリックし、アプリタブを開いてB2B application formを選択します。

   フォームはアプリセクション内のブロックとして追加され、プレビューにデフォルトのフォームが表示されます。テーマエディタでは、ストアにサインインしていても、常にフォーム自体が表示されます。

   

   テンプレートの下でセクションを追加をクリックし、アプリタブでB2B application formを選びます。

4. フォームを選ぶ

   サイドバーのアプリの下にあるB2B application formをクリックします。Formボックスで次のいずれかを行います。

   • 空のままにして、デフォルトのフォームを表示する。
   • 別のフォームのスラッグ（ボックスのヘルプテキストで求められている短い名前）を入力する。

   フォームのスラッグを調べるには、アプリのFormsに移動し、フォームの行にある**…（More actions）をクリックしてCopy embed code**を選択します。読める場所に貼り付けてください。スラッグは、最後の引用符の中のテキストです。Wholesale applicationフォームの場合はwholesale-applicationです。

   

   デフォルトのフォームを使う場合はFormを空のままにするか、別のフォームのスラッグを入力します。

5. 保存する

   テーマエディタの右上にある保存をクリックします。

6. ページにテンプレートを割り当てる

   Shopify管理画面でオンラインストア › ページに移動します。フォームを表示するページを開くか、ページを追加をクリックして新規作成し、たとえばWholesaleのようにタイトルを入力します。テーマテンプレートでwholesaleを選択し、保存をクリックします。

   アプリがフォーム用に作成したページには選択しないでください。そのページにはすでにフォームが入っているため、フォームが2回表示されます。

Formsのショートカットを使う

アプリには、ブロックを追加した状態でテーマエディタを開くショートカットがあります。

1. ショートカットを開く

   アプリでFormsに移動します。フォームの行にある**…**（More actions）をクリックし、Add block in theme editorを選択します。

   

   Add block in theme editorを選ぶと、フォームブロックが追加された状態でテーマエディタが開きます。

2. フォームを選んで保存する

   現在のテーマのテーマエディタがデフォルトのページテンプレートで開き、B2B application formブロックが追加されています。ブロックをクリックし、Formにフォームのスラッグを入力して（デフォルトのフォームを使う場合は空のまま）、保存をクリックします。

注意

ショートカットは、デフォルトのページテンプレートにセクションを追加します。そのテンプレートを使用するすべてのページにフォームが表示され、アプリが作成したページにも表示されるため、フォームが2回表示されます。フォームを1つのページにだけ表示するには、上で説明したように専用のテンプレートを使用してください。

ストアで確認する

1. ゲストとしてページを開く

   サインインしていない買い手と同じ状態で確認するため、プライベートブラウザウィンドウでストアのページを開きます。他のセクションの間に、フォームがセクションとして表示されます。

2. 必要に応じて問題を修正する

   • This form is not available right now. Formのスラッグが、公開済みのフォームと一致していません。つづりを確認するか、Formsでフォームを公開してください。
   • 別のフォームが表示される。 Formが空のため、セクションにデフォルトのフォームが表示されています。表示したいフォームのスラッグを入力するか、Formsで**…**（More actions）› Set as defaultを使って、そのフォームをデフォルトにしてください。

ストアをロックしても、フォームを表示するオンラインストア › ページのページは、訪問者に開かれたままです。ストアをロックするを参照してください。

次のステップ

• フォームをデザインする — 周囲のページに合わせて、フォームのフォント、色、幅を調整します。
• 埋め込みコードを貼り付ける — 代わりに、カスタムLiquidセクションやページビルダーにフォームを配置します。
• アプリが作成するフォームページを使う — デザインしたページが不要な場合は、用意済みのページを共有します。