Debut 的分区

模版内容是使用分区生成的。分区是可自定义的内容块,可确定在线商店中不同页面的布局和外观。

静态分区 是显示在您的在线商店中的预定位置的分区。无法删除或重新排列这些分区。静态分区可能包括产品页面和产品系列页面等页面上的标头、页脚、网站地图分区或内容分区。例如, 产品 部分决定了在线商店上每个产品页面的外观。

动态分区 是可选分区,可用于自定义主页的布局。 在商店主页上,您可以 添加重新排列删除 动态分区以创建页面布局。您的主页上最多可以包含25个动态分区。

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

Debut 包括以下静态分区:

  • 标头
  • 页脚
  • 产品页面
  • 产品系列页面
  • 产品系列列表页面
  • 博客页面
  • 文章
  • 购物车页面

动态分区

您可以添加重新排列删除动态分区来自定义主页的布局。每个模版都有唯一一组可供选择的动态分区。

Debut 包括以下动态分区:

  • 博客文章
  • 产品系列列表
  • 特色产品系列
  • 图库
  • 带文本图片
  • 带文本叠加的图片
  • logo 列表
  • 幻灯片
  • 特色产品
  • 新闻通讯
  • 地图
  • 富文本
  • 感言
  • 带图片的文本列
  • 视频
  • 自定义内容

标头

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

若要自定义标头分区,请执行以下操作:

  1. 单击 的分区 旁边的自定义

  2. 单击分区

  3. 单击标头

  4. 若要设置 logo 的对齐方式,请在 Logo alignment(Logo 对齐)区域中选择左对齐Centered(居中)。如果您不添加logo图片,则将改为显示文本中您的商店名称。您可以在后台的通用设置页面上更改您的商店名称。

  5. 若要添加 logo,请在 logo 图片区域中单击选择图片。若要从计算机上传图片,请单击上传。若要使用 Burst 中的免费图库图片,请单击免费图片

  6. 若要更改 logo 大小,请使用自定义 logo 宽度滑块调整到您选择的宽度。调整 logo 宽度不会使 logo 图片失真。

  7. 要选择想要在标头中显示的菜单,请在菜单区域中单击更改。选择现有菜单,或单击创建菜单创建一个新菜单。如果您不想在标头中显示菜单,请单击删除

  8. 若要在页面顶部显示公告消息,请执行以下步骤:

  9. 公告栏区域中,选中显示公告

  10. 若只想在主页显示公告,请选中仅主页。否则,商店中的每个页面上都会显示公告。

  11. 文本字段中输入公告的文本。

  12. 若要添加公告链接,请在链接字段中输入 URL。

  13. 若要更改公告栏的背景色,请单击颜色样本并选择颜色。

  14. 若要更改公告文本的颜色,请单击文本颜色样本并选择颜色。

  15. 单击保存

页脚

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

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

添加付款图标

您可以在页脚中显示您接受的付款方式的图标。此区域会显示与您在后台的付款设置部分中启用的支付服务提供商相关联的图标。

  1. 单击 的分区 旁边的自定义

  2. 单击页脚

  3. 查看显示付款图标

  4. 点击保存

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **的分区** 旁边的**自定义**。
  1. 单击分区

  2. 单击页脚

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

- 菜单 - 新闻通讯 - 文本

您最多可以添加 4 个内容块。

若要移动内容块,请单击 ⋮⋮ 图标并将该块拖动到其他位置。

若要删除内容块,请单击该块,然后单击删除内容

若要自定义内容块,请单击该块并编辑设置。

  1. 单击保存

添加社交媒体图标

  1. 单击 的分区 旁边的自定义

  2. 单击模板设置

  3. 单击社交媒体

    1. 若要上传 社交分享图片,请在社交分享图片区域,单击选择图片浏览免费图片
  4. 若要在产品和博客文章中添加社交分享按钮,请选中以下任一选项或所有选项:

- 在 Facebook 上共享 - 在 Twitter 上发推文 - Pin on Pinterest(固定在 Pinterest 上)(不适用于共享博客文章)

  1. 若要添加您的社交媒体账户的链接,请在账户下提供的字段中输入指向您账户的链接。输入完整的链接,例如 https://instagram.com/shopifyhttps://twitter.com/shopify

  2. 点击保存

添加语言选择器

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

  1. 单击 的分区 旁边的自定义

  2. 单击分区

  3. 单击页脚

  4. 语言选择器下,选择显示语言选择器

  5. 点击保存

添加货币选择器

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

  1. 单击 的分区 旁边的自定义

  2. 单击页脚

  3. 货币选择器下,选择显示货币选择器

  4. 点击保存

产品页面

产品页面分区中,您可以添加或删除以下元素:

  • 数量选择器
  • 多属性标签
  • 产品品牌或供应商
  • 图片缩放
  • 动态结账按钮
  • 社交共享按钮
  • 产品推荐

您还可以设置图片的尺寸。

