Narrative 的分区

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

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

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

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

静态分区

Narrative 包括以下静态分区:

  • 标头
  • 幻灯片
  • 页脚
  • 产品页面
  • 产品推荐
  • 收藏
  • 产品系列列表页面
  • 博客
  • 文章
  • 购物车页面

动态分区

Narrative 包括以下动态分区:

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

标头

标头分区包含商店中每个页面顶部显示的内容。Narrative 使您可以通过点击网站地图图标来选择客户可以访问的两个网站地图菜单:

您还可以通过将商店标头设为透明来更改商店标头的外观。

自定义标头

  1. 点击标头分区。

    1. logo 图片区域中,点击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。
    2. 若要从 Burst 中选择库存图片,请单击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。
    3. 若要从本地计算机选择图片,请点击选项卡,然后点击上传
    4. 自定义 logo 高度(以像素为单位)字段中,输入 logo 的像素高度。
    5. Shopping cart icon(购物车图标)列表中,选择是否要在标头中显示购物袋或购物车 logo。
    6. 如果要使商店标题透明,请执行以下操作:
      1. 单击 Enable transparent header on the home page(在主页上启用透明标题)。
      2. 选择要在透明背景上显示的图片。您可能需要选择一个与在标头页上显示的 logo 不同的 logo。例如,您可能需要在较暗的背景下显示白色 logo。
      3. 单击 Transparent header icons color(透明标头图标颜色)调色板,以选择 logo 图片以及网站地图和购物车图标的颜色。
    7. 主网站地图列表中,选择客户点击网站地图图标时将显示的主菜单。
    8. 辅助网站地图列表中,选择辅助菜单。
    9. 点击保存

添加公告栏

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

  1. 点击标头。 5. 在公告区域中,选中显示公告。 6. 输入您的公告的文本。7. 可选:输入 URL 以添加公告的链接。 8. 可选:在图标菜单中,选择要在公告栏中显示的图标。此图标与您的公告文本使用同一种颜色。 9. 若要更改公告栏背景色,请点击颜色样本并选择颜色。10. 若要更改公告文本的颜色,请点击文本颜色样本并选择颜色。 11. 点击保存

幻灯片

您可以创建最多循环播放五张图片或视频幻灯片的主页幻灯片。

最好为您的幻灯片使用高分辨率图片。使用 4000 x 2200 px 或更大的图片,但不要超过 Shopify 的上传限制

由于幻灯片的大小和形状取决于客户设备的大小和形状,因此,您的幻灯片图片将在某些屏幕上被裁剪。尝试使用中间有焦点的图片,这样每张图片的重要部分都能始终可见。

若要详细了解适用于幻灯片图片的最佳做法,请参阅上传图片

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

  • 幻灯片高度 - 设置幻灯片的高度。选择 Adapt to first image slide height(适应第一张图片幻灯片高度),基于第一张图片的高度设置幻灯片的高度。
  • 居中按钮 - 设置幻灯片上按钮的位置。
  • 显示叠加 - 在幻灯片上添加一层颜色。叠加层可以使幻灯片文本更易于阅读。
  • 叠加颜色 - 设置叠加层的颜色。
  • 不透明度 - 设置叠加的不透明度。
  • 图片 - 添加要在幻灯片中显示的图片。
  • 图片对齐 - 选择图片中最重要的区域作为幻灯片的焦点。
  • 视频链接 - 添加视频的 YouTube 链接。
  • 封面图片 - 为视频幻灯片添加封面图片。视频未播放时,会显示封面图片。
  • 标题 - 向幻灯片添加标题。
  • 幻灯片标题 - 为幻灯片添加标题。有多张幻灯片时,标题会显示在幻灯片底部。
  • 按钮标签 - 向幻灯片添加带文本标签的按钮。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮,请将此字段留空。

在主页中添加幻灯片

  1. 点击添加分区。2. 点击幻灯片,然后点击选择。3. 使用设置来自定义幻灯片。

    1. 点击保存

页脚

在页脚分区中,您可以编辑商店中每个页面底部显示的内容。您可以向页脚中添加以下功能:

  • 社交媒体图标
  • 付款图标
  • 新闻通讯注册
  • 视差滚动效果
  • 最多两个菜单

