登录
开始免费试用

在线商店功能

您可以使用分区向在线商店的任何页面添加功能。您可以选择、添加和配置包含图片、文本、品牌颜色等内容的分区。

某些页面将具有默认分区，例如公告栏、标头和页脚。这些分区会在每个页面上显示。

所有 Shopify 模板都包括本页详细说明的 Online Store 功能。此外，付费模板可能还包括其中一些功能。有关更多详细信息，请参阅特定模板的支持指南。

本页相关主题

公告栏

您可以使用公告栏在任何页面中向客户传达重要信息，并且可以自定义多达 12 个不同的公告块。您还可以向公告栏中添加语言选择器、国家/地区选择器以及社交媒体图标。

如果您有多个公告，则可以选择是自动轮换公告，还是让客户手动使用 V 形按钮来浏览公告。

分区设置

公告栏设置的概述。
设置描述
配色方案可应用于此分区的一组颜色。详细了解配色方案。
显示分隔线显示一条线，用于直观地将公告栏与页面内容进行分隔。
社交媒体图标显示链接到您的社交媒体账户的社交媒体图标。
自动循环展示公告激活可自动轮换公告。
幻灯片更换时间间隔选择公告的轮换时间间隔。
启用国家/地区选择器添加一个选择器，供客户选择您在付款设置中激活的国家和地区，以便客户可以使用他们所选的货币查看您的产品价格。
启用语言选择器添加一个选择器，供客户选择您在语言设置中激活的国家和地区，以便客户可以使用他们所选的语言浏览您的商店。

公告块

您可以向公告块中添加文本和链接，使其可点击并将客户定向到特定页面。

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

标头会显示在在线商店的所有页面上。

分区设置

标头设置的概述。
设置描述
台式设备上的 logo 位置

当客户在大屏幕上查看网站时，logo 在标头中显示的位置。logo 的位置会自动针对移动设备进行优化。

  • 中间居左 - 将 logo 与主菜单内联显示，在垂直方向上居中并向左侧对齐。
  • 左上方 - 在主菜单上方显示 logo，并将 logo 和菜单项向左侧对齐。
  • 顶部居中（默认） - 在主菜单上方显示 logo，并将 logo 和菜单项居中对齐。
菜单要用作主菜单的菜单。点击更改以选择其他菜单。
台式设备菜单类型使用下拉菜单选择桌面菜单类型：
  • 下拉菜单 - 显示二级菜单内容，在点击二级项之前，相应的三级项将被折叠。菜单类型会针对移动设备进行自动优化。
  • 超级菜单 - 在首次点击时显示所有二级和三级菜单内容。菜单类型会针对移动设备进行自动优化。
  • 抽屉 - 通过汉堡菜单图标显示抽屉菜单。点击抽屉后将显示所有一级菜单项，点击这些菜单项可打开菜单项的其他层（二级和三级）。
粘性标头

选择是否使用粘性标头以及所需的显示方式。

  • 无 - 标头不会随客户浏览一起滚动。
  • 向上滚动 - 当客户向上滚动页面时，标头将会显示。
  • 始终 - 当客户向上或向下滚动页面时，标头将始终显示。
  • 始终，缩小 logo 尺寸 - 当客户向上或向下滚动页面时，标头将始终显示。客户滚动页面时，logo 尺寸会缩小 25%。
显示分隔线显示一条线，用于直观地将标头与页面内容进行分隔。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
启用国家/地区选择器添加一个选择器，供客户选择您在付款设置中启用的国家和地区，以便客户可以使用他们所选的货币查看您的产品价格。
启用语言选择器添加一个选择器，供客户选择您在语言设置中启用的国家和地区，以便客户可以使用他们所选的语言浏览您的商店。
移动设备上的 logo 位置

选择 logo 在移动设备上的显示位置。

  • 居中 - logo 显示在标头的中间位置。
  • 左 - logo 显示在标头左侧。
间距在标头下方添加间距。使用范围滑块向下边距添加 0px 到 100px 之间的空间。
分区填充向标头的顶部或底部添加空间。使用范围滑块将 0px 到 100px 的空间添加到标头的顶部或底部。

标头块

您可以在标头分区中添加以下块。

标头分区中应用块设置的概述。
设置描述
应用添加与 Online Store 2.0 兼容的应用。最多添加 3 个应用。它们将被放置在购物车图标的左侧，大小限制为 44px x 44px。

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

分区设置

