Debut 的分区

已于 Jul 03, 2022 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/themes-by-shopify/vintage-themes/debut/sections。

模板内容是使用分区生成的。分区是可自定义的内容块，可决定在线商店中不同页面的布局和外观。您可以使用更新的模板编辑器来添加、删除、编辑和自定义分区。

Shopify 的模板包含以下分区类型：

  • 静态分区：显示在您在线商店中的预定地点的分区。无法删除或重新排列此类分区。静态分区可能包括产品页面和产品系列页面等页面上的标头、页脚、网站地图分区或内容分区。例如，产品分区决定在线商店中每个产品页面的外观。
  • 动态分区：可选分区，可用于自定义主页的布局。在商店主页上，您可以添加、重新排列和删除动态分区以创建页面布局。您的主页上最多可以包含 25 个动态分区。

您可以了解 Debut 的独特分区选择以及如何对它们进行自定义以适用于您的业务。

提示 如果使用来自 Shopify 的免费模板，那么您可以通过参阅来自 Shopify 的免费模板以及点击模板的名称来查看此模板的分区和设置的详细信息。

若要了解付费模板的分区和设置，请参阅模板文档。

静态分区

Debut 包括以下静态分区：

动态分区

Debut 包括以下动态分区：

标头

在标头分区中，您可以编辑显示您的商店中每个页面顶部显示的内容。您可以添加 logo 图片，选择要显示的菜单，以及创建公告消息。

您可以将自定义 logo 图片添加到商店的标头中。最佳格式是具有透明背景的 .png 文件。您可以通过增大或减小宽度来调整 logo 图片。

如果您不添加 logo 图片，则您的商店名称将显示为文本。您可以在 Shopify 后台的商店详细信息设置页面上更改您的商店名称。

  • 自定义 logo 宽度：logo 的宽度。

  • logo 对齐方式：logo 在标头中的对齐方式。选择左对齐或居中。

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击标头。

  2. 在 logo 图片区域中，点击选择图片，然后执行以下操作之一：

    • 若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
    • 若要从本地计算机选择图片，请依次点击库 > 上传。

  3. 使用设置来自定义 logo 的大小和位置。

  4. 点击保存。

添加公告栏

您可以在标头中添加公告栏，以便使用该栏向客户显示消息。您的消息是可以自定义的，并且可以包含联系信息、有关商店活动或促销的信息，或者商店的标语。

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击标头。

  2. 在公告栏区域中，选中显示公告。

选择仅主页以仅在主页上显示公告消息。

  1. 输入您的公告的文本。

  2. 可选：输入 URL 以添加您的公告链接。

  3. 若要更改公告栏的背景色，请点击栏颜色样本并选择颜色。

  4. 若要更改公告文本的颜色，请点击文本颜色样本并选择颜色。

  5. 点击保存。

添加菜单

您可以向标头添加菜单。这会在标头中显示菜单的所有链接，您可以使用这些链接突出显示客户想访问的常用页面。例如，您可以添加包含产品系列链接的菜单。

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击标头。

  2. 若要选择菜单，请点击更改。从列表中选择菜单，或点击创建菜单来创建新菜单。

  3. 若要编辑菜单，请点击编辑菜单。

  4. 点击保存。

页脚

模板的页脚是显示在商店中每个页面底部的分区。 您可以向页脚中添加以下功能：

  • 付款图标
  • 快速链接
  • 新闻通讯注册
  • 包含有关您业务的信息的文本分区
  • 社交媒体图标
  • 语言选择器
  • 货币选择器

添加付款图标

您可以在页脚中显示您接受的付款方式的图标。此区域会显示与您在后台的支付设置部分中启用的支付服务提供商相关联的图标。当客户访问您的商店时，系统会筛选这些图标，以便仅显示当前客户的所在地区和所用货币支持的付款方式。

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击页脚。

  2. 查看显示付款图标。

  3. 点击保存。

