Dawn 中的可用分区

在 Dawn 中,您可以在任何页面上添加分区。每个页面上都会显示一些默认分区,例如公告栏、标头和页脚。

公告栏

您可以使用公告栏从任何页面向您的客户传达重要信息。该分区没有自己的设置,但您可以自定义多达 12 个不同的公告块,以便显示重要信息。您可以添加公告栏的链接,使其可点击并将客户引导至特定页面。

公告块

公告栏分区中公告块的设置
设置 描述
文本 要向您的客户显示的公告。
配色方案 用于公告栏的配色方案。
链接 您希望客户在点击公告栏时要导航到的链接。

标头

标头会在您模板中的所有页面上显示。

分区设置

标题分区的设置
设置 描述
Logo 图片 您商店的 logo。
自定义 logo 宽度 logo 的宽度。可以是 10 的任何倍数 - 从 50 px 到 250 px。默认值为 100 px。
logo 在较大屏幕上的位置

当客户在较大屏幕(例如台式设备)上查看网站时,logo 会显示在标头中。

  • 中间居左 - 将 logo 与主菜单内联显示,在垂直方向上居中并向左侧对齐。
  • 左上方 - 在主菜单上方显示 logo,并将 logo 和菜单项向左侧对齐。
  • 中间居左(默认) - 在主菜单上方显示 logo,并将 logo 和菜单项居中对齐。
菜单 用于主菜单的菜单。
显示分隔线 显示一条线,用于直观地将标头与页面内容进行分隔。
启用粘性标头 在客户向上滚动时重新显示标头。在客户向下滚动时消失。

页脚

页脚会在您模板中的所有页面上显示。

分区设置

页脚分区的设置
设置 描述
配色方案 可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”中选择页脚的背景色。
显示电子邮件注册信息 包含电子邮件注册信息表单,客户可使用此表单订阅您的新闻通讯和营销信息。
标题 显示电子邮件注册信息表单的标题。如果未启用显示电子邮件注册信息,则不会显示此内容。
社交媒体图标 显示您在模板设置中输入了个人资料链接的所有社交媒体平台的图标。
启用国家/地区选择器 添加一个选择器,供客户选择您在付款设置中启用的国家和地区,以便客户可以使用他们所选的货币查看您的产品价格。
启用语言选择器 添加一个选择器,供客户选择您在语言设置中启用的国家和地区,以便客户可以使用他们所选的语言浏览您的商店。
显示付款图标 显示商店中已启用的所有付款方式的图标。

菜单块

页脚分区中菜单块的设置
设置 描述
标题 块的标题。
菜单 要在块中显示的菜单。

文本块

文本块可用于突出显示重要信息,例如商店详情、促销或联系信息。

页脚分区中文本块的设置
设置 描述
标题 块的标题。
子文本 要在块中显示的文本。

图片块

页脚分区中图片块的设置
设置 描述
图片 要在块中显示的图片。
图片宽度 设置图片的宽度。可以是 5 的任何倍数 - 从 50 px 到 200 px。默认值为 100 px。
较大屏幕上的图片对齐方式

对齐块中的图片:

  • 左对齐 - 将图片向块的左侧对齐。
  • 居中(默认) - 将图片在块中居中对齐。
  • 右对齐 - 将图片向块的右侧对齐。

博客文章

如果您的 Shopify 商店中有博客,则可以使用博客文章分区突出显示该博客中的文章。博客文章分区中的每篇博客文章都会显示文章摘录的前 55 个词。如果一篇博客文章没有摘录,则改为显示这篇文章的前 30 个词。

分区设置

博客文章分区的设置
设置 描述
标题 分区的标题。
博客 要用于显示博客文章的博客。默认为您的博客页面上按字母顺序显示的第一个博客。
博客文章 要显示在该分区中的博客文章数。最大值:3 篇。
显示配图 显示博客文章的配图。建议的图片纵横比:2:3。
显示日期 显示博客文章的创建日期。
显示作者 显示博客文章的作者。
显示辅助背景 根据文本颜色调整背景色。
如果博客中的博客文章未全部显示,请启用“查看全部”按钮 如果博客中的博客文章数量超出了博客文章字段中设置的值,则会显示“查看全部”按钮,该按钮可将客户定向到博客的页面。