页脚设置的概述。
设置描述
配色方案可应用于此分区的一组颜色。详细了解配色方案。
显示电子邮件注册信息包含电子邮件注册信息表单，客户可使用此表单订阅您的新闻通讯和营销信息。
标题 显示电子邮件注册信息表单的标题。如果未启用显示电子邮件注册信息，则不会显示此内容。使用按钮将文本设置为粗体或斜体，或添加链接。
在 Shop 中关注在 Shop 应用中显示您店面的关注按钮。详细了解在 Shop 中关注。
社交媒体图标显示您在模板设置中输入了个人资料链接的所有社交媒体平台的图标。
启用国家/地区选择器添加一个选择器，供客户选择您在付款设置中启用的国家和地区，以便客户可以使用他们所选的货币查看您的产品价格。
启用语言选择器添加一个选择器，供客户选择您在语言设置中启用的国家和地区，以便客户可以使用他们所选的语言浏览您的商店。
显示付款图标显示商店中有效付款方式的图标。当支付服务提供商没有注册图标时，该付款方式可能没有可用的图标。当客户访问您的商店时，系统会筛选这些图标，以便仅显示可用于当前客户的所在地区和所用货币的付款方式。
显示政策链接在版权信息旁边显示政策链接图标。可通过访问 Shopify 后台中的设置 > 政策来生成政策链接。详细了解如何添加商店政策。
间距在页脚上方添加空间。使用范围滑块向上边距添加 0px 到 100px 之间的空间。
分区填充向页脚的顶部或底部添加空间。使用范围滑块将 0px 到 100px 的空间添加到页脚的顶部或底部。

菜单块

页脚分区中菜单块设置的概述。
设置描述
标题块的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
菜单要在块中显示的菜单。页脚中仅显示顶级菜单项，因此下拉菜单类型不会按预期方式显示。

品牌信息块

您可在模板设置中管理品牌信息。详细了解品牌信息。

页脚分区的品牌信息设置的概述。
设置描述
显示社交媒体图标显示您在模板设置中输入了个人资料链接的所有社交媒体平台的图标。

文本块

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

页脚分区中文本块设置的概述。
设置描述
标题块的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
子文本要在块中显示的文本。

图片块

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

对齐块中的图片：

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

博客文章

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

分区设置

博客文章设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
博客要用于显示博客文章的博客。默认为您的博客页面上按字母顺序显示的第一个博客。
博客文章要显示在该分区中的博客文章数。最大值：4 篇。
台式设备上的列数台式电脑上显示的列数。最小值：1。最大值：4。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
显示配图显示博客文章的配图。建议的图片纵横比：3:2。
显示日期显示博客文章的创建日期。
显示作者显示博客文章的作者。
如果博客中的博客文章未全部显示，请启用“查看全部”按钮如果博客中的博客文章数量超出了博客文章字段中设置的值，则会显示“查看全部”按钮，该按钮可将客户定向到博客的页面。
分区填充将间距添加到博客文章分区的顶部或底部。使用范围滑块在博客文章分区上方或下方添加 0px 到 100px 之间的空间。

选择博客

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

拼贴

您可以创建图片、产品、产品系列和视频的拼贴。每个拼贴分区都包含三个块。默认情况下，该分区包含图片、产品和产品系列块。删除其中一个块后，您便可以添加视频块。

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

此分区中所有图片的推荐纵横比均为 2:3 或 1:1。

分区设置

拼贴分区设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
台式设备上的布局

拼贴媒体在桌面上的显示模式。

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

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

拼贴 - 在拼贴布局中显示图片：
  • 如果在台式设备上的布局中启用了左侧大块，那么该分区中的第一个块会显示在顶部，并且比其他所有块都大。
  • 如果在台式设备上的布局中启用了右侧大块，那么该分区中的最后一个块会显示在底部，并且比其他所有块都大。
列 - 在一列中显示所有大小相同的媒体文件。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
分区填充将间距添加到拼贴分区的顶部或底部。使用范围滑块将 0px 到 100px 的空间添加到分区的顶部或底部。

视频块

拼贴分区中视频块设置的概述。
设置描述
封面图片客户播放视频之前显示的图片。您可以在 Shopify 后台中上传自定义封面图片。
URL指向视频的 YouTube 或 Vimeo 链接。视频必须公开提供。视频将在弹出窗口中播放。
视频替代文本视频替代文本。为使用屏幕阅读器的客户介绍视频的背景和目的。

产品块

拼贴分区中产品块设置的概述。
设置描述
产品要显示的产品。
在悬停时显示第二张图片在客户将光标悬停在产品图片上时，显示第二张产品图像（如果产品有第二张图片）。

产品系列块

拼贴分区中产品系列块设置的概述。
设置描述
收藏要显示的产品系列。

图片块

拼贴分区中图片块设置的概述。
设置描述
图片分区的图片。点击选择图片以选择图片，或点击更改按钮以更改或移除图片。
编辑替代文本添加简短的图片描述以改进 SEO，还可为使用屏幕阅读器的客户描述图片。

