在模板编辑器中添加表单区块

Sami B2B Onboarding 会在您的模板中添加一个 B2B application form 区块。它会将表单作为页面模板中独立的区块显示，因此您可以在其上方和下方放置自己的区块，例如横幅或批发买家权益列表。

注意

开始之前：表单必须已发布（在 Forms 中为 Active）。同时请保持应用嵌入开启，这样您的商店访问设置才会在该页面上生效。请参阅开启应用嵌入。

为表单选择模板

添加到页面模板中的区块，会显示在所有使用该模板的页面上。大多数页面使用模板的默认页面模板，包括应用为您的表单创建的页面，该页面本身已包含表单。如果只想在某一个页面显示表单，请按下面的步骤为该页面创建专用模板。

将区块添加到专用模板

1. 打开模板编辑器

   在 Shopify 后台中，前往 在线商店 › 模板，点击当前模板的 自定义。

2. 创建页面模板

   打开模板编辑器顶部的模板菜单（编辑器刚打开时显示为 首页）。选择 页面，然后选择 创建模板。为其命名，例如 wholesale，基于 默认页面 创建，然后点击 创建模板。

   编辑器会切换到新模板。

3. 添加表单区块

   在左侧边栏的 模板 下点击 添加区块，打开 应用 标签页，选择 B2B application form。

   表单会作为区块添加到 应用 区块中，预览中会显示您的默认表单。在模板编辑器中，即使您已登录商店，看到的始终是表单本身。

   

   在模板下点击添加区块，然后在应用标签页中选择 B2B application form。

4. 选择表单

   在侧边栏的 应用 下点击 B2B application form。在其 Form 框中：

   • 留空则显示您的默认表单，或者
   • 输入另一个表单的 slug，即该框的帮助文字要求填写的简短名称。

   要查找表单的 slug，请在应用中前往 Forms，点击该表单所在行的 …（More actions），选择 Copy embed code。将其粘贴到可以查看的位置：slug 就是最后一对引号中的文字。对于 Wholesale application 表单，它是 wholesale-application。

   

   Form 留空则显示默认表单，或输入另一个表单的 slug。

5. 保存

   点击模板编辑器右上角的 保存。

6. 为页面指定模板

   在 Shopify 后台中，前往 在线商店 › 页面。打开要显示表单的页面，或点击 添加页面 创建一个并填写标题，例如 Wholesale。在 模板 下选择 wholesale，然后点击 保存。

   请不要为应用创建的表单页面选择它：该页面本身已包含表单，表单会因此显示两次。

使用 Forms 中的快捷方式

应用提供了一个快捷方式，可打开已准备好区块的模板编辑器。

1. 打开快捷方式

   在应用中，前往 Forms。点击该表单所在行的 …（More actions），选择 Add block in theme editor。

   

   Add block in theme editor 会打开已添加表单区块的模板编辑器。

2. 选择表单并保存

   当前模板的模板编辑器会在默认页面模板上打开，并已添加 B2B application form 区块。点击该区块，在 Form 中输入表单的 slug（留空则使用默认表单），然后点击 保存。

警告

该快捷方式会将区块添加到默认页面模板。因此所有使用该模板的页面都会显示表单，包括应用为其创建的页面，该页面会显示两次表单。如果只想在某一个页面显示表单，请按上文所述使用专用模板。

在您的商店中检查

1. 以访客身份打开页面

   在无痕浏览器窗口中打开商店里的该页面，这样您看到的就是未登录买家看到的内容。表单会显示在它自己的区块中，位于其他区块之间。

2. 如有问题，请进行修复

   • This form is not available right now. Form 中的 slug 与任何已发布的表单都不匹配。请检查拼写，或在 Forms 中发布该表单。
   • 显示的是另一个表单。 Form 为空，因此该区块显示的是默认表单。请输入所需表单的 slug，或在 Forms 中通过 …（More actions）› Set as default 将该表单设为默认。

如果您锁定了商店，在线商店 › 页面 中显示该表单的页面仍对访客开放。请参阅锁定商店。

后续步骤

• 设计表单：让表单的字体、颜色和宽度与周围页面相匹配。
• 粘贴嵌入代码：改为将表单放入 Custom Liquid 区块或页面构建器。
• 使用应用创建的表单页面：不需要设计页面时，分享现成的页面。