添加菜单、新闻通讯注册或文本

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击页脚。

  2. 若要添加内容块，请点击内容区域中的添加内容。从以下选项中选择块的类型：

  3. 点击保存。

添加社交媒体图标

当您将社交媒体账户添加到模板设置时，该账户会自动显示在页脚中。

添加语言选择器

如果您已启用多种商店语言，则应仅添加语言选择器。

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击分区。

  2. 点击页脚。

  3. 在语言选择器下，选择显示语言选择器。

  4. 点击保存。

添加货币选择器

如果您已启用多种货币，则应仅添加货币选择器。

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击页脚。

  2. 在货币选择器下，选择显示货币选择器。

  3. 点击保存。

产品页面

产品页面分区是产品页面中可以自定义的主要分区。此分区还支持以下功能（如果您的商店中配置了这些功能）：

您可以使用以下选项自定义此分区：

  • 显示数量选择器 - 让用户指定要添加到购物车的数量。
  • 显示多属性标签 - 在多属性下拉菜单上方显示多属性标签，例如“尺寸”和“颜色”。显示的多属性标签基于产品的多属性选项名称。
  • 显示供应商 - 显示产品品牌或供应商。若要显示品牌或供应商，您需要向产品添加供应商。
  • 显示动态结账按钮 - 让客户跳过购物车并直接从特色产品分区转到结账页面。
  • 显示社交分享按钮 - 显示客户可用于在社交媒体上分享产品的按钮。显示的分享选项由您的模板设置控制。

媒体

  • 大小 - 设置产品媒体文件的大小。
  • 启用图片缩放 - 让客户通过将鼠标移动到产品图片上来进行放大。
  • 启用视频循环播放 - 选择此选项以循环播放产品视频。如果取消选择此选项，视频结束时会显示播放按钮。

编辑产品页面设置

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  3. 打开页面顶部的下拉菜单。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 选择产品页面。
  2. 点击产品页面分区。
  3. 使用设置来对您的产品页面分区进行自定义。
  4. 点击保存。

显示取货服务提供情况

通过使用 Debut，您可以向客户展示您在线商店中的产品是否支持到店取货。在每个产品页面上，“取货服务提供情况”分区会显示产品是否支持到店取货以及预计的取货时间范围。

若要使用此功能，您必须设置到店取货。启用到店取货后，此功能将始终显示在您的产品页面上，并且无法禁用。

启用到店取货后，产品页面会显示产品是否支持在某个到店取货地点取货。只有满足以下条件的产品才会显示此信息：在至少一个取货地点有库存，且在产品多属性详细信息的发货部分中选择了需要运输。

若要对产品多属性选择需要运输，请执行以下操作：

  1. 在 Shopify 后台中，转到产品。

  2. 选择产品。

  3. 在多属性下，选择一个多属性。

  4. 在发货下，选中需要运输。

  5. 点击保存。

如果您只为一个地点启用了到店取货，则会显示该地点及其取货服务提供情况。客户可点击查看商店信息详细了解取货地点。

如果您为多个地点启用了到店取货，则“取货服务提供情况”分区会根据客户 IP 地址显示距离客户最近的取货地点及其取货服务提供情况。当客户点击查看其他商店的供货情况时，取货地点列表会根据与客户的距离排序。

如果无法根据客户的 IP 地址确定客户的地点，则“取货服务提供情况”分区会显示按字母顺序（首先按城市名，然后按地点名）排在首位的地点及其取货服务提供情况。例如，假设您有三个取货地点：多伦多的“Queen Street”、多伦多的“Front Street”和温哥华的“Alberni Street”。“取货服务提供情况”分区将显示多伦多“Queen Street”的详细信息。

显示 Shop Pay 分期付款横幅

版本 17.12.0+

如果您已启用 Shop Pay 分期付款并且您位于美国，则产品页面上会显示 Shop Pay 分期付款横幅（如果产品价格在 50 美元至 1000 美元之间）。如果已启用 Shop Pay 分期付款，则无法禁用横幅。