编辑产品页面设置

  1. 从顶栏下拉菜单中选择产品页面

  2. 单击分区

  3. 单击产品页面

  4. 若要设置图片的尺寸,请从 Image size(图片尺寸)下拉菜单中选择图片尺寸。

  5. 若要显示数量选择器,请选中 Show quantity selector(显示数量选择器)。

  6. 要显示多属性标签,例如“尺寸”和“颜色”,请选中 Show variant labels(显示多属性标签)。显示的多属性标签基于产品的多属性选项名称

  7. 若要显示产品品牌或供应商,请选中 Show vendor(显示供应商)。若要显示品牌或供应商,您需要向产品添加供应商

  8. 若要使客户能够通过将鼠标悬停在产品图片上方来放大图片,请选中 Enable image zoom(启用图片缩放)。

  9. 若要显示动态结账按钮,请选中 Show dynamic checkout button(显示动态结账按钮)。

  10. 要显示社交共享按钮,请选中 Show social sharing buttons(显示社交共享按钮)。

  11. 单击保存

添加或删除产品推荐

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

  1. 从顶栏下拉菜单中选择产品页面

  2. 单击产品推荐

  3. 使用显示动态推荐复选框,选择在产品页面上显示或隐藏产品推荐。

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

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

  6. 单击保存

产品系列页面

您可以将产品系列页面设置为允许客户对产品系列中的产品进行筛选和排序。您可以选择产品系列布局(网格或列表)以及要显示的产品数量。

设置产品系列页面的布局:

  1. 导航到模板编辑器中的产品系列页面。

  2. 单击分区选项卡。

  3. 单击产品系列页面

  4. 布局列表中,选择网格列表

  5. 从列表中选择每行的产品数和每页的行数(如果选择了网格样式)。

  6. 如果您要在页面顶部显示产品系列图片,请选中 Show collection image(显示产品系列图片)。

  7. 如果要显示产品品牌或供应商,请选中 Show product vendors(显示产品供应商)。

  8. 选中 Enable sorting(启用排序)以显示排序菜单。

  9. 选中 Enable tag filtering(启用标签筛选),让客户能够按产品标签来筛选产品系列。

  10. 单击保存

产品系列列表页面

产品系列列表页面中以网格形式显示了所有产品系列。您的客户可以通过产品系列列表页面快速浏览您的产品系列,找到他们想要浏览的产品系列。在 Debut 中,产品系列列表页面是标头菜单中的顶级链接。

备注:您的顶级产品系列列表菜单的名称可能会有所不同。在此示例中,菜单名为“Catalog”。

您可以以网格模式显示所有产品系列的缩略图,也可以选择显示所选的产品系列。您还可以选择如何在页面上对产品系列进行排序。

若要设置产品系列列表页面的布局,请执行以下操作:

  1. 通过单击顶级产品系列菜单项,导航到您的产品系列列表页面。

  2. 单击分区选项卡。

  3. 单击 Collections list page(产品系列列表页面)。

  4. 请执行以下任一操作:

    1. 若要以网格模式显示所有产品系列的缩略图,请选择所有
    2. 若要在产品系列列表页面上显示一个产品系列,请选择已选择
  5. 如果您在上一步中选择了全部,请执行以下操作:

    1. Sort collections by(产品系列排序方式)列表中选择一个排序选项。
    2. Collections per row(每行的产品系列数)列表中,选择每行的产品系列数。
  6. 单击保存

博客页面

使用 Debut ,您可以列出您的博客文章,或以网格的形式显示它们。如果有多个博客文章作者,则可以显示每篇博文的作者姓名。还可以显示每篇博客文章的发布日期。

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

  1. 在模版编辑器的预览区域中导航到博客页面。

  2. 单击分区

  3. 单击博客页面

  4. 布局列表中,选择是在列表还是在网格中显示博客文章。

  5. 选中显示作者以显示作者姓名。

  6. 选中显示日期以显示博客文章的发布日期。

  7. 单击保存

购物车页面

购物车页面部分,您可以启用以下设置:

  • 购物车备注
  • 购物车自动更新

添加购物车备注

您可以允许客户在购物车页面上添加订单备注。

  1. 从顶栏下拉菜单中选择购物车

  2. 单击分区选项卡。

  3. 单击购物车页面

  4. 选中 Enable cart notes(启用购物车备注)。

  5. 单击保存

启用购物车自动更新功能

您可以使购物车在客户更改订单后立刻显示更新后的信息。例如,当客户更改其购物车中的产品数量时,小计价格即可更新。要启用购物车自动更新:

  1. 从顶栏下拉菜单中选择购物车

  2. 单击分区选项卡。

  3. 单击购物车页面

  4. 勾选启用购物车自动更新

  5. 单击保存

特色产品系列

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

通过 Debut,您可以添加“查看全部”按钮,让客户可以查看整个产品系列,并且您可以在每张产品图片下方显示供应商名称。