可折叠内容

可折叠内容分区支持可折叠或展开以查看其中内容的行，还支持可放置在可折叠内容左侧或右侧的图片。

分区设置

可折叠内容设置的概述。
设置描述
大标题可折叠内容分区的可选大标题。显示在分区标题上方。
标题可折叠内容分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
标题对齐方式选择分区标题的对齐方式。选项包含左对齐、居中（默认）或右对齐。
布局

为可折叠内容选择布局：

  • 无容器（默认）
  • 行容器 - 每个可折叠行都包含在阴影框中
  • 分区容器 - 在阴影框中包含整个可折叠内容分区
配色方案 可应用于此分区的一组颜色。详细了解配色方案。
容器配色方案 可应用于容器的一组颜色。详细了解配色方案。只有将布局选项设置为行或分区容器时，所选配色方案才会显示。
打开第一个可折叠行选中后，可折叠内容的第一行将默认展开。
图片分区的图片。点击选择图片以选择图片，或点击更改按钮以更改或移除图片。
编辑替代文本添加简短的图片描述以改进 SEO，还可为使用屏幕阅读器的客户描述图片。
图片比分区图片的图片比：
  • 适应图片（默认）- 使用图片的纵横比。这可以防止图片被裁剪。
  • 小
  • 大
台式设备上的布局选择首先显示图片还是可折叠行。默认设置为文本优先。在移动设备上，始终首先显示图片。
分区填充将间距添加到可折叠内容的顶部或底部。使用范围滑块在可折叠内容分区上方或下方添加 0px 到 100px 之间的空间。

可折叠行块

可折叠行块设置的概述。
设置描述
标题可折叠行的标题。
图标从下拉列表中选择要在可折叠内容标题之前显示的图标。复选标记图标默认处于选中状态。
行内容可折叠行的内容。内容可以格式化或包含 URL 链接。此功能可以与页面中的行内容结合使用。
页面中的行内容您可以将其他页面的现有内容插入可折叠行。点击更改可选择或删除页面。此功能可以与行内容结合使用。

产品系列列表

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

分区设置

产品系列列表设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
图片比产品系列的配图的图片比：
  • 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。
  • 纵向 - 将图片裁剪为使用 2:3 比例。
  • 方形（默认） - 将图片裁剪为使用 1:1 比例。
台式设备上的列数台式电脑上显示的列数。最小值：1。最大值：5。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
如果列表中的产品系列未全部显示，请启用“查看全部”按钮显示"查看全部"按钮，将客户带至产品系列的完整列表。
移动设备上的列数为移动设备设置特定的列布局。在 1 列和 2 列之间选择。
在移动设备上启用滑动功能将移动设备上的显示方式从列更改为行，使客户可以横向滑动以查看更多产品系列块。
分区填充将间距添加到收集列表的顶部或底部。使用范围滑块在产品系列分区上方或下方添加 0px 到 100px 之间的空间。

选择产品系列

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

联系表

您的联系表会将所有提交发送到您商店的发件人邮箱。您可以在 Shopify 后台的通知设置页面中更改发件人邮箱。如果您有第三方域名，则可能还需要对域名进行身份验证。

该表单具有以下字段：

  • 名称
  • 邮箱（必填）
  • 电话号码
  • 评论

分区设置

联系表设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
分区填充将间距添加到联系表的顶部或底部。使用范围滑块在联系表分区上方或下方添加 0px 到 100px 之间的空间。

自定义 Liquid

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

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

分区设置

自定义 liquid 设置的概述。
设置描述
自定义 Liquid添加应用代码片段或其他自定义 Liquid 代码以创建高级自定义。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
分区填充将间距添加到自定义 Liquid 分区的顶部或底部。使用范围滑块在自定义 Liquid 分区上方或下方添加 0px 到 100px 之间的空间。

电子邮件注册横幅

您可以在密码页面添加分区，客户可在其中输入其邮箱以在您的商店开业时收到通知。每个电子邮件订阅都会创建一个客户账户。

该分区附带三个默认块：

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

分区设置

电子邮件注册横幅设置的概述。
设置描述
背景图片电子邮件注册横幅的背景图片。点击更改可替换或删除图片。删除图片后，将显示模板随附的图片。取消选中显示背景图片复选框可隐藏此图片。
编辑替代文本点击后可设置用于搜索引擎优化的图片替代文本，还可用于为使用屏幕阅读器的客户描述图片。
图片叠加不透明度利用叠加使电子邮件注册横幅图片变暗。使用滑块设置叠加的不透明度。默认为 0%。
显示背景图片选中此框可在电子邮件注册横幅上显示背景图片。
横幅高度