该横幅显示在产品价格下方，表示客户可以全额支付产品费用或分 4 次进行等额分期付款。用户可以点击了解详细信息以查看有关分期付款和所需披露的其他信息。

产品推荐

您可以在产品页面上展示推荐产品，让客户更轻松地发现其他可能感兴趣的产品。

启用产品推荐

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  3. 打开页面顶部的下拉菜单。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。

  1. 选择产品页面。

  2. 点击产品推荐分区。

  3. 选中显示动态建议以在产品页面上显示产品推荐。

  4. 可选：若要更改推荐产品上方显示的标题，请在标题字段中输入新标题。

  5. 可选：使用显示厂商复选框，选择在产品描述中显示或隐藏厂商。

  6. 点击保存。

产品系列页面

产品系列页面分区是产品系列页面中可以自定义的主要分区。

产品系列页面分区包括以下设置：

  • 布局 - 选择产品系列页面上排列产品的方式。
  • 每行产品数（仅限网格） - 选择产品系列页面上每行显示的产品数量。只有当布局设置为网格时，此分区才适用。
  • 每页行数（仅限网格） - 选择要在产品系列页面上显示的产品行数。只有当布局设置为网格时，此分区才适用。
  • 显示产品系列图片 - 在产品系列页面顶部显示产品系列图片。
  • 显示产品供应商 - 在产品标题下显示每个产品的供应商。
  • 启用排序 - 选择此选项可让客户对产品系列页面上的产品进行排序。
  • 启用标签排序 - 选择此选项可让客户按产品标签对产品系列进行筛选。

编辑产品系列页面设置

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  3. 打开页面顶部的下拉菜单。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 选择产品系列页面。
  2. 点击产品系列页面分区。
  3. 通过设置来对您的产品系列页面分区进行自定义。
  4. 点击保存。

产品系列列表页面

您的客户可以使用产品系列列表页面找到他们要浏览的产品系列。产品系列列表页面不仅可以显示商店中的所有产品系列，还可以显示您选择的一组产品系列。

产品系列列表页面分区包括以下设置：

  • 产品系列 - 设置要在产品系列列表页面上显示的产品系列。只有当选择要显示的产品系列设置为已选择时，才会使用此信息。
  • 选择要显示的产品系列 - 选择要显示的产品系列。
  • 产品系列 - 设置产品系列的排序方式。此设置仅在选择要显示的产品系列设置为所有时适用。
  • 每行产品系列数 - 产品系列列表页面上的每一行中都会设置要显示的产品系列数量。

自定义产品系列列表页面分区

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  3. 打开页面顶部的下拉菜单。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 选择产品系列列表。
  2. 点击产品系列列表页面分区。
  3. 可选：在内容区域中，点击添加产品系列可将产品系列添加到产品系列列表页面。
  4. 通过设置来对产品系列列表页面分区进行自定义。
  5. 点击保存。

博客页面

博客页面分区是博客页面可以自定义的主要分区。博客页面列出了发布到您的博客的所有文章。您可以列出您发布的博客文章，或将其显示在网格中。列表和网格视图都显示博客文章标题和摘录（如有）。如果没有摘录可用，则会显示博客文章的前几句话。

博客页面分区包括以下设置：

  • 布局 - 选择列表或网格。
  • 显示作者 - 在博客文章标题下方显示作者姓名。
  • 显示日期 - 在博客文章标题下方显示发布日期。

提示：您如果想为商店创建博客，或想要向现有博客添加文章，请在 Shopify 后台内转至在线商店 > 博客文章。若要详细了解如何为在线商店创建博客，请参阅博客。

自定义您的博客页面分区

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  3. 打开页面顶部的下拉菜单。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 选择博客。
  2. 点击博客页面分区。
  3. 使用设置来对您的文章分区进行自定义。
  4. 点击保存。

