BigCommerce 的模板主题结合了当前在技术、设计标准、转换和 SEO 方面的最佳实践,旨在支持各个行业的企业。您可以从美观、完全响应的模板中进行选择,也可以与 BigCommerce 合作伙伴建立完全自定义的店面。模板 主题针对移动、平板电脑和桌面浏览器中的各种目录大小、垂直、促销和内容进行了优化。

借助页面构建器,您无需离开控制面板即可自定义主题的各种元素,例如颜色、文字大小、特色产品的数量等,从而定制您的店面,使其更贴近您的品牌。将内容拖放到页面上的能力,如文本块、图像、横幅、轮播、按钮和自定义 HTML 块,允许您以视觉丰富和引人入胜的方式展示您的产品。

进行更改后,您无需在店面实时发布即可保存。只有当您单击发布时,更改才会显示在您的店面上。

有关自定义我们的旧版蓝图主题的信息,请参阅使用样式编辑器

使用页面构建器

要开始使用,请转到店面 › 我的主题,然后单击自定义

有关添加内容小部件和自定义商店样式的更多信息,请参阅页面构建器

下载和上传自定义主题

您可以在控制面板的 店面 > 我的主题 部分下载源文件以自定义主题 。

在你下载之前! 自定义模板主题需要深入了解 Web 开发和模板 CLI的使用。根据我们的设计政策,我们的技术支持团队无法为自定义主题提供帮助。 有关支持资源,请参阅开发中心。

从控制面板下载您的主题可以让您在计算机上拥有一个副本。如果您选择使用 模板 CLI开发自定义主题,您将需要一份副本。在 CLI 中更改主题可让您完全访问在控制面板中使用主题编辑器时不可用的 JavaScript 文件。它还可以作为您当前主题设置的备份。

下载主题

购买模板主题(或获取免费主题)后,可在店面 › 我的主题中找到它。从那里,您可以下载主题并对其进行自定义。

1.我的主题下,单击当前主题的高级下拉菜单或非活动主题上的操作图标。

2. 选择最适合您需要的选项。 

下载当前主题*  — 下载您在页面构建器中所做的任何编辑,并且当前已在您的商店中生效

下载已保存的主题— 下载您在 Page Builder 中所做但未在您的商店中发布的最新编辑

下载原始主题 — 下载默认主题,无需在 Page Builder 中进行任何编辑

如果您正在下载当前在您的店面上线的主题,此选项只会出现在下拉菜单中。

3. 将 .zip 文件保存到您的计算机。您需要模板 CLI来解压缩文件。

你可知道?单击主题缩略图是下载主题的另一种方法。进入主题详细信息页面后,单击主题选项。从那里,您可以选择下载最新的自定义设置,或下载主题文件。联系我们的支持团队以获得进一步的帮助。

自定义下载的文件

对模板主题进行自定义需要使用模板 CLI。这需要对 Web 开发有深入的了解。有关安装详细信息,请参阅模板 CLI 开发人员文档。 有关解压缩下载的主题并使用它们的详细信息,请参阅下载主题部分

不要将自定义主题上传到另一个主题市场或私下出售。虽然您可以为自己的商店自由定制和更改代码,但主题的原始创建者保留对主题的权利。

自定义主题上传要求

上传自定义主题

1. 前往店面›我的主题

2. 单击当前主题下方我的主题标题旁的上传主题按钮。

3. 将ZIP文件拖入上传主题弹出窗口,或者您可以从您的计算机中选择主题

4. ZIP 文件上传后,我的主题下会出现一个主题卡,显示主题处理进度。如果要停止处理并重新开始,请单击取消。

5. 处理后,我的主题下会出现一个新的自定义主题卡。如果您的主题无法成功处理,您将看到一个详细说明遇到的任何错误的屏幕。确保您的主题符合所有自定义主题上传要求

自定义主题操作

1. 前往店面›我的主题

2.我的主题标题下,单击要重命名的主题。只有您上传或复制的非活动主题(当前未应用于您的商店的主题)可以重命名。

3. 单击操作图标查看下拉菜单,然后单击重命名

4. 在弹出窗口中,输入主题的新名称,然后单击重命名主题

