添加、预览和购买模板

为帮助您入门,当您开设 Shopify 账户时,后台的“模板”页面会为您设置一个默认模板。如果您想为在线商店自定义其他模板,则需要向后台中添加一个。

您可以通过以下任一方式添加模板:

如果您是开发人员,或者正在与 Shopify 合作伙伴或代理机构合作,那么您还可以通过以下方式将模板添加到您的商店中:

您可以向账户中添加多个模板,以便试用新模板、保留已发布模板的季节性版本或测试对已发布模板副本所做的更改。您可以预览这些模板中的任何一个,但一次只能发布一个模板。当您切换到新模板时,您仍然可以在 Shopify 的“模板”页面访问旧模板。

添加模板后,您可以创建一个链接,以便与他人共享任何未发布模板的预览。如果您希望在发布新模板或上线在线商店之前征求反馈,此功能会很有用。您无法共享已发布模板的预览。

模板资格要求

请查看以下适用于向您的商店或组织添加模板的资格要求:

  • 您可以添加的模板数量上限取决于您的定价套餐
  • 使用 Starter 套餐的商店只能添加 Spotlight 模板
  • 使用 Basic、Grow 和 Advanced 套餐的商店和组织最多可添加 20 个模板。
  • 使用 Shopify Plus 套餐的商店和组织最多可添加 100 个模板。

如果您达到套餐的模板数量上限,则需要先删除一个模板,然后才能添加新模板。扩展商店需要为每个有效的扩展商店获取模板许可。

使用 AI 生成免费模板

您可以通过 Shopify 后台的“模板”页面使用 AI 生成免费的个性化模板。免费模板的自定义帮助由 Shopify 提供支持

您可以通过 Shopify 后台的“模板”页面使用 AI 生成免费的个性化模板。免费模板的自定义帮助由 Shopify 提供支持

步骤:

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

  2. 在“几秒钟内设计您的商店”部分,撰写您的业务描述,然后点击生成模板以生成最多 3 个免费的个性化模板。

  3. 点击您感兴趣的模板,然后点击试用模板以将该模板应用于您的商店。

  4. 该模板将添加到后台 模板 页面的草稿模板部分。

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 在页面底部附近的“几秒钟内设计您的商店”部分,描述您的业务并轻触生成模板以生成最多 3 个免费的个性化模板。

  5. 轻触您感兴趣的模板,然后轻触试用模板以将该模板应用于您的商店。

  6. 该模板将添加到后台 模板 页面的草稿模板部分。

从后台添加免费模板

免费模板由 Shopify 开发。免费模板的自定义帮助由 Shopify 提供支持

免费模板由 Shopify 开发。免费模板的自定义帮助由 Shopify 提供支持

步骤:

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

  2. 在页面底部附近的发现模板部分,查看 Shopify Theme Store 中的热门免费模板,或点击访问模板商店浏览所有可用模板。

  3. 点击模板名称以在 Shopify Theme Store 中查看有关模板的详细信息。

  4. 点击该模板的添加按钮。该模板将添加到后台 模板 页面的草稿模板部分。

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 在页面底部附近的发现模板部分,查看 Shopify Theme Store 中的热门免费模板,或轻触访问模板商店浏览所有可用模板。

  5. 轻触模板名称即可在 Shopify Theme Store 中查看相应模板的详细信息。

  6. 轻触该模板的添加按钮。该模板将添加到后台 模板 页面的草稿模板部分。

试用 Shopify Theme Store 中的付费模板

在您决定购买付费模板之前,您可以在 Shopify 后台中预览该模板来进行试用。您可以使用模板编辑器来自定义预览的模板,例如将其更改为使用您的品牌颜色、品牌风格和产品。如果您购买该模板,那么您所做的任何自定义设置都将保存。

您可以同时预览多达 19 个付费模板,以便在购买前比较不同的模板。您正在试用的付费模板带有模板试用标签。

若要获取付费模板的支持,请联系模板开发者。