文章

博客文章页面显示单独的博客文章。文章分区包括以下设置：

  • 显示作者 - 在博客文章标题下方显示作者姓名。
  • 显示日期 - 在博客文章标题下方显示博客文章的发布日期。
  • 显示社交分享按钮 - 选择此选项以在您的博客文章中显示社交分享按钮。您可以在社交媒体设置中选择可用于分享的平台。

提示：您如果想为商店创建博客，或想要向现有博客添加文章，请在 Shopify 后台内转至在线商店 > 博客文章。若要详细了解如何为在线商店创建博客，请参阅博客。

自定义文章分区

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  3. 打开页面顶部的下拉菜单。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 选择博客文章。
  2. 点击文章分区。
  3. 使用设置来对您的文章分区进行自定义。
  4. 点击保存。

购物车页面

购物车页面分区包括以下设置：

  • 启用自动购物车更新 - 选择此选项以在客户进行更改后尽快更新购物车。例如，当客户更改购物车中的商品数量时，可以更新小计价格。
  • 启用购物车备注 - 在某些模板中，此选项称为订单备注。

自定义购物车页面分区

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  3. 打开页面顶部的下拉菜单。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触模板。
  1. 选择购物车。
  2. 点击购物车页面部分。
  3. 使用设置来对您的购物车页面分区进行自定义。
  4. 点击保存。

特色产品系列

您可以在主页上展示产品系列。展示产品系列可帮助您推销产品和新产品系列。

特色产品系列分区包括以下设置：

  • 标题 - 添加显示在产品系列中产品上方的文本。默认文本为特色产品系列。
  • 产品系列 - 选择要显示在该分区中的产品系列。
  • 每行产品数 - 选择要在该分区的每一行中显示的产品数。
  • 行数 - 选择要在该分区中显示的产品的行数。
  • 显示产品供应商 - 在产品标题下显示每个产品的供应商。
  • 显示“查看全部”按钮 - 选择此选项以在分区中的最后一行下方添加查看全部按钮。客户可以点击此按钮来查看整个产品系列。

在主页中添加特色产品系列

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击添加分区。
  2. 点击特色产品系列，然后点击选择。
  3. 点击选择产品系列，然后从产品系列列表中选择一个产品系列。您选择的产品系列中最多可显示 50 个产品。
  4. 使用设置来自定义您的特色产品系列部分。
  5. 点击保存。

带文本的图片

使用 Debut，您可以添加一张文本显示在右侧或左侧的图片。您还可以添加链接到其他页面的按钮。

您可以使用带有文本的图片分区来宣传特定产品或产品系列。

带文本图片分区包括以下设置：

  • 图片 - 添加或选择要包含在分区中的图片。您可以上传图片、使用先前上传的图片或从 Burst 中选择免费的库存图片。
  • 图片对齐 - 选择分区中的图片显示在左侧还是右侧。
  • 标题 - 添加与图片配对的主要文本。
  • 文本 - 添加与图片配对的辅助文本。此文本显示在标题文本下方。
  • 按钮标签 - 添加您希望在按钮上显示的文本。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮，请将此字段留空。

向主页添加带文本图片分区

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击添加分区。
  2. 点击带文本图片，然后点击选择。
  3. 在图片区域中，点击选择图片，然后执行以下操作之一：
  • 若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
  • 若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入搜索词，或浏览图片类别。
  • 若要从本地计算机选择图片，请点击库选项卡，然后点击上传。
  1. 使用设置来自定义分区。
  2. 点击保存。

带文本叠加的图片

您可以在主页上特别展示带自定义文本叠加的大图片。