若要在主页上使用产品系列,请执行以下操作:

  1. 单击分区选项卡。

  2. 单击特色产品系列分区。

  3. 如果要更改产品系列上方显示的文本,请在标题字段中输入文本。

  4. 产品系列列表中,选择要显示的产品系列。若要添加或删除所选产品系列中的产品,请单击编辑产品系列链接在新标签中打开产品系列页面。

  5. Products per row(每行产品数)列表中,选择要在每行中显示的产品数。

  6. 列表中,选择要显示的产品行数。

  7. 如果您要在每张产品图片下方显示供应商或品牌名称,请选中 Show product vendor(显示产品供应商)。

  8. 如果您想让客户查看产品系列中的所有产品,请选中 Show 'View all' button(显示“查看全部”按钮)。

  9. 单击保存

带文本图片

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

通常,您可以使用 Image with text(带文本图片)分区来宣传产品或产品系列,或将网站流量引入博客页面。

若要将带有文本的图片添加到主页,请执行以下操作:

  1. 单击分区选项卡。

  2. 单击带文本叠加的图片分区。

  3. 图片区域中,单击选择图片,然后执行以下操作之一:

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. 布局列表中,选择希望图片显示在文本的右侧还是左侧。

  2. 标题字段中输入此分区的新标题。

  3. 文本字段中输入要在标头下方显示的文本。

  4. Button label(按钮标签)字段中,输入想要显示在按钮上的文本。

  5. Button link(按钮链接)字段中,选择想要将按钮链接到的商店中的一个页面。

  6. 单击保存

带文本叠加的图片

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

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

  • 图片 - 选择要添加到分区的图片。
  • 图片对齐方式 - 设置图片要在页面上显示的一侧。
  • 布局 - 设置分区的宽度。
  • 分区高度 - 设置分区的高度。要防止裁剪图片,请选择适应图片,根据图片的高度设置分区高度。
  • 文本大小 - 设置文本的大小。
  • 标题 - 为分区添加标题。
  • 文本 - 将文本添加到分区。带文本叠加的图片分区会自动重命名为您提供的标题。
  • 按钮标签 - 向分区添加带文本标签的按钮。
  • 按钮链接 - 将您的按钮链接到另一个页面或网站。

将带文本图片添加到主页

  1. 单击 的分区 旁边的自定义

  2. 单击添加分区 > 带文本图片 > 添加

  3. 使用设置来对带文本叠加的图片分区进行自定义。

  4. 单击保存

新闻通讯

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

向主页添加新闻通讯注册:

  1. 单击 的分区 旁边的自定义

  2. 单击分区

  3. 单击添加分区 > 新闻通讯

  4. 标题字段中输入新闻通讯注册的标题。默认标题是“订阅我们的新闻通讯”。

  5. 子标题字段中输入新闻通讯注册的子标题。

  6. 单击保存

视频

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

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

视频分区包括以下设置:

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

将视频添加到您的主页

  1. 单击 的分区 旁边的自定义

  2. 单击添加分区 > 视频

  3. 通过设置来对您的视频分区进行自定义。

  4. 单击保存

幻灯片

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

要了解有关幻灯片图片裁剪和推荐图片尺寸的信息,请参阅下面的指南。

创建幻灯片:

  1. 单击 的分区 旁边的自定义

  2. 单击分区

  3. 单击幻灯片

  4. 幻灯片高度下拉菜单中设置幻灯片的高度。

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

  5. Text size(文本大小)下拉菜单中设置标题和副标题的大小。

  6. 文本对齐方式下拉菜单中设置文本在幻灯片上的位置。

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

  8. 可选:选中 Auto-rotate slides(自动旋转幻灯片)以自动播放幻灯片。通过使用 Change slides every(幻灯片更改时间间隔)滑块来选择在每张幻灯片上停留的时间。

  9. 若要添加图片幻灯片,请执行以下步骤:

    1. 内容区域中,单击添加图片幻灯片
    2. 图片下,单击选择图片。若要从计算机上传图片,请单击上传。若要使用 Burst 中的免费图库图片,请单击免费图片
    3. 若要选择图片在幻灯片中的对齐方式,请在 Image position(图片位置)下拉菜单中选择一个位置。您可以在以下指导中的图片位置中了解详细信息。
    4. 若要向图片幻灯片添加文本,请在标题字段、副标题字段或这两个字段中输入文本。
    5. 通过在文本按钮标签字段中输入文本,将按钮添加到图片幻灯片。在按钮链接字段中,为此按钮选择要链接到的您的在线商店的部分:
  10. 单击保存

幻灯片指导

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

  • 您的图片尺寸
  • 您的图片位置设置
  • 幻灯片高度设置
  • 图片的宽高比

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

图片尺寸建议

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

图片尺寸建议(按设置)
幻灯片高度设置 推荐宽度 推荐高度
适应第一张图片 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 进行销售了吗?

免费试用