步骤:

  1. 访问 Shopify Theme Store 并选择一个付费模板。
  2. 点击试用模板以将该模板添加到您的在线商店。
  3. 在您的 Shopify 后台中,点击在线商店 > 模板
  4. 草稿模板部分中,点击要预览的模板旁边的 horizontal menu 按钮以打开操作菜单。
  5. 点击预览

您可以在预览模板时自定义其设置。如果您对该模板感到满意,即可购买该模板。您对模板所做的任何自定义设置都将得到保存。模板处于试用状态时,您无法编辑模板代码,也无法使用 AI 代码生成器。

从 Shopify Theme Store 购买模板

只有拥有以下所有商店级别权限的用户才能从 Shopify Theme Store 购买模板:

  • 模板
  • 管理和安装应用和渠道
  • 批准应用费用

在您的在线商店中试用付费模板后,您可以选择购买。您只能发布已购买的模板到您的在线商店。从 Shopify Theme Store 购买模板时,该模板仅授权给进行购买的商店。如果您想在其他商店使用您的模板,您或许有资格转让它

付费模板由第三方模板开发者创建。第三方模板的常规支持和更新由模板开发者提供。如果您需要高级自定义,但没有使用 HTML、CSS 和 JavaScript 开发网站的经验,请考虑聘请 Shopify 合作伙伴

步骤:

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

  2. 点击添加模板 > 访问 Theme Store

  3. 搜索您要购买的模板,然后点击试用模板

  4. 草稿模板部分中,点击要购买的模板上的购买,以开始交易。

从您的计算机上传模板文件

如果您的计算机上有 ZIP 文件格式的模板,则可以将其上传到 Shopify 后台的模板页面。

在上传之前,请确保您的模板文件已压缩为单个 ZIP 文件。

上传 ZIP 文件后,模板将添加到 Shopify 后台的模板页面。

步骤:

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

  2. 草稿模板部分,点击导入模板 > 上传 zip 文件

  3. 导入模板对话框中,点击选择文件以选择要上传的 ZIP 文件。

  4. 点击上传

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 草稿模板部分中,轻触导入模板 > 上传 zip 文件

  5. 导入模板对话框中,轻触选择文件以选择要上传的 ZIP 文件。

  6. 轻触上传

切换模板

在向商店添加新模板时,它们会显示在 Shopify 中模板页面的草稿模板部分。您可以通过将新模板发布到您的在线商店来切换为新模板。当您发布新模板时,您的旧模板在草稿模板中仍然可用(如果您愿意,可以切换回该模板)。

如果您手动更新模板,则模板的更新版本将在草稿模板中显示为单独的版本。当您切换到更新版本时,模板的旧版本在草稿模板中仍可用。如需了解详细信息,请参阅 更新模板

准备切换模板

将模板添加到草稿模板后,您可以在发布之前对其进行自定义。这是您在替换现有模板之前查看新模板,并调整设置和内容以契合您的业务的好机会。您还可以在准备好的多个模板之间切换,而无需重新设置。

切换到新模板时,您商店的产品、产品系列、菜单、页面和博客文章不会被更改或删除,因为它们是在后台中进行管理,与模板无关。但是,通过模板编辑器、模板代码编辑器和语言编辑器管理的内容和设置对于您上传的每个模板及模板版本都是唯一的。

对于要使用的每个模板,您都必须自定义在线商店中以下与模板相关的部分:

并非所有模板都支持所有 Shopify 功能。您应查看模板的功能列表,确保其具有您需要的功能。

模板预览

您可以在在线商店的模板部分预览任何模板。预览会在带有在线商店预览栏的浏览器标签页中显示您的在线商店应用该模板后的效果。

在线商店预览栏会显示关于您模板的以下信息:

  • 模板名称。
  • 模板的状态。您已发布的模板会显示实时状态,未发布的模板则会显示草稿状态。

您可以通过以下操作自定义预览:

  • 视图图标 预览为部分,您可以选择其他国家/地区或语言进行预览。详细了解国际市场为模板添加其他语言
  • 点击 链接 按钮以分享您的模板预览
  • 点击 关闭预览 以关闭预览并显示您已发布的模板。
    • 点击编辑模板以打开模板编辑器并自定义模板。
  • 点击预览栏顶部附近可将其折叠。您可以再次点击以将其展开。