带文本叠加的图片分区包括以下设置：

  • 图片 - 选择要包含在分区中的图片。您可以上传图片、使用先前上传的图片或从 Burst 中选择免费的库存图片。
  • 图片对齐 - 选择分区中的图片显示在左侧还是右侧。
  • 布局 - 设置分区的宽度。
  • 分区高度 - 设置分区的高度。要防止裁剪图片，请选择适应图片，根据图片的高度设置分区高度。
  • 文本大小 - 设置文本的大小。
  • 标题 - 添加与图片配对的主要文本。带文本叠加的图片分区会自动重命名为您提供的标题。
  • 文本 - 添加与图片配对的辅助文本。此文本显示在标题文本下方。
  • 按钮标签 - 添加您希望在按钮上显示的文本。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮，请将此字段留空。

向主页添加带文本叠加的图片

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击添加分区。
  2. 点击带文本图片叠加，然后点击选择。
  3. 在图片区域中，点击选择图片，然后执行以下操作之一：
  • 若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
  • 若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入搜索词，或浏览图片类别。
  • 若要从本地计算机选择图片，请点击库选项卡，然后点击上传。
  1. 使用设置来对带文本叠加的图片分区进行自定义。
  2. 点击保存。

特色产品

您可以在主页上突出展示产品。突出展示产品是推销新产品或促销产品的有效方法。客户可以使用图片下方的左右箭头查看其他产品图片。

特色产品分区包括以下设置：

  • 产品 - 选择要在主页上特别展示的产品。
  • 显示数量选择器 - 让用户指定要添加到购物车的数量。
  • 显示多属性标签 - 在多属性下拉菜单上方显示多属性标签，例如“尺寸”和“颜色”。显示的多属性标签基于产品的多属性选项名称。
  • 显示供应商 - 显示产品品牌或供应商。若要显示品牌或供应商，您需要向产品添加供应商。
  • 显示动态结账按钮 - 让客户跳过购物车并直接从特色产品分区转到结账页面。
  • 显示社交分享按钮 - 显示客户可用于在社交媒体上分享您的产品的按钮。

媒体

  • 大小 - 设置产品媒体文件的大小。
  • 启用图片缩放 - 让客户通过将鼠标移动到产品图片上来进行放大。
  • 启用视频循环播放 - 循环播放产品视频。如果取消选择此选项，播放结束后，视频上会显示播放按钮。

添加特色产品分区

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击添加分区。
  2. 点击特色产品，然后点击选择。
  3. 使用设置来自定义您的特色产品分区。
  4. 点击保存。

新闻通讯

您可以在主页上添加新闻通讯注册。这使您可以为电子邮件营销活动收集客户邮箱。您可在 Shopify 博客上了解有关电子邮件营销的详细信息。

向主页添加新闻通讯注册

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击添加分区。

  2. 点击新闻通讯，然后点击选择。

  3. 输入新闻通讯注册的标题。

  4. 为您的新闻通讯注册输入副标题。

  5. 点击保存。

地图

您可以在主页上添加 Google 地图，向客户展示您的商店所在的地点。

提示：若要显示您的地图，您需要注册 Google 地图 API 密钥。

地图分区包括以下设置：

  • 标题 - 将标题添加到您的地图分区。
  • 地址和营业时间 - 将商店的地址和营业时间添加到地图分区。
  • 地图地址 - 将地图设置为显示您的商店位置。
  • 地图链接标签 - 在 Google 地图上添加链接到您地点的按钮。
  • 显示图钉图标 - 在地图上添加一个显示商店具体地点的图钉图标。
  • Google 地图 API 密钥 - 将您地图的 API 密钥添加到地图分区。
  • 图片 - 添加地图未加载时显示的图片。
  • 图片位置 - 设置图片的位置。

在主页中添加地图

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击添加分区。
  2. 点击地图，然后点击选择。
  3. 使用设置来对您的地图分区进行自定义。
  4. 点击保存。

富文本

使用富文本分区提供要在主页上显示的任何书面内容或嵌入在 Shopify 后台创建的任何页面。例如，您可以通过嵌入博客页面来展示即将进行的活动，或显示包含以下任何内容的页面：