使用下拉菜单设置电子邮件注册横幅图片的高度。可在“适应图片”、“小”、“中”（默认）或“大”之间选择。

台式设备内容位置设置台式电脑上电子邮件注册横幅的位置。可在“顶部”、“中间”或“底部”以及“右”、“左”或“居中”之间选择。“中间居中”是默认选项。


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

在台式设备上显示容器对于使用台式电脑进行购物的客户，将电子邮件注册横幅图片文本放置在图片上方的文本框中。
台式设备内容对齐方式设置台式电脑上的图片横幅文本的对齐方式。可选择右对齐、左对齐或居中（默认）。
配色方案 可应用于此分区的一组颜色。详细了解配色方案。


在台式设备上，只有选中在台式设备上显示容器选项时，所选配色方案才会显示。在移动设备上，只有选中在移动设备上的图片下方显示内容时，所选配色方案才会显示。

移动设备内容对齐方式设置移动设备上的图片横幅文本的对齐方式。可选择右对齐、左对齐或居中（默认）。
在移动设备上的图片下方显示内容在移动设备上，内容将显示在电子邮件注册横幅图片下方。

标题块

电子邮件注册横幅分区中标题块设置的概述。
设置描述
标题分区的标题。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。

副标题块

电子邮件注册横幅分区中副标题块设置的概述。
设置描述
描述分区的描述。
文本样式更改电子邮件注册分区中的文本样式。可在“正文”（默认）和“副标题”中进行选择。

电子邮件注册

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

该分区附带三个默认块：

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

分区设置

电子邮件注册设置的概述。
设置描述
配色方案 可应用于此分区的一组颜色。详细了解配色方案。
使分区展示全宽使分区按浏览器窗口的全宽显示。

标题块

电子邮件注册分区中标题块设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。

副标题块

电子邮件注册分区中副标题块设置的概述。
设置描述
描述分区的描述。

电子邮件表单

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

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

分区设置

特色产品系列设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。点击动态源按钮以插入动态源作为分区的标题。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
描述为特色产品系列输入描述性文本。您可以将文本格式设置为粗体、斜体或包含链接。点击动态源按钮以插入特色产品系列描述的动态源。
从后台显示产品系列描述选中此框将使用您在 Shopify 后台中为该产品系列添加的描述，而不是使用在上述“描述”字段中输入的任何文本。
描述样式使用下拉菜单为特色产品系列的描述选择样式。选项包括正文（默认）、副标题或大写。
收藏要显示的产品所属的产品系列。点击更改以删除或更改产品系列。
要显示的最大产品数产品系列中要显示的产品数量。最小值：2。最大值：25。
台式设备上的列数台式电脑上显示的列数。最小值：1。最大值：5。
使产品全宽显示选中此框可按窗口全宽显示产品，而不受页面宽度设置的影响。
如果产品系列中的产品未全部显示，请启用“查看全部”按钮如果产品系列中的产品数超过了可显示的最大产品数字段中设置的值，此时会显示“查看全部”按钮，该按钮可将客户定向到产品系列页面。
“查看全部”样式在链接、实心按钮和轮廓按钮之间选择。
在台式设备上启用轮播选中此框可在宽度超过 989 像素的屏幕上以轮播形式显示产品。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
图片比产品图片的图片比：
  • 适应图片（默认）- 使用图片的纵横比。这可以防止图片被裁剪。
  • 纵向 - 将图片裁剪为使用 2:3 比例。
  • 方形 - 将图片裁剪为使用 1:1 比例。
图片形状为产品图片选择以下一种图片形状：
  • 默认 - 将产品图片更改为矩形。
  • 拱形 - 将产品图片顶部更改为曲线形。
  • Blob - 将产品图片更改为六种 blob 圆形中的随机一种圆形，并且在悬停时可显示独特的动画。
  • 向左 V 形 - 将产品图片更改为向左 V 形，并在左侧有一个尖角。
  • 向右 V 形 - 将产品图片更改为向右 V 形，并在右侧有一个尖角。
  • 菱形 - 将产品图片更改为四边菱形。
  • 平行四边形 - 将产品图片更改为有两组平行线的形状。
  • 圆形 - 将产品图片更改为圆形或椭圆形，并且在悬停时可显示独特的动画。