自定义页脚

  1. 点击页脚。2. 通过选中显示社交图标,将社交媒体图标添加到页脚中。您可从社交设置中将图标链接到您的社交媒体账户。3. 通过选中显示付款图标将付款图标(如 Mastercard 或 PayPal)添加到页脚。此区域会显示与您在后台的付款设置部分中启用的支付服务提供商相关联的图标。4. 若要将新闻通讯注册添加到页脚,请执行以下步骤:
1. Check **Show newsletter signup**.

2. Enter a heading for your newsletter signup in the **Heading** field. The default heading is "Sign up for updates".

3. Enter a subheading for your newsletter signup in the **Subheading** field. The default subheading is "Promotions, new products and sales. Directly to your inbox.".
  1. 要向页脚中添加菜单,请执行以下步骤:

    1. 内容下,点击添加菜单
    2. 要编辑默认菜单,请单击编辑菜单。要更改为其他菜单,请单击更改,然后选择一个现有菜单或单击 Create menu(创建菜单)。
  2. 点击保存

产品页面

产品页面分区是产品页面中可以自定义的主要分区。您可以使用以下选项自定义此分区:

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

媒体

  • 启用视频循环播放 - 循环播放产品视频。如果取消选择此选项,播放结束后,视频上会显示播放按钮。
  • 在图库中隐藏多属性媒体文件 - 选择此选项以防止在页面底部的图库中显示多属性媒体文件。启用此选项后,就只会显示未附加到多属性的媒体文件。

编辑产品页面设置

  1. 选择产品页面。2. 单击产品页面分区。3. 使用设置来对您的产品页面分区进行自定义。4. 点击保存

产品推荐

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

启用产品推荐

  1. 选择产品页面

  2. 点击产品推荐分区。

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

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

    1. 可选:若要在产品描述中显示或隐藏供应商,请使用显示供应商复选框。
    2. 可选:通过选择启用图片间距来增加产品图片之间的间距。
  5. 点击保存

收藏

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

产品系列分区包括以下设置:

  • 启用标签筛选 - 添加一个筛选器,客户可以用于查看产品系列中带有特定标签的产品。若要在产品系列页面上显示筛选器,您需要向该产品系列中的产品添加标签
  • 启用产品系列排序 - 添加一个菜单,客户可以使用此菜单以不同的方式对产品系列进行排序,例如按字母顺序或按价格进行排序。
  • 网格样式 - 设置页面上产品的布局。
  • 显示产品系列图片 - 在产品系列页面顶部显示产品系列图片。
  • 启用图片间距 - 选择此选项可增加图片之间的间距。
  • 显示产品供应商 - 显示产品品牌或供应商。

自定义您的产品系列页面

  1. 选择 产品系列页面。2. 单击产品系列页面分区。3. 通过设置来对您的产品系列页面分区进行自定义。4. 点击保存

购物车页面

购物车页面分区是您的在线商店购物车中可以自定义的主要分区。在购物车页面中,您可以启用购物车备注来让您的客户在他们的订单中包含特殊说明。

启用订单备注

  1. 选择购物车。2. 点击购物车页面分区。3. 选择启用购物车备注。4. 点击保存

提示:您可以从购物车抽屉模板设置中将购物车设置为抽屉样式。购物车抽屉从页面右侧滑出,这意味着客户可在不离开产品页面的情况下将产品添加到购物车中。

特色产品系列

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

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

  • 产品系列 - 选择要在分区中显示的产品系列。
  • 启用图片间距 - 选择此选项可增加图片之间的间距。
  • 标题 - 添加显示在产品系列中产品上方的文本。默认文本为特色产品系列
  • 显示产品供应商 - 在产品标题下显示每个产品的供应商。
  • 显示“查看全部”按钮 - 选择此选项以在分区中的最后一行下方添加查看全部按钮。客户可以单击此按钮来查看整个产品系列。
  • 使用辅助按钮样式 - 以带有实线轮廓的透明状显示按钮。
  • 网格样式 - 设置页面上产品的布局。
  • 每行产品数 - 选择要在该分区的每一行中显示的产品数。
  • 行数 - 选择要在该分区中显示的产品的行数。

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

  1. 点击添加分区。2. 点击特色产品系列,然后点击选择。3. 点击选择产品系列,然后从产品系列列表中选择一个产品系列。4. 使用设置来对您的特色产品系列分区进行自定义。5. 点击保存

图库

图库分区是最多可包含 3 张图片的一个系列。您可以从由 13 个自定义图标组成的列表中选择要显示在每张图片上的图标。或者,您可以将每张图片链接到 URL 或您商店中的页面。

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