选择博客

  1. 在模板编辑器中,单击博客文章分区的标题。
  2. 博客分区中,单击更改
  3. 选择博客。
  4. 单击选择,然后单击保存

拼贴

您可以创建视频、图片、产品和产品系列的拼贴。每个拼贴分区都包含三个块。默认情况下,该分区各包含一个视频、产品和产品系列块。

若要创建包含超过三个块的拼贴,请在第一个拼贴分区下方添加其他拼贴分区,并且请勿在靠下的拼贴分区中包含标题值。所有拼贴分区将合并显示为一个分区。

分区设置

拼贴分区的设置
设置 描述
标题 分区的标题。
台式设备上的布局

块在台式设备上的显示方式。

  • 左侧大块(默认) - 分区中的第一个块显示在左侧,且大小大于任何其他块。
  • 右侧大块 - 分区中的最后一个块显示在右侧,并且比其他所有块都大。
  • 移动设备上的布局

    块在移动设备上的显示方式。

    • 拼贴 - 在拼贴布局中显示图片:
      • 如果在台式设备上的布局中启用了左侧大块,那么该分区中的第一个块会显示在顶部,并且比其他所有块都大。
      • 如果在台式设备上的布局中启用了右侧大块,那么该分区中的最后一个块会显示在底部,并且比其他所有块都大。
    • - 在一列中以相同尺寸显示所有图片。

    视频块

    拼贴分区中视频块的设置
    设置 描述
    封面图片 客户播放视频之前显示的图片。
    链接 视频的 YouTube 或 Vimeo 链接。视频必须公开提供。
    视频替代文本 视频替代文本。为使用屏幕阅读器的客户描述视频。
    添加图片填充 添加所需的额外空间以确保您的图片不被裁剪。为避免裁剪图片,请上传纵横比为 16:9 的封面图片

    产品块

    拼贴分区中产品块的设置
    设置 描述
    产品 要显示的产品。
    显示辅助背景 根据文本颜色调整背景色。
    在悬停时显示第二张图片 在客户将光标悬停在产品图片上时,显示第二张产品图像(如果产品有第二张图片)。
    添加图片填充 添加所需的额外空间以确保您的图片不被裁剪。为避免裁剪图片,请上传纵横比为 16:9 的产品图片。

    产品系列块

    拼贴分区中产品系列块的设置
    设置 描述
    收藏 要显示的产品系列。
    添加图片填充 添加所需的额外空间以确保您的图片不被裁剪。为避免裁剪图片,请上传纵横比为 16:9 的产品图片。
    配色方案 产品系列块分区的背景色。可从“强调色 1”、“强调色 2”、“背景 1”、“背景 1”、“背景 2”或“反转色”中选择。

    图片块

    拼贴分区中图片块的设置
    设置 描述
    图片 您要显示的图片。
    添加图片填充 添加所需的额外空间以确保您的图片不被裁剪。为避免裁剪图片,请上传纵横比为 16:9 的产品图片。
    配色方案 图片块的背景色。可从“强调色 1”、“强调色 2”、“背景 1”、“背景 1”、“背景 2”或“反转色”中选择。

    产品系列列表

    您可以添加要突出显示的产品系列列表。您最多可以向产品系列列表中添加 16 个产品系列块。

    分区设置

    产品系列列表分区的设置
    设置 描述
    标题 分区的标题
    图片比 产品系列的配图的图片比:
    • 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。
    • 纵向 - 将图片裁剪为使用 2:3 比例。
    • 方形(默认) - 将图片裁剪为使用 1:1 比例。
    配色方案 产品系列列表分区和图片填充的背景色。可从“强调色 1”、“强调色 2”、“背景 1”、“背景 1”、“背景 2”或“反转色”中选择。
    在移动设备上启用滑动功能 将移动设备上的显示方式从列更改为行,使客户可以横向滑动以查看更多产品系列块。
    添加图片填充 添加所需的额外空间以确保您的图片不被裁剪。为避免裁剪图片,请上传纵横比为 16:9 的产品图片。
    如果列表中的产品系列未全部显示,请启用“查看全部”按钮 如果产品系列列表中的产品系列数超过了可显示的最大产品系列数字段中设置的值,此时会显示“查看全部”按钮,该按钮可将客户定向到产品系列列表。

    选择产品系列

    1. 在模板编辑器中,单击要向其添加产品系列的产品系列块。
    2. 单击选择产品系列
    3. 单击一个产品系列,然后单击选择

    联系表

    您的联系表会将所有提交发送到您商店的发件人邮箱。您可以在 Shopify 后台的常规设置中更改发件人邮箱。

    该表单具有以下字段:

    • 名称
    • 邮箱(必填)
    • 电话号码
    • 评论

    联系表使用以下配色方案:

    • 背景色是背景 1 的颜色。
    • 文本和文本字段轮廓颜色是文本的颜色。
    • “发送”按钮颜色是强调色 1 的颜色。

    自定义 Liquid

    您可以添加自己的 Liquid 代码以创建自定义分区。

    • 添加已下载应用的说明中提供的应用代码片段,以轻松地将应用引入您的页面。
    • 直接在编辑器中添加自定义 Liquid 代码。

    电子邮件注册信息

    您可以添加一个分区,供客户在其中输入他们的邮箱并订阅您的新闻通讯或营销信息。当客户订阅时,系统会在您 Shopify 的后台中创建客户账户。

    该分区附带三个默认块:

    • 标题
    • 副标题
    • 电子邮件表单

    分区设置

    电子邮件注册信息分区的设置
    设置 描述
    配色方案 电子邮件注册信息分区的背景色。可从“强调色 1”、“强调色 2”、“背景 1”、“背景 1”、“背景 2”或“反转色”中选择。
    使分区展示全宽 使分区按浏览器窗口的全宽显示。

    标题块

    产品系列列表分区中标题块的设置
    设置 描述
    标题 分区的标题。

    副标题块

    产品系列列表分区中副标题块的设置
    设置 描述
    描述 分区的描述。

    电子邮件表单

    电子邮件表单块会显示一个字段,客户可在其中输入邮箱来注册接收您的营销信息。该块没有可自定义设置。

    特色产品

    您可以添加包含特定产品的分区。

    分区设置

    特色产品分区的设置
    设置 描述
    产品 您希望在分区中作为特色产品显示的产品。
    显示辅助背景 在辅助背景色上显示特色产品。
    启用视频循环 允许视频再次播放。客户必须单击才能开始重新播放。

    分区块

    在 Dawn 中,您可以在特色产品分区中添加以下块。

    特色产品分区中提供的块
    设置
    文本 输入用于特色产品的文本:
    • 文本:接受文本或动态源。
    • 文本样式:在正文副标题大写之间切换。
    标题 此块没有可自定义设置。
    价格 此块没有可自定义设置。
    多属性选择器 在按钮或下拉菜单之间选择。
    数量选择器 此块没有可自定义设置。
    显示动态结账按钮 显示您已在支付设置中启用的任何动态结账选项。
    分享 可供客户将产品分享到其社交媒体的可点击文本。
    产品评分 用星星图形显示平均产品评分,并在括号里注明评论次数,例如 ★★★★★ (8)。还需要产品评论应用(例如 Shopify Product Reviews)以及元字段定义(用于 reviews.rating_countreviews.rating)。
    自定义 Liquid 添加自定义 Liquid 或 HTML 代码

    特色产品系列

    您可以添加一个分区,用于在一个产品系列中显示产品。

    分区设置

    特色产品系列分区的设置
    设置 描述
    标题 分区的标题。
    收藏 要在其中显示产品的产品系列。
    要显示的最大产品数 要在产品系列中显示的产品数量。必须是偶数。最小值:2。最大值:12。
    如果产品系列中的产品未全部显示,请启用“查看全部”按钮 如果产品系列中的产品数超过了可显示的最大产品数字段中设置的值,此时会显示“查看全部”按钮,该按钮可将客户定向到产品系列页面。
    在移动设备上启用滑动功能 将移动设备上的显示方式从列更改为行,使客户可以横向滑动以查看更多产品。
    图片比 产品图片的图片比:
    • 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。
    • 纵向 - 将图片裁剪为使用 2:3 比例。
    • 方形 - 将图片裁剪为使用 1:1 比例。
    在悬停时显示第二张图片 在客户将光标悬停在产品图片上时,显示第二张产品图像(如果产品有第二张图片)。
    添加填充 向图片添加填充内容,以确保您的图片不被裁剪。
    显示图片边框 为产品图片添加细边框。
    显示厂商 显示产品的厂商。
    显示产品评分 用星星图形显示平均产品评分,并在括号里注明评论次数,例如 ★★★★★ (8)。还需要产品评论应用(例如 Shopify Product Reviews)以及元字段定义(用于 reviews.rating_countreviews.rating)。

    图片横幅

    图片横幅分区支持一张或两张图片,以及一个带按钮的文本框。如果使用了两张图片,它们将在台式设备上并排显示。在移动设备上,您可以选择图片是并排显示还是在列中显示。

    在台式设备中,文本框会覆盖部分图片。在移动设备上,文本框在图片下方显示。

    分区设置

    图片横幅分区的设置
    设置 描述
    第一张图片 横幅的主图片。如果向分区中添加了两张图片,则该图片将显示在左侧或顶部,具体取决于客户是使用台式设备还是移动设备。
    第二张图片 横幅的辅助图片。如果向分区中添加了两张图片,则该图片将显示在右侧或底部,具体取决于客户是使用台式设备还是移动设备。
    使分区高度适应第一张图片大小 将分区的高度设置为第一张图片的高度。在移动设备上,两张图片都将调整为第一张图片的高度。
    在台式设备上显示文本框 对于使用台式计算机购物的客户,在横幅图片上方显示一个文本框。
    台式设备上的文本位置

    在台式设备上查看时图片上的文本框位置。

    • 顶部 - 在图片顶部显示文本框。
    • 居中 - 在图片中心显示文本框。
    • 底部 - 在图片底部显示文本框。

    文本框始终在水平方向上居中显示。

    图片叠加不透明度 使用叠加使横幅图片变暗。使用滑块设置叠加的不透明度。默认为 0%。
    配色方案 图片横幅分区和图片填充的背景色。可从“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”中选择。仅在选中在台式设备上显示文本框选项时,所选配色方案才可见。
    在移动设备上堆叠图片 如果向分区中添加了两张图片,则图片将按列显示,而不是并排显示。
    在图片下方显示文本 在移动设备上的图片下方显示文本。

    标题块

    图片横幅分区中标题块的设置
    设置 描述
    标题 文本框标题的较大文本。
    标题大小 更改标题文本的大小。在中号和大号之间选择。

    文本块

    图片横幅分区中文本块的设置
    设置 描述
    描述 显示段落样式文本。

    按钮块

    图片横幅分区中按钮块的设置
    设置 描述
    第一个按钮标签 第一个按钮上显示的文本。
    第一个按钮链接 您要将第一个按钮链接到的 URL。
    使用轮廓按钮样式 将按钮样式调整为轮廓式,而不是使用实心背景。
    第二个按钮标签 第二个按钮上显示的文本。
    第二个按钮链接 您要将第二个按钮链接到的 URL。
    使用轮廓按钮样式 将按钮样式调整为轮廓式,而不是使用实心背景。

    带文本的图片

    您可以添加一个分区并在其中包含一张图片和一个具有可选按钮的文本块,以将客户链接到新页面。选择与图片配对的文本,以将重点放在所选产品、产品系列或博客文章上。添加有关是否有货和样式的详细信息,还可以提供评论。

    分区设置

    带文本图片分区的设置
    设置 描述
    图片 分区的图片。
    图片比 该图片的图片比:
    • 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。
    • 纵向 - 将图片裁剪为使用 2:3 比例。
    • 方形 - 将图片裁剪为使用 1:1 比例。
    配色方案 带文本的图片和图片填充的背景色。可从“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”中选择。
    台式设备上的布局 台式设备上的分区布局:
    • 图片在前 - 在左侧显示图片。
    • 文本为前 - 在左侧显示文本。

    标题块

    带文本图片分区中标题块的设置
    设置 描述
    标题 分区标题的较大文本。

    文本块

    带文本图片分区中文本块的设置
    设置 描述
    描述 在文本分区中显示段落样式文本。

    按钮块

    带文本图片分区中按钮块的设置
    设置 描述
    按钮标签 按钮上显示的文本。
    按钮链接 您要将按钮链接到的 URL。

    多列

    您可以使用多列分区在列布局中显示内容,并在列下方添加按钮以将客户定向至新页面。选择与图片配对的文本,以将重点放在所选产品、产品系列或博客文章上。添加有关是否有货和样式的详细信息或提供评论。

    分区设置

    多页面分区的设置
    设置 描述
    标题 分区的标题。
    图片宽度

    添加到列中的图片的宽度。

    • 列的全宽 - 图片宽度等于列的全宽。
    • 列的半宽 - 图片宽度等于列宽的一半。
    • 列的三分之一宽度 - 图片宽度等于列宽的三分之一。
    图片比

    该图片的图片比:

    • 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。
    • 纵向 - 将图片裁剪为使用 2:3 比例。
    • 方形 - 将图片裁剪为使用 1:1 比例。
    • 圆形 - 将图片裁剪为以圆形显示
    列对齐方式

    列中图片和文本的对齐方式:

    • 左对齐(默认) - 将图片和文本向左侧对齐。
    • 居中 - 将图片和文本居中对齐。
    辅助背景

    根据背景调整分区的样式:

    • - 列和分区背景将保留背景 1 的颜色,并且列没有填充。
    • 显示为列背景 - 列的背景是文本的不透明色,且为列添加填充。
    • 显示为分区背景 - 分区背景是文本的不透明色,列背景为背景 1,并且列中会添加填充。
    按钮标签 按钮上显示的文本。
    按钮链接 您要将按钮链接到的 URL。
    在移动设备上启用滑动功能 将移动设备上的显示方式从列更改为行,使客户可以横向滑动以查看更多列块。

    列块

    一个分区中最多可包含 12 列。如果您有一个、两个或三个列块,它们会在台式设备上在一行中显示。如果您有四个或以上的列块,它们将以两列的布局显示。在移动设备上,除非启用在移动设备上启用滑动功能,否则列块会在一列中显示。

    多页面分区中列块的设置
    设置 描述
    图片 您要显示的图片。
    标题 列的标题。
    描述 列中的段落文本。

    页面

    您可以选择在分区中显示自定义页面的内容。这会将页面的整个内容引入分区,但不会从任何模板引入任何 Liquid 代码。

    分区的配色方案使用以下设置:

    • 默认情况下,文本采用文本颜色。应用于页面文本的任何特定样式都会应用于该分区。
    • 超链接采用的颜色是强调色 1

    分区设置

    页面分区的设置
    设置 描述
    页面 您要显示的在线商店页面。

    富文本

    您可以添加包含标头、段落内容和按钮的富文本分区,以将客户链接到新页面。

    分区设置

    富文本分区的设置
    设置 描述
    配色方案 富文本分区的背景。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”中选择。
    使分区展示全宽 分区默认为全宽。

    标题块

    富文本分区中标题块的设置
    设置 描述
    标题 分区的标题。
    标题字体大小

    标题文本的大小:

    • 中等

    文本块

    文本块适合用于与客户分享有关您品牌的信息。您可以介绍产品的优点、发布公告、欢迎客户访问您的商店或介绍您的品牌价值。

    富文本分区中文本块的设置
    设置 描述
    描述 分区主要内容的段落样式文本。

    按钮块

    富文本分区中按钮块的设置
    设置 描述
    按钮标签 按钮上显示的文本。
    按钮链接 您要将按钮链接到的 URL。
    使用轮廓按钮样式 将按钮样式调整为轮廓式,而不是使用实心背景。

    视频

    您可以在商店的页面中添加视频分区,以嵌入 YouTube 或 Vimeo 中的视频。

    分区设置

    视频分区的设置
    设置 描述
    标题 分区的标题。
    封面图片 客户播放视频之前显示的图片。
    URL 视频的 YouTube 或 Vimeo 链接。视频必须公开提供。
    视频替代文本 视频替代文本。
    使分区展示全宽 删除默认填充,并使分区按页面的全宽显示。

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

    免费试用