富文本分区包括以下设置：

  • 宽显示 - 减小文本两侧的边距。

  • 标题 - 向富文本分区添加标题。

  • 文本 - 添加自定义文本并设置格式。 如果要显示商店中的页面，请点击添加内容，然后点击页面。从下拉菜单中选择要作为主页的页面。

  • 大小 - 设置文本大小。

向主页添加富文本

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。

  1. 点击添加分区。

  2. 点击富文本，然后点击选择。

  3. 使用设置来对您的富文本分区进行自定义。

  4. 点击保存。

视频

您可以将 YouTube 视频添加到您的主页。视频可以吸引客户并引起他们对您业务的兴趣。

提示：您可以通过自定义内容部分将 Vimeo 视频添加到主页。

视频分区包括以下设置：

  • 封面图片 - 为视频添加封面图片。播放视频时会隐藏封面图片。
  • 图片对齐方式 - 对齐封面图片，使最重要的部分始终可见。
  • 视频链接 - 添加视频的 YouTube URL。
  • 显示叠加 - 在视频上添加一层颜色，使文本更易于阅读。如果您将视频样式设置为带播放按钮的图片，则在视频播放时，叠加层会消失。
  • 样式 - 设置视频样式。背景视频样式仅适用于台式电脑。如果客户使用平板电脑或移动设备访问您的商店，则始终会看到带播放按钮的图片样式。
  • 视频高度 - 设置视频高度。
  • 标题 - 为您的视频添加标题。
  • 文本大小 - 将文本添加到您的视频中。如果您将视频样式设置为带播放按钮的图片，在视频播放时，文本则会消失。

将视频添加到您的主页

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击添加分区。
  2. 点击视频，然后点击 选择。
  3. 通过设置来对您的视频分区进行自定义。
  4. 点击保存。

幻灯片

您可以将图片的幻灯片添加到您的主页。在幻灯片分区中，您可以设置幻灯片的高度、添加文本和按钮，以及选择是否自动播放幻灯片。

幻灯片分区包括以下设置：

  • 图片幻灯片 - 选择要包含在幻灯片中的图片。您可以上传图片、使用先前上传的图片或从 Burst 中选择免费的库存图片。您可以设置每张幻灯片的以下设置：

    • 图片位置 - 在幻灯片框架中选择图片的对齐方式。您可以通过下面的指南详细了解图片位置。
    • 标题 - 添加与图片配对的主要文本。
    • 子标题 - 添加与图片配对的辅助文本。此文本显示在标题文本下方。
    • 按钮标签 - 添加您希望在按钮上显示的文本。
    • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮，请将此字段留空。

  • 幻灯片高度 - 设置幻灯片的高度。详细了解幻灯片高度将对幻灯片产生怎样的影响。

  • 文本大小 - 在幻灯片上设定标题的大小。

  • 文本对齐方式 - 选择幻灯片上文本的位置。

  • 显示叠加 - 在图片与放置在图片上的任何文本之间添加一层颜色。叠加有助于提高颜色对比度和文本可读性。您可以在颜色设置中设置叠加的颜色和不透明度。

  • 自动循环播放幻灯片 - 将幻灯片设置为自动播放。

  • 幻灯片更改时间间隔 - 选择更改幻灯片的频率。

要了解幻灯片图片裁剪和推荐图片尺寸的信息，请参阅幻灯片指南。

在主页中添加幻灯片

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 点击 的分区 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的分区 旁边，轻触自定义。
  5. 轻触编辑。
  1. 点击添加分区。
  2. 点击幻灯片，然后点击选择。

  3. 若要添加图片幻灯片，请执行以下步骤：

  4. 使用设置来自定义幻灯片分区。

  5. 点击保存。

幻灯片指导

您可以使用下面的设置和图片建议来控制幻灯片在您在线商店中的外观。幻灯片的显示方式取决于以下因素：

由于屏幕尺寸和形状有差异，您的幻灯片在移动设备和桌面设备上可能会有所不同。

