在模板编辑器中自动生成模板区块

通过 Shopify Magic,您可以使用人工智能 (AI) 根据您提供的详细信息在 模板编辑器 中生成新的 模板区块

生成模板区块的注意事项

请查看以下有关生成模板区块的注意事项:

  • AI 生成的代码可能并非总是完美的。它有时可能会产生错误、意外结果,或生成不完全符合辅助功能或性能最佳做法的代码。您有责任审核、测试并确保生成的区块符合您的标准且能正常运行。
  • 在模板编辑器预览中,预览区块在台式电脑和移动设备视图中的外观。
  • 如果您的区块包含自定义设置,请在添加该区块后进行测试,以确保这些设置可以按预期正常工作。
  • 在您生成模板区块后,该区块的新 liquid 文件会添加到您模板代码的 blocks 文件夹中。
    • 模板区块由 Liquid(Shopify 的模板语言)构成。模板区块文件还包含 HTML、CSS、JSON 和 JavaScript。在您生成模板区块后,该区块的新 liquid 文件会添加到您模板代码的 blocks 文件夹中。
      模板代码编辑器 blocks 文件夹
    • 如果您想通过编辑代码来编辑生成的模板区块,则可以编辑您的模板代码。仅当您了解 HTML 和 CSS 并对 Liquid 有基本了解时,才能编辑模板代码。
    • Shopify Magic 生成的 liquid 文件是自包含的。当新版本发布到模板商店时,您仍然可以 更新您的模板

生成模板区块的资格要求

请查看以下生成模板区块的要求。

定价套餐要求

您的商店必须使用以下定价套餐之一:

  • 免费试用
  • Basic
  • Growth
  • Advanced
  • Plus

此功能在 Starter 套餐中不可用,该套餐使用 Spotlight 模板,且不支持添加自定义模板分区或区块。

模板兼容性

模板区块生成功能适用于 Shopify 模板商店中的所有模板。如果您使用的是兼容的第三方模板,则必须先购买该模板,然后才能生成模板区块,因为免费试用版不支持此功能。

此功能不适用于复古模板。详细了解不同模板架构版本的功能

用户权限要求

以下用户可以在模板中生成区块:

编写有效模板区块提示词的技巧

生成区块的质量通常取决于提示词的质量。请遵循以下最佳做法:

  • 具体且具有描述性:提示词的长度至少应为五个词。提示词越长、包含的详细信息越多,返回的结果就越有可能准确。例如,请勿输入添加图片和文本,而是输入创建一个左侧为图片,右侧为标题、段落文本和“立即购买”按钮的区块。在移动设备上堆叠显示
  • 提及内容元素:列出区块所需的内容类型,例如标题、段落、图片、按钮、表单和图标。
  • 建议布局:描述区块中元素的排列方式,例如并排、网格、居中或交替行。
  • 包含自定义设置:如果您希望区块在模板编辑器中具有特定的可编辑设置(例如更改图片、文本或按钮链接的选项),请将这些设置包含在您的提示词中。例如,若要在包含视频的区块中加入控制动画速度的设置,请输入包含控制动画速度的设置
  • 使用后续指令进行迭代:如果初次生成的结果不完全符合要求,请添加更多详细信息或使用不同的措辞来调整提示词,然后重新生成。

查看以下遵循最佳做法的提示词示例:

  • 一个推荐区块,包含客户照片、引文、客户姓名和 5 星评级显示。
  • 并排功能区块:左侧是图标和标题,右侧是描述性文本。
  • 全宽横幅,带有背景图片、居中的大标题文本、其下方较小的副标题文本以及一个行动号召按钮。

生成模板区块

在您生成区块并决定保留它后,新区块会添加到块选择器中。您可以将该区块添加到接受模板区块的兼容分区中。

步骤:

  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到要编辑的模板,然后点击自定义

  3. 自定义您的主页,或者轻触主页下拉菜单,然后选择要向其添加分区的模板。

  4. 点击要为其生成区块的分区。

  5. 点击添加区块

  6. 点击生成

  7. 输入要生成的区块的描述。

  8. 点击生成。Shopify Magic 将处理您的请求并创建代码。

  9. 在模板编辑器中直接预览生成的区块。如果生成了自定义设置,则可以自定义您的区块。

  10. 如果您对生成的区块感到满意,请点击 保留。如果不满意,您可以放弃该区块或提供后续说明。

从模板中删除已生成的模板区块

生成模板区块后,该区块的新 liquid 文件会添加到您模板代码的 blocks 文件夹中。如果某个生成的模板区块导致您的商店出现问题,您可以从模板代码中删除相应的 liquid 文件。

步骤:

  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 在要编辑的模板旁边,点击 编辑模板

  3. 自定义您的主页,或者轻触主页下拉菜单,然后选择要向其添加分区的模板。

  4. 点击包含要删除的区块的分区。如果您之前已删除该区块的所有实例,则点击 添加区块,从块选择器中重新添加该区块。

  5. 在区块的设置中,点击 水平菜单 > 代码 编辑代码

  6. 在侧边栏菜单中,点击 blocks 文件夹将其展开,然后找到您当前正在查看的区块文件。该文件与当前打开的区块同名,并以 .liquid 结尾。

    模板代码编辑器,其中显示了 blocks 文件夹以及要删除的模板区块文件

  7. 在侧边栏菜单中,点击区块文件旁边的 删除 图标。

  8. 在对话框中,点击 删除文件 进行确认。