5. 您将返回到控制面板,并显示主题已成功重命名的消息。

删除自定义主题

1. 前往店面›我的主题

2.我的主题标题下,单击要删除的主题。只能删除非活动主题(当前未应用于您的商店的主题)。

3. 单击操作图标 下拉菜单,然后单击删除

4. 在弹出窗口中, 单击删除主题确认您要删除主题

5. 您将返回到控制面板,并显示主题已成功删除的消息。

自定义模板文件

自定义模板允许您从默认布局更改品牌、类别、产品和网页的布局,以最适合您的商店和品牌。

创建自定义模板涉及高级 Web 开发。如果您不习惯编写和编辑代码,我们建议您联系我们的BigCommerce 合作伙伴之一。

创建自定义模板

创建自定义模板需要编辑 HTML 文件,然后使用模板 开发人员工具将它们打包并上传到适当的位置。

有关更详细的说明,请参阅开发中心中关于自定义主题的 模板 开发人员文档。

应用自定义模板

可以从商店的控制面板将自定义模板应用于品牌、类别、产品和内容网页。

无法通过批量导入分配模板布局。

品牌

1. 转到产品 › 品牌,然后选择品牌或创建新品牌以应用自定义模板。 

2.模板布局文件部分,选择自定义模板文件的名称。

3. 保存您的更改。

类别

1. 转到产品 › 类别,然后选择类别或创建一个新类别。

2. 在模板布局文件部分,选择要应用的自定义模板的名称。

3. 保存您的更改。

产品

1. 转到产品 › 查看,然后选择产品或创建新产品。

2. 单击店面下菜单导航中的店面详细信息。

3. 单击模板布局文件下拉菜单,然后选择您的自定义模板。

4. 保存您的更改。

网页

1. 前往店面 › 网页,然后选择一个网页或创建一个新网页。

2. 滚动到模板布局文件下拉菜单,然后选择您的自定义布局文件。

3. 保存您的更改。

编辑模具主题文件

模板 主题支持直接浏览器访问构成主题的代码的选项,而无需安装 模板 CLI。这非常适合对无法直接在页面构建器中完成的主题进行微调,或添加脚本以集成无法通过脚本管理器完成的应用程序。

这是一项高级功能。 它需要HTML/CSSHandlebars知识。对于重大设计调整或新主题开发,我们建议您或您的开发人员使用模板 CLI,它提供对所有主题文件的访问。有关帮助途径,请参阅获取帮助

限制

编辑主题文件不提供以下功能:

访问编辑主题文件

要访问编辑主题文件,您需要处理主题的复制版本。无法从市场的默认主题访问它。复制的主题被视为自定义主题,不会收到市场主题更新

1. 前往店面 › 我的主题,然后点击当前主题的高级下拉菜单。

2. 选择制作副本

3. 系统将提示您命名复制的主题。输入名称,然后单击保存副本

复制主题可能需要几秒钟。

4. 单击您复制的主题的操作图标,然后单击自定义选项以使用页面构建器或编辑主题文件打开它以直接打开浏览器内编辑器。

如果您选择了自定义,请单击主题样式。单击编辑主题文件以打开代码面板。

5.在页面构建器中,单击编辑模板字段选项卡以打开代码面板。

使用谷歌浏览器?如果您尝试在 Google Chrome 中打开“编辑主题文件”,请检查您的弹出窗口拦截器并将其设置为允许此页面上的弹出窗口。

编辑主题文件

当您在页面编辑器中单击编辑模板字段时,它会将预览面板替换为主题的底层代码。该选项卡的左侧在嵌套文件夹树中向您显示主题的文件。仅应由原始主题开发人员编辑的文件和目录在此视图中隐藏。要编辑这些文件,您需要使用模板 CLI

  • 主题文件 — 这些是构成您的主题的文件夹和文件。单击蓝色文件夹将其打开。单击蓝色 .html 或 .scss 文件进行编辑。灰色文件是只读的。它们只能使用 模板 CLI 进行更改。
  • 代码面板 — 这是您编辑所选文件代码的地方
  • 保存文件 — 将保存当前打开的文件并重新编译主题
  • 保存所有文件 — 将保存所有打开的文件并重新编译主题