图片尺寸建议

幻灯片图片的建议尺寸取决于您的幻灯片高度设置。请遵循以下准则：

图片尺寸建议（按设置）
幻灯片高度设置 推荐宽度 推荐高度
适应第一张图片 1200 px 600 px
小 1200 px 475 px
中等 1200 px 489 px
大 1200 px 775 px

若要查看或更改幻灯片高度设置，请参阅创建幻灯片说明中的步骤 5。

图片裁剪

您可以采取步骤来控制图片的裁剪方式或完全避免裁剪图片。

控制图片的裁剪方式

在以下情况下，您可看到部分屏幕尺寸上出现图片裁剪：

  • 图片的宽高比不同。
  • 幻灯片高度可设置为小、中或大。
  • 您的幻灯片高度设置为适应第一张图片，并且您的图片高于设备屏幕或浏览器窗口的高度。

您可以使用图片位置设置来控制图片的裁剪方式。

对于每张图片，您可以选择裁剪时要保留的图片部分。在以下示例中，您可以看到如何针对某些屏幕尺寸裁剪同一图片。左侧的幻灯片将图片位置设置为正中。右侧的幻灯片将图片位置设置为左上角。

根据图片位置设置经过了不同裁剪的示例幻灯片。

若要查看或更改您的图片位置设置，请参阅创建幻灯片说明中的步骤 10。

避免图片裁剪

若要避免裁剪幻灯片图片，请尝试以下步骤：

  • 将幻灯片高度设置为适应第一张图片。
  • 使用宽度为高度两倍的图片。这些图片的宽高比为 2:1。建议的尺寸为 1200 px × 600 px。
  • 确保所有幻灯片的宽高比都相同。相对于幻灯片的尺寸（以像素为单位），幻灯片的比例要更加重要。

在以下示例中，桌面和移动设备上显示了一张比例为 2:1 的幻灯片图片：

一张幻灯片显示在桌面和移动设备上，没有经过任何裁剪。

幻灯片高度

幻灯片分区的宽度始终为浏览器窗口的 100%。幻灯片的高度与宽度是相对的。由于屏幕大小存在差异，因此，幻灯片的宽度和高度因不同的设备而异。幻灯片的高度也会受到幻灯片高度设置的影响。

您可以使用幻灯片高度设置 Adapt to first image（适应第一张图片），基于第一张图片的高度设置幻灯片的高度。当所有图片尺寸相同或宽高比相同时，此设置效果最佳。如果您的图片尺寸不同或比例不同，则可以更改幻灯片的顺序，查看它们在不同高度的显示效果。

在以下示例中，后弦放置了一个最短的幻灯片：

高度较低的幻灯片决定了另外两张幻灯片的高度。因为其他幻灯片较高，所以它们的顶部和底部经过了裁剪。

在下一个示例中，首先放置了一个较高的幻灯片：

中等高度的幻灯片将决定其他两张幻灯片的高度。较高的幻灯片的顶部和底部将被裁剪。较低的幻灯片的侧面将被裁剪。

如果您改为使用小、中或大高度设置，则请参阅幻灯片的图片尺寸建议。

图片比

如果想要避免幻灯片中出现图片裁剪，我们建议您的图片采用 2:1 的宽高比

如果您不担心图片会在桌面显示器上被裁剪，并且想要使图片在移动设备上的显示效果良好，请使用方形的图片或高度大于宽度的图片。以下示例幻灯片显示了一张方形图片，宽高比为 1:1。

一张方形幻灯片显示在桌面和移动设备上。此图片在桌面设备上经过了剪裁，但未在移动设备上被裁剪。

下一个示例幻灯片显示了宽高比为 2:3 的肖像图片。

一张较高的幻灯片显示在桌面和移动设备上。此图片在桌面设备上经过了剪裁，但未在移动设备上被裁剪。

准备好开始使用 Shopify 进行销售了吗？

免费试用