在悬停时显示第二张图片在客户将光标悬停在产品图片上时，显示第二张产品图像（如果产品有第二张图片）。
显示厂商显示产品的厂商。
显示产品评分用星星图形显示平均产品评分，并在括号里注明评论次数，例如 ★★★★★ (8)。还需要产品评论应用以及元字段定义（用于 reviews.rating_count和 reviews.rating）。
启用快速添加按钮快速添加按钮可供客户通过产品卡将商品添加到购物车。如果产品有多属性，点击该按钮将出现弹出窗口，其中显示“选择选项”和产品详细信息，客户可在此处选择所需的多属性、将商品添加到购物车、使用“立即购买”立刻结账或点击以查看商品的完整详情。请注意，此设置取决于您的产品页面上是否启用了“立即购买”按钮。如果产品模板中未启用“立即购买”按钮，客户可以选择将产品添加到购物车，但不会看到“立即购买”快速结账工作流。
移动设备上的列数为移动设备设置特定的列布局。在 1 列和 2 列之间选择。
在移动设备上启用滑动功能将移动设备上的显示方式从列更改为行，使客户可以横向滑动以查看更多产品。
分区填充将间距添加到特色系列分区的顶部或底部。使用范围滑块在特色产品系列分区上方或下方添加 0px 到 100px 之间的空间。

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

分区设置

特色产品设置的概述。
设置描述
产品您希望在分区中作为特色产品显示的产品。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
显示辅助背景在辅助背景色上显示特色产品。
台式设备媒体文件宽度选择媒体文件大小：“小”、“中”或“大”。图片会针对移动设备进行自动优化。
将媒体文件限制为屏幕高度选择此选项后，系统将基于浏览器窗口的高度来设置媒体文件最大高度。
媒体文件适应选择原始可保留媒体文件的原始纵横比，选择填充可使媒体文件适应其显示位置。
台式设备上的媒体文件位置选择在左侧还是右侧显示特色产品媒体文件。仅适用于在台式计算机上访问页面的用户。
图片缩放

选择图片在台式设备上的缩放方式：

  • 打开灯箱 - 打开大图。这是移动设备上的默认设置。
  • 无缩放 - 对图片停用缩放。推荐用于低分辨率图片。
  • 点击和悬停 - 点击可放大图片，然后悬停鼠标即可查看已放大的不同部分。当再次点击放大的图片或者鼠标离开图片的容器时，悬停缩放将被禁用。在启用此设置或用户使用移动设备时，图片将默认为在模态窗口（灯箱）中打开。
隐藏其他多种媒体文件选择此选项可在选择多属性后隐藏其他多属性的媒体文件。
启用视频循环允许视频再次播放。客户必须点击才能开始重新播放。
分区填充将间距添加到特色产品分区的顶部或底部。使用范围滑块将 0px 到 100px 的空间添加到分区的顶部或底部。

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

特色产品分区中提供的分区块的概述。
块设置
文本输入用于特色产品的文本：
  • 文本：接受文本或动态源。
  • 文本样式：在正文、副标题或大写之间切换。