与他人分享模板预览

如果您即将上线您的在线商店,或正计划通过发布新模板来更改您的商店,那么您可以通过分享模板预览来征求他人的反馈。

您可以创建一个链接,供他人用来访问您已在 Shopify 后台中添加的任何模板的预览。无需发布模板即可进行分享。

模板预览有两种类型:

  • 访客预览:拥有 URL 的任何人都可以看到访客预览,并且无需进行身份验证。这些预览将在 URL 创建 2 天后过期。访客预览 URL 使用 https://<token>-<shop_id>.shopifypreview.com 格式。
  • 商家预览:商家预览需要进行后台身份验证,并且可以访问结账页面。这些预览将在 URL 创建 30 天后过期。商家预览 URL 使用您的主域名格式,并附带一个令牌参数。

当您点击模板上的预览时,商家预览 URL 会显示在您浏览器的地址栏中。若要创建可与他人分享的访客预览链接,请点击预览栏中的 链接 按钮。您可以根据需要随时创建新链接,并且创建新链接不会影响旧的预览链接。

步骤:

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

  2. 对于您想分享的模板,请点击 水平菜单 按钮以打开操作菜单,然后点击预览

  3. 可选:选择其他国家/地区、语言或同时选择两者以更改预览。

  4. 点击 链接 按钮以将链接复制到剪贴板。

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 对于您想分享的模板,请轻触 水平菜单 按钮以打开操作菜单,然后轻触预览

  5. 可选:选择其他国家/地区、语言或同时选择两者以更改预览。

  6. 轻触 链接 以将链接复制到剪贴板。

模板预览故障排除

在某些情况下,您的模板预览或模板预览栏可能无法正确显示。如果在查看本指南中的步骤后,您的模板仍有问题,则您可能需要联系模板的支持团队。详细了解获取模板支持

预览栏显示在您已上线的商店中

当您的模板将名为 preview_theme_id 的参数错误地添加到您的在线商店 URL 时,通常会发生这种情况。此参数仅供内部预览使用,但如果它出现在实时 URL 中,则会强制对所有访客显示预览栏。

访问您的在线商店,并在浏览器地址栏中检查是否存在 preview_theme_id 参数。您还可以要求您的客户将显示预览栏的链接地址转发给您。

如果您在线商店的 URL 中包含 preview_theme_id 参数,请联系您模板的开发人员以获取支持并说明问题。

如果您熟悉编辑模板代码,则可以在模板文件中搜索 preview_theme_id,然后删除将其添加到 URL 的代码。layout 文件和包含 Javascript(以 .js 结尾)的文件最有可能包含此类代码。仅当您了解 HTML 和 CSS 并对 Shopify 的模板语言 Liquid、JSON 和 Javascript 有基本了解时,才能编辑模板代码。

据报告,此问题曾出现在从 Shopify Theme Store 外部购买的模板上,例如来自 ThemeForest 的 Lumia 模板。

预览草稿模板时重定向到实时模板

如果您在未发布的模板上点击预览后被重定向到实时模板,那么这几乎总是与 Cloudflare 缓存有关。

如果您为 Shopify 商店使用 Cloudflare,则您的缓存设置可能会干扰 Shopify 的预览机制。Shopify 也使用 Cloudflare 进行缓存,而这两个缓存层有时会发生冲突。我们在文档中提到了与外部缓存的潜在冲突。

为确保预览栏正常工作,请在 Cloudflare 上针对 Shopify 的所有请求关闭缓存。

预览栏完全缺失

如果在预览模板时预览栏未显示,则可能是因为自定义代码或第三方应用修改了您模板的默认脚本。

此问题很可能是由对 Liquid 对象(通常位于您模板的 `layout` 文件夹中的 `theme.liquid` 文件内)的修改造成的。预览栏脚本需要该 对象才能正确加载。修改此对象可能会阻止脚本加载,从而导致预览栏缺失,并引起 Shopify 功能和应用出现其他问题。

您可以检查您的模板和应用以查找修改的来源。了解如何对您的模板进行故障排除