内容

  • 图片 - 添加要在分区中显示的图片。
  • 图片对齐方式 - 选择要在分区中对齐图片的方式。如果您不想显示图标,请从图标列表中选择“无”。
  • 图标 - 添加要在图片上显示的图标。
  • 字幕 - 输入要在图片上显示的文本。
  • 链接 - 粘贴指向 URL 的链接,或点击该字段以从您的商店中选择一个页面。

设置

  • 分区高度 - 选择此分区的大小。
  • 显示叠加 - 在图片上添加一层颜色。叠加层可以使文本更易于阅读。
  • 叠加颜色 - 设置叠加层的颜色。
  • 文本颜色 - 设置标题和文本的颜色。如果背景图片较暗,选择浅色文本会使文本更易于阅读。
  • 不透明度 - 设置叠加的不透明度。

向您的主页添加图库

  1. 点击添加分区。2. 点击图库,然后点击选择。3. 若要添加图片,请在图片区域点击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。
    • 若要从 Burst 中选择库存图片,请单击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。
    • 若要从本地计算机选择图片,请点击选项卡,然后点击上传
  2. 使用设置来自定义图库分区。5. 点击保存

带文本图片

Narrative 包含带文本图片分区,可让您向客户显示带有自定义消息的图片。

您可以选择图片对齐,确保从移动设备查看时图片的重要部分不会被裁剪。例如,如果您不希望裁剪图片的底部,因为该部分显示的是您正在销售的产品,那么您可以选择底部居中对齐方式,确保图片的该部分不会被裁剪。

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

设置

  • 分区高度 - 选择此分区的大小。
  • 背景色 - 为分区设置背景色。

图片

  • 图片 - 添加要在分区中显示的图片。
  • 图片样式 - 选择图片的裁剪样式。选择则不用裁剪图片。
  • 图片位置 - 选择框架内图片的对齐方式。

文本

  • 标题 - 为分区添加标题。
  • 文本 - 将文本添加到此分区。
  • 使用辅助按钮样式 - 以带有实线轮廓的透明状显示按钮。
  • 按钮标签 - 向此分区添加带文本标签的按钮。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮,请将此字段留空。

图片对齐方式

  • 桌面 - 在从台式机查看时,选择分区中的图片显示在左侧还是右侧。
  • 移动 - 选择从移动设备查看时,分区中的图片是首先显示还是第二显示。

将带文本图片添加到主页

  1. 点击添加分区。2. 点击带文本图片,然后点击选择。3. 在图片区域,点击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。
    • 若要从 Burst 中选择库存图片,请单击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。
    • 若要从本地计算机选择图片,请点击选项卡,然后点击上传
  2. 使用设置来自定义带文本图片分区。5. 点击保存

带文本叠加的图片

您可以在主页上使用带文本图片叠加分区向客户显示自定义消息。您的消息可以介绍产品、分享公告或欢迎客户访问您的商店。

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

设置

  • 分区间距 - 选择此分区的大小,无论是,还是特大均可。
  • 图片 - 添加要在分区中显示的图片。
  • 图片对齐方式 - 选择要在分区中对齐图片的方式。

文本

  • 标题 - 向您的分区添加标题。
  • 文本 - 向您的分区添加正文文本。
  • 文本大小 - 设置标题和正文文本的大小。
  • 使用辅助按钮样式 - 以带有实线轮廓的透明状显示按钮。
  • 按钮标签 - 向分区添加带文本标签的按钮。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮,请将此字段留空。

叠加

  • 显示叠加 - 在图片上添加一层颜色。叠加层可以使文本更易于阅读。
  • 叠加颜色 - 设置叠加层的颜色。
  • 文本颜色 - 设置标题和文本的颜色。如果背景图片较暗,选择浅色文本会使文本更易于阅读。
  • 不透明度 - 设置叠加的不透明度。

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

  1. 点击添加分区
  2. 点击带文本叠加的图片,然后点击选择。3. 在图片区域,点击选择图片然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。
    • 若要从 Burst 中选择库存图片,请单击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。
    • 若要从本地计算机选择图片,请点击选项卡,然后点击上传
  3. 使用设置来自定义您的分区。5. 点击保存

新闻通讯

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