标题 标题大小：在小、中或大之间选择。
价格此块没有可自定义设置。
多属性选择器在椭圆形框或下拉菜单之间选择。
数量选择器此块没有可自定义设置。
Buy Button选中显示动态结账按钮框，以显示在 Payments 设置中启用的任何动态结账选项。
分享可供客户将产品分享到其社交媒体的可点击文本。
产品评分用星星图形显示平均产品评分，并在括号里注明评论次数，例如 ★★★★★ (8)。还需要产品评论应用以及元字段定义（用于 reviews.rating_count 和 reviews.rating）。
自定义 Liquid添加自定义 Liquid 或 HTML 代码。
应用添加一个与 Online Store 2.0 兼容的应用。
带文本的图标此块最多显示三个图标，您可从预安装图标列表或上传的图片中进行选择。如果您选择上传图片，则上传的图片会覆盖任何图标下拉菜单选项。对于图标的布局，您可以选择垂直或水平。若要删除图标，请清除标题字段。若要显示超过三个图标，请添加另一个**带文本的图标**块。
SKU当多属性具有关联 SKU 时，此块将显示与产品关联的 SKU（货号）。详细了解如何 [从后台为产品多属性添加 SKU 编号](/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku#add-sku-numbers-to-your-product-variants-from-the-admin-sectioned%20themes-specific)。

图片横幅

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

在台式设备中，文本框会覆盖部分图片。在移动设备上，文本框在图片下方显示。您可以更改台式设备和移动设备上的文本对齐方式 - 右对齐、左对齐或居中。

分区设置

图片横幅设置的概述。
设置描述
第一张图片横幅的主图片。如果向分区中添加了两张图片，则该图片将显示在左侧或顶部，具体取决于客户是使用台式设备还是移动设备。
编辑替代文本点击后可设置用于搜索引擎优化的图片替代文本，还可用于为使用屏幕阅读器的客户描述图片。
第二张图片横幅的辅助图片。如果向分区中添加了两张图片，则该图片将显示在右侧或底部，具体取决于客户是使用台式设备还是移动设备。
图片叠加不透明度向横幅图片添加叠加。可使用滑块设置叠加的不透明度。默认为 0%。
横幅高度

使用下拉菜单设置横幅图片的高度。

  • 适应第一张图片 - 将分区高度设置为第一张图片的高度。
  • 小 - 台式设备：420 px，移动设备：280 px
  • 中（默认） - 台式机：560 px，移动设备：340 px
  • 大 - 台式设备：720 px，移动设备：390 px
台式设备内容位置设置桌面图片横幅的位置。可在“顶部”、“中间”或“底部”以及“右”、“左”或“居中”之间选择。
在台式设备上显示容器对于使用台式电脑进行购物的客户，将横幅图片文本放置在横幅图片上方的文本框中。
台式设备内容对齐方式设置台式电脑上图片横幅文本的对齐方式。可在右对齐、左对齐或居中之间选择。
配色方案 可应用于此分区的一组颜色。详细了解配色方案。只有选择在台式设备上显示文本框选项时，所选配色方案才会显示。
动画

为图片选择动画：

  • 无（默认）
  • 环境移动 - 在容器内缓慢移动图片的位置。
  • 固定背景位置 - 当客户滚动页面时，前景元素（例如文本和按钮）将以相同的速度移动，而背景保持不变。
  • 滚动放大 - 当客户滚动页面时，前景元素（例如文本和按钮）将以相同的速度移动，而背景保持不变并且图片会放大。
移动设备内容对齐方式设置移动设备上的图片横幅文本的对齐方式。可在右对齐、左对齐或居中之间选择。
在移动设备上堆叠图片如果向分区中添加了两张图片，则图片将按列显示，而不是并排显示。
在移动设备上显示容器对于使用移动设备进行购物的客户，将横幅图片文本放置在横幅图片上方的文本框中。

标题块

图片横幅分区中标题块设置的概述。
设置描述
标题文本框标题的较大文本。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。

文本块

图片横幅分区中文本块设置的概述。
设置描述
描述显示段落样式文本。
文本样式更改图片横幅中的文本样式。可在“正文”、“副标题”和“大写”之间选择。

按钮块

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

带文本图片

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

分区设置

带文本图片设置的概述。
设置描述
图片点击选择图片以选择分区的图片。点击更改按钮以更改或移除图片。
编辑替代文本点击后可设置用于搜索引擎优化的图片替代文本，还可用于为使用屏幕阅读器的客户描述图片。
图片高度选择图片的高度：
  • 适应图片（默认）
  • 小
  • 中等
  • 大
台式设备图片宽度图片的宽度：
  • 小
  • 中（默认）
  • 大
台式设备图片放置选择首先显示图片还是文本。移动设备布局中默认为图片优先：
  • 图片优先（移动设备上的默认选项）
  • 第二张图片
台式设备内容位置 内容在容器中的垂直位置：
  • 顶部（默认）
  • 中间
  • 底部
台式设备内容对齐方式 文本在容器中的对齐方式：
  • 左（默认）
  • 居中
  • 右
内容布局允许图片和文本框相互重叠。如果选中无重叠，内容将调整为适应文本和图片。
  • 重叠
  • 无重叠（默认）
配色方案可应用于此分区的一组颜色。详细了解配色方案。
动画

为图片选择动画：

  • 无（默认）
  • 环境移动 - 在容器内缓慢移动图片的位置。
  • 滚动放大 - 当客户滚动页面时，前景元素（例如文本和按钮）将以相同的速度移动，而背景保持不变并且图片会放大。
移动设备布局选择移动设备上的内容对齐方式：
  • 左（默认）
  • 右
  • 居中
分区填充向带文本图片分区的顶部或底部添加间距。使用范围滑块在带文本图片分区上方或下方添加 0px 到 100px 之间的空间。

标题块

带文本图片分区中标题块设置的概述。
设置描述
标题分区的标题文本。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。

文本块

带文本图片分区中文本块设置的概述。
设置描述
内容在文本分区中显示段落样式文本。
文本样式内容文本的样式：
  • 正文（默认）
  • 副标题

按钮块

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

大标题块

带文本图片分区中大标题块设置的概述。
设置描述
文本向图片中添加标语或大标题。文本将显示在带文本图片分区的底部。
文本样式内容文本的样式：
  • 大写（默认）
  • 副标题
文本大小内容文本的大小：
  • 小
  • 中（默认）
  • 大

多列

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

分区设置

多列设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
图片宽度

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

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

该图片的图片比：

  • 适应图片（默认）- 使用图片的纵横比。这可以防止图片被裁剪。
  • 纵向 - 将图片裁剪为使用 2:3 比例。
  • 方形 - 将图片裁剪为使用 1:1 比例。
  • 圆形 - 将图片裁剪为以圆形显示
台式设备上的列数使用范围标尺选择要在台式电脑上显示的列数。最小值：1。最大值：6。
列对齐方式

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

  • 左对齐（默认） - 将图片和文本向左侧对齐。
  • 居中 - 将图片和文本居中对齐。
辅助背景选择无以隐藏辅助背景，或选择显示为列背景以更改列容器颜色。
按钮标签按钮上显示的文本。
按钮链接您要将按钮链接到的 URL。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
移动设备上的列数为移动设备设置特定的列布局。在 1 列和 2 列之间选择。
在移动设备上启用滑动功能将移动设备上的显示方式从列更改为行，使客户可以横向滑动以查看更多产品系列块。
分区填充将间距添加到多页面分区的顶部或底部。使用范围滑块在多页面分区上方或下方添加 0px 到 100px 之间的空间。

列块

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

多列分区中列块设置的概述。
设置描述
图片您要显示的图片。
标题列的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
描述列中的段落文本。
链接标签 [可选]添加到列块下方的链接的文本。如果未添加链接，请留空。
链接链接的 URL。没有链接则留空。

多行

您可以添加包含多行的分区，其中每行都包含图片、文本和可选按钮。选择与图片配对的文本，以将重点放在所选产品、产品系列或博客文章上。添加有关供货情况和样式的详细信息，甚至是提供评论。

您还可以通过动态源来显示元对象内容。若要显示元对象条目，您需要先构建元对象、创建条目并确保元对象具有店面访问权限，然后才能在多行分区中使用它们。

分区设置

多行设置的概述。
设置描述
图片高度选择图片的高度：
  • 适应图片
  • 小
  • 中（默认）
  • 大
台式设备图片宽度图片的宽度：
  • 小
  • 中（默认）
  • 大
标题大小更改标题文本的大小。在小、中、大之间选择。
文本样式更改文本的样式。在正文（默认）和副标题之间选择。
按钮样式在实心按钮和轮廓按钮之间选择。
台式设备内容位置 内容在容器中的垂直位置：
  • 顶部
  • 中间（默认）
  • 底部
台式设备内容对齐方式 文本在容器中的对齐方式：
  • 左（默认）
  • 居中
  • 右
台式设备图片放置选择图片的位置。位置会针对移动设备进行自动优化：
  • 从左侧交替（默认）
  • 从右侧交替
  • 左对齐
  • 右对齐
配色方案可应用于此分区的一组颜色。详细了解配色方案。
容器配色方案可应用于容器的一组颜色。详细了解配色方案。
移动设备布局选择移动设备上的内容对齐方式：
  • 左（默认）
  • 右
  • 居中
分区填充在多行分区的顶部或底部增加间距。使用范围滑块在带文本图片分区上方或下方添加 0px 到 100px 之间的间距。

行块

多行分区中行块设置的概述。
设置描述
图片点击选择图片以选择用于行的图片。点击更改按钮以更改或删除图片。点击源按钮以链接到动态源。
编辑替代文本点击后可设置用于搜索引擎优化的图片替代文本，还可用于为使用屏幕阅读器的客户描述图片。
大标题向图片添加标语或字幕。
标题行的标题文本。使用按钮将文本设置为粗体或斜体，或添加链接。
文本在行中显示段落样式文本。
按钮标签按钮上显示的文本。
按钮链接您要将按钮链接到的 URL。

第 页

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

分区设置

页面设置的概述。
设置描述
页面您要显示的在线商店页面。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
分区填充将间距添加到页面分区的顶部或底部。使用范围滑块在页面分区上方或下方添加 0px 到 100px 之间的空间。

富文本

您可以添加包含标题、大标题、文本和按钮的富文本分区，以将客户链接到新页面。

分区设置

富文本设置的概述。
设置描述
台式设备内容位置选择富文本容器的位置。使用下拉菜单选择左侧、居中（默认）或右侧。内容将针对移动设备进行自动优化。
内容对齐方式此设置会影响富文本分区中所有块的文本对齐方式。使用下拉菜单选择左侧、居中（默认）或右侧。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
使分区展示全宽分区默认为全宽。
分区填充将间距添加到富文本分区的顶部或底部。使用范围滑块在富文本分区上方或下方添加 0px 到 100px 之间的空间。
连接到动态源在富文本分区中使用动态源来引用元字段或元对象等信息。您甚至还可以使用列表引用来输出模板中的文本列表。例如，元字段列表（即使在引用的元字段上可用）可用于输出模板的富文本设置中的文本列表。

标题块

您最多可在富文本分区中包含 3 个标题块。

富文本分区中标题块设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。点击源按钮可链接到动态源。
标题大小更改标题文本的大小。在小号、中号、大号和超大号之间选择。

文本块

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

您最多可在富文本分区中包含 3 个文本块。

富文本分区中文本块设置的概述。
设置描述
描述分区主要内容的段落样式文本。点击源按钮可链接到动态源。

大标题块

您最多可在富文本分区中包含 3 个大标题块。

富文本分区中文本块设置的概述。
设置描述
文本向富文本分区添加简短标语。
文本样式使用下拉菜单选择文本样式 - 副标题（默认）和大写。
文本大小使用下拉菜单设置大标题文本大小。在小号、中号（默认）和大号之间选择。

按钮块

您最多可在富文本分区中包含 2 个按钮块。

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

幻灯片

您可以添加幻灯片分区，以在商店的页面中显示最多包含 5 张图片的轮播。

分区设置

幻灯片设置的概述。
设置描述
布局可在全宽（默认）或网格之间选择。全宽布局可按分区的完整宽度显示幻灯片，而网格布局可在一侧以填充方式显示幻灯片。
幻灯片高度

幻灯片的高度：

  • 适应第一张图片 - 所有图片的高度都将与轮播中第一张图片的高度相同。
  • 小
  • 中（默认）
  • 大
分页样式

图片下方显示的幻灯片导航的样式。

  • 点
  • 计数器（默认）
  • 数字
自动旋转幻灯片

选中此框可自动轮换幻灯片中的图片。如果未选中此框，则幻灯片会显示静态图片，直到客户手动推进幻灯片放映。

更改幻灯片计时器使用条形来设置幻灯片的自动旋转时间。最小值：3 秒，最大值：9 秒。
动画

为图片选择动画：

  • 无（默认）
  • 环境移动 - 在容器内缓慢移动图片的位置
移动设备布局选中此框可在移动设备上的图片下方显示内容。
辅助功能为视觉障碍客户添加幻灯片描述。

图片幻灯片设置

幻灯片分区中图片幻灯片设置的概述。
设置描述
图片为幻灯片选择静态或动态图片。点击选择图片可查看媒体文件库，点击源按钮可连接动态源。选择图片后，点击更改按钮可删除、更改或删除图片。
编辑替代文本

为使用屏幕阅读器的客户描述幻灯片图片和提供上下文。

标题

图片的可选标题文本。文本将被单独添加到每张图片上。使用按钮将文本设置为粗体或斜体，或添加链接。

标题大小

可在小标题、中标题（默认）或大标题之间选择。

副标题图片的可选副标题文本。文本将被单独添加到每张图片上。使用按钮将文本设置为粗体或斜体，或添加链接。
按钮标签输入按钮的文本，或留空以完全隐藏按钮。
按钮链接您希望按钮链接到的 URL。点击源按钮可将动态源添加为 URL。
使用轮廓按钮样式点击复选框可在实心或轮廓样式的按钮之间进行切换。
台式设备内容位置内容框在图片上的位置。可在“顶部”、“中间”或“底部”以及“左”、“居中”或“右”之间选择。“中间居中”是默认设置。
在台式设备上显示容器选中此框可显示内容框。
台式设备内容对齐方式对齐容器中的文本。在居左、居中（默认）或居右之间选择。
图片叠加不透明度使用滑块可调整图片叠加的不透明度。
配色方案可应用于此分区的一组颜色。详细了解配色方案。此设置要求显示容器，这样才能影响幻灯片图片。
移动设备布局选择内容在移动设备上的显示方式。可在“左”、“居中”（默认）或“右”之间选择。

视频

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

分区设置

视频设置的概述。
设置描述
标题分区的标题。使用按钮将文本设置为粗体或斜体，或添加链接。
标题大小更改标题文本的大小。在小号、中号和大号之间选择。
循环播放视频选中后，视频将在结束后重新开始播放。
视频向分区添加视频或选择您自己的视频。您可以编辑视频以使用自定义封面图片，还可以添加一些替代文本。如果添加了 Shopify 托管的视频，则它将用于以下设置中的 URL 视频。
URL指向视频的 YouTube 或 Vimeo 链接。视频必须公开发布，并且只有在上述设置中未添加 Shopify 托管的视频时，该视频才能显示。
封面图片客户播放视频之前显示的图片。
视频替代文本视频替代文本。为使用屏幕阅读器的客户介绍视频的背景和目的。
使分区展示全宽删除默认填充，并使分区按页面的全宽显示。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
分区填充将间距添加到视频的顶部或底部。使用范围滑块在视频分区上方或下方添加 0px 到 100px 之间的空间。
没有找到您需要的答案？我们将为您提供帮助。