文件编辑器对源 HTML 中的元素进行颜色编码以便于识别,并且它会在您键入时自动建议 HTML。它还包括撤消重做编辑的能力。文件编辑器允许在主题的模板文件中混合使用 HTML、Handlebar 语句、SCSS 和 JavaScript 标记。请参阅我们关于Handlebars Helpers的开发中心参考资料。

专家提示!您可以通过按Ctrl+F 或 Cmd+F在文件中搜索元素。

保存主题文件

当您单击“保存文件”或“保存所有文件”按钮时,它将使用您的更改重新编译和重新打包主题文件。然后,您可以预览修改后的主题并(如果您选择)将其应用到您的商店。保存和编译可能需要几分钟才能完成,具体取决于更改的复杂性和数量。

保存后,您可以通过单击“预览”按钮来预览主题。

将新主题应用于店面

当您对更改感到满意时,单击保存以重新打包已编辑的主题。

1. 导航到店面 › 我的主题,然后向下滚动到您的主题列表。

2. 单击您复制和编辑的主题上的操作按钮。

3. 选择 应用并浏览提示。

检查您的店面以查看您所做的更改。

获得帮助

不方便调整您的设计或想与专家合作?查看我们的BigCommerce 合作伙伴目录,或考虑使用我们的 代理设计请求 计划与认证设计合作伙伴合作。由于我们的设计政策,我们的技术支持无法编辑代码或进行设计更改。

将自定义脚本添加到模板主题

许多第三方应用程序和服务依赖于将自定义脚本注入网站页脚才能运行的能力。大多数应用程序会自动将这些脚本注入到正确的位置。在某些情况下,可能需要复制和粘贴脚本。

使用脚本管理器

脚本管理器记录来自应用程序的注入代码或脚本。这使得组织您安装的脚本方便单独查看和编辑。要访问脚本管理器,请转到店面 › 脚本管理器。如果您需要复制脚本,请单击创建脚本按钮,为其命名,选择一个位置并选择 Script Type Script以将脚本粘贴到一个框中。有关更多详细信息,请参阅使用脚本管理器

我可以在网站页脚之外添加自定义 HTML 代码吗?可以使用Edit Theme Files将代码粘贴到其他模板文件中。请记住,该脚本可能与 模板 框架不兼容。如需进一步帮助,请查看我们的BigCommerce 合作伙伴目录

模板页脚中的把手

除了 HTML 和自定义脚本之外,您还可以通过编辑主题字段将模板语言 Handlebars 粘贴到 模板 主题的页脚中。这允许更强大的自定义。

Handlebars 是一种模板语言,用于开发和定制 模板 主题。例如,您可以使用 Handlebars 来引用主题范围的变量,例如您的商店名称或徽标。第三方应用程序可以使用 Handlebars 来参考客户信息,给予特定优惠。

要了解有关在 模板 主题中使用 Handlebars 的更多信息,请参阅开发中心的使用 Handlebars部分。

分析和转化跟踪脚本

分析和转化跟踪脚本通常添加到标题或结帐中。有关更多信息,请参阅我们关于设置 Google Analytics将订单数据传递到关联转化跟踪程序 的文章

常问问题

没有看到自定义按钮?

如果您看到按钮Customize UpdateUpdate,这意味着您的主题有可用的更新。有关更多信息,请参阅市场主题更新 。

为什么我必须复制主题?

创建主题的副本允许您对店面设计进行更改,并且仍然保留主题的“干净”工作版本。您可以通过从高级下拉菜单中选择编辑主题文件来编辑复制的主题,即使它在您的店面中也是如此。

如何编辑主题变体?

当您复制一个主题时,它会在您单击自定义时显示其默认变体。要对变体进行编辑,请单击页面构建器中的主题样式。单击样式,然后从弹出窗口中选择主题变体。

我可以添加 JavaScript 文件吗?

虽然您可以将 JavaScript 标记添加到网页,但您无法使用内置文件编辑器添加或编辑 JavaScript 文件。要添加或编辑 JavaScript 文件,您必须使用 Stencil CLI。