向主页添加新闻通讯注册

  1. 点击添加分区。3. 点击新闻通讯,然后点击选择。4. 在标题字段中输入新闻通讯注册的标题。在副标题字段中输入新闻通讯注册的副标题。6. 在成功消息字段中输入成功消息。客户可在提交电子邮件地址后看到成功消息。默认成功消息为“感谢订阅”。7. 通过点击文本颜色样本并选择颜色,为新闻通讯注册字段设置文本颜色。8. 通过点击背景色样本并选择颜色,为新闻通讯注册分区设置背景颜色。9. 点击保存

地图

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

提示:若要显示您的地图,您需要注册 Google 地图 API 密钥

地图分区包括以下设置:

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

在主页中添加地图

  1. 点击添加分区。2. 点击地图,然后点击选择。3. 使用设置来自定义您的地图分区。4. 点击保存

视频

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

若要添加视频,您需要找到此视频的共享链接:

  • YouTube - YouTube 共享链接如下所示:https://youtu.be/Oc5v_ToKP7c。您可以在此 YouTube 帮助文章中了解如何复制 YouTube 视频的共享链接。
  • Vimeo - Vimeo 共享链接如下所示:https://vimeo.com/123456789。您可以在此 Vimeo 帮助中心文章中了解如何复制 Vimeo 视频的共享链接。

视频分区包括以下设置:

设置

  • 标题 - 添加显示在播放按钮上方的文本。
  • 视频链接 - 添加视频的共享链接。

封面

  • 图片 - 添加视频未播放时要显示在视频分区中的图片。
  • 图片位置 - 选择图片在视频分区中的位置。

叠加

  • 显示叠加 - 在您的占位符图片和按钮标签之间添加一层颜色。叠加使视频上的文本更易于阅读,并且在点击播放按钮之前都会显示。
  • 叠加 - 设置叠加层的颜色。
  • 文本 - 设置标题文本和播放按钮的颜色。
  • 不透明度 - 设置叠加的不透明度。

将视频添加到您的主页

  1. 点击添加分区。3. 点击视频,然后点击选择。4. 将视频的分享链接粘贴到视频链接字段中。5. 通过设置来对您的视频分区进行自定义。6. 点击保存

特色幻灯片

特色幻灯片可让您在主页上展示更多产品信息。

您可以展示产品特色、新产品系列或产品的多属性。由于在桌面浏览内容集时页面滚动会被锁定,因此最好仅将少量幻灯片用于放映。

使用移动设备查看时,需要点击或捏合操作才能打开和观看特色幻灯片。为了吸引移动客户打开特色幻灯片,请使用有吸引力的封面图片并使用带有“号召性”的文本。

您最多可以向特色幻灯片添加 5 张幻灯片。

自定义特色幻灯片

  1. 单击添加分区。3. 单击特色幻灯片,然后单击选择。4. 使用设置来对您的特色幻灯片分区进行自定义。5. 点击保存

添加图片幻灯片

  1. 内容区域中,单击幻灯片
  2. 单击背景色样本以从调色板中选择背景的颜色。
  3. 图片区域中,单击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。
  4. 若要从 Burst 中选择库存图片,请单击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。
  5. 若要从本地计算机选择图片,请点击选项卡,然后点击上传

  6. 标题字段中,键入要在幻灯片上方显示的文本。

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

  8. 按钮链接字段中,设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮,请将此字段留空。

自定义特色幻灯片设置

  1. 如果要将幻灯片按钮显示为带有实线轮廓的透明按钮,请选中 Use secondary button style(使用辅助按钮样式)。
  2. 如果要更改文本颜色,请单击 Slide heading color(幻灯片标题颜色)样本以从调色板中选择颜色。
  3. 封面设置区域中,通过单击选择图片选择特色幻灯片分区的封面图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。
  4. 若要从 Burst 中选择库存图片,请单击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。
  5. 若要从本地计算机选择图片,请点击选项卡,然后点击上传

  6. 标头列表中,输入想要显示在封面图片上的文本。

  7. Heading position(标题位置)列表中,选择标题文本显示在封面图片的左侧还是中心。此设置仅适用于桌面视图。

  8. Overlay(叠加)区域中,选中 Show overlay(显示叠加)。

  9. 单击 Overlay color(叠加颜色)swatch 选择图片叠加的颜色。

  10. 单击文本颜色样本以选择文本的颜色。

<aside class="note note-information">
<h4>提示: </h4>
<p>If the background image is dark, picking a light text color makes the text easier to read.</p>
</aside>
  1. 不透明度列表中,选择图片叠加的透明度级别。

  2. 点击保存

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

免费试用