页面类型

每个页面都有其自己的默认分区和设置。

产品页面

默认情况下，产品页面具有产品信息分区和产品推荐分区。

产品信息分区包含以下默认块：

• 文本（默认显示 vendor 属性）
• 标题
• 文本（默认显示 product subtitle 属性）
• 价格
• 多属性选择器
• 数量选择器
• Buy Button
• 描述
• 分享

您还可以添加以下块：

• 文本
• 自定义 liquid
• 产品评分
• 可折叠标签
• 弹出窗口
• 互补产品
• 库存
• SKU
• 带文本的图标

产品信息分区最多可以包含 16 个块。

产品信息分区设置

产品信息分区的设置

设置	描述
在台式设备上启用粘性内容	向下滚动页面时，在滚动浏览过所有图片之后，产品信息列才会开始滚动。
台式设备媒体文件宽度	在“小”、“中”或“大”媒体文件宽度中进行选择。此设置仅适用于在台式计算机上访问页面的用户，因为媒体文件会自动针对移动设备进行优化。
将媒体文件限制为屏幕高度	选择此选项后，系统将基于任何设备的浏览器窗口的高度来设置媒体文件最大高度。
媒体文件适应	选择原始可保留媒体文件的原始纵横比，选择填充可使媒体文件适应其显示位置。
台式设备上的布局	产品媒体文件在桌面上的显示方式。 缩略图轮播 - 如果产品具有多个媒体文件类型，则剩余的媒体文件将在主产品媒体文件下方的轮播中显示为缩略图。客户可以点击任何缩略图来加载它，或使用轮播导航箭头显示其他媒体文件。 缩略图 - 如果产品具有多个媒体文件类型，则剩余的媒体文件将在主产品媒体文件下方显示为缩略图。客户可以点击任何缩略图来加载它。 堆叠 - 以堆叠的方式显示所有产品媒体文件。点击堆叠的某个媒体文件类型将打开一个弹出窗口，该窗口具有所选媒体文件的较大视图。
台式设备上的媒体文件位置	选择在左侧还是右侧显示特色产品媒体文件。此设置仅适用于在台式计算机上访问页面的用户。
图片缩放	选择图片在台式设备上的缩放方式： 打开灯箱 - 打开大图。这是移动设备上的默认设置。 无缩放 - 对图片停用缩放。推荐用于低分辨率图片。 点击和悬停 - 点击可放大图片，然后悬停鼠标即可查看已放大的不同部分。当再次点击放大的图片或者鼠标离开图片的容器时，悬停缩放将被禁用。在启用此设置或用户使用移动设备时，图片将默认为在模态窗口（灯箱）中打开。
移动设备布局	选择在移动设备上隐藏或显示缩略图。
在某个多属性被选中时隐藏其他多属性的媒体文件	选择一种多属性后，系统会隐藏其他多属性的图片。取消选择该多属性后，其他图片将重新出现。
启用视频循环	将视频设定为循环播放，以便视频在播放完毕后自动重放。
分区填充	将间距添加到“产品信息”分区的顶部或底部。使用范围滑块在“产品信息”上方或下方添加 0px 到 100px 之间的空间。

产品信息块

可以将以下块添加到产品信息分区。

文本块

文本块可用于使用动态源显示静态文本或变量数据。例如，您可以添加相关文本来显示营销消息（如“满 100 美元免运费），使每件产品上都显示相同的文本内容。您还可以添加动态源，如产品的厂商字段，该字段将随查看的产品而变化。

产品信息分区中的文本块设置

设置	描述
文本	向产品页面添加信息。支持文本或动态源。
文本样式	更改文本的样式： 正文 - 将文本更改为段落样式的文本。 副标题 - 将文本更改为副标题文本，该文本略大于段落样式的文本。 大写 - 将文本更改为字体小于段落样式的文本，并将所有字符大写。

标题块

此块显示产品的标题。它不具有可调整的设置。

价格块

此块显示产品的定价信息，例如价格和原价。它不具有可调整的设置。

多属性选择器块

此块显示产品的所有多属性选项。多属性选择器仅显示具有多属性的产品。如果您删除此块，并且您拥有具有多属性选项的产品，则您的客户无法选择他们想要的多属性，并且无法购买产品。

产品信息分区中的多属性选择器块的设置

设置	描述
类型	更改向客户展示多属性的方式： 按钮 - 以可点击按钮的形式显示多属性。它们只能显示为样本或文本。 下拉菜单 - 在可展开的下拉菜单中显示多属性。它们只能显示为样本或文本。

Buy Button 块

此块会显示“添加到购物车”按钮和所有门店自提信息。此块还可以显示任何动态结账按钮。

产品信息分区中的 Buy Button 块的设置

设置	描述
显示动态结账按钮	显示您已在支付设置中启用的任何动态结账选项。
显示礼品卡产品的收件人信息表单	在礼品卡产品上显示可选复选框，使客户能够将礼品卡安排发送给收件人并附加私人消息。

描述块

此块显示产品的描述。它不具有可调整设置。

产品评分块

此块用星星图形显示平均产品评分，并在括号里注明评论次数，例如 ★★★★★ (8)。

显示产品评分需要产品评论应用以及元字段定义（用于 reviews.rating_count 和 reviews.rating）。

互补产品块

此块显示需要通过 Shopify Search & Discovery 应用设置的互补产品。

备注

互补产品需要 In stock 并设置为 Active，否则 Shopify Search & Discovery 应用会将它们排除。

产品信息分区中互补产品块的设置

设置	描述
标题	块的标题。
显示为可折叠行	选择后，内容会在行标签下折叠显示。当客户点击标题时，标签将展开以显示其他内容。
图标	在互补产品显示为可折叠行时，选择要与标题配对的图标。
要显示的最大产品数	选择要显示的最大互补产品数量。您可以选择 1-10 个。
每页产品数	要在每个滑块页面显示的互补产品数量。选择介于 1-4 的值。
分页样式	图片下方显示的滑块导航的样式。 点 计数器（默认） 数字
图片比	确定产品卡图片的纵横比。 纵向 正方形（默认）
显示快速添加按钮	快速添加按钮可供客户通过产品卡将商品添加到购物车。如果产品有多属性，则点击该按钮会在弹出窗口中显示选择选项和相关产品详细信息。客户可以选择要添加到购物车的多属性、使用立即购买选项立刻结账，或者点击查看商品的完整详细信息。需要独立于产品页面设置立即购买选项，这样该选项才能显示在快速添加选项中。如果未设置立即购买选项，则客户仍可将商品添加到购物车。

分享块

此块显示一个可点击的链接，客户可使用此链接在其社交媒体上分享产品。

产品信息分区中的分享块设置

设置	描述
文本	可点击文本，客户点击此文本即可将产品分享到其社交媒体。

SKU 块

此块在相关时显示与产品关联的货号 (SKU)。

产品信息分区中 SKU 块的设置

设置	描述
文本样式	更改文本的样式： 正文 - 将文本更改为段落样式的文本。 副标题 - 将文本更改为副标题文本，该文本略大于段落样式的文本。 大写 - 将文本更改为字体小于段落样式的文本，并将所有字符大写。

“带文本的图标”块

此块最多显示三个带文本的图标。您可以在标准 logo 之间选择，也可以选择您自己的 logo 图片。

产品信息分区中“带文本的图标”块的设置

设置	描述
布局	为此分区选择水平布局或垂直布局。
第一个图标	选择标准图标。
第一张图片	为第一个图标选择图片。选择图片将覆盖您在第一个图标设置中选择的任何图标。点击选择图片以选择图片，或者点击更改按钮来更改或移除图片。
编辑替代文本	添加简短的图片描述以改进 SEO，还可为使用屏幕阅读器的客户描述图片。
第一个标题	为第一个图标添加标题。
第二个图标	选择标准图标。
第二张图片	为第二个图标选择图片。选择图片将覆盖您在第二个图标设置中选择的任何图标。点击选择图片以选择图片，或者点击更改按钮来更改或移除图片。
编辑替代文本	添加简短的图片描述以改进 SEO，还可为使用屏幕阅读器的客户描述图片。
第二个标题	为第二个图标添加标题。
第三个图标	选择标准图标。
第三张图片	为第三个图标选择图片。选择图片将覆盖您在第三个图标设置中选择的任何图标。点击选择图片以选择图片，或者点击更改按钮来更改或移除图片。
编辑替代文本	添加简短的图片描述以改进 SEO，还可为使用屏幕阅读器的客户描述图片。
第三个标题	为第三个图标添加标题。

库存状态块

此块显示产品的库存状态。您可以在产品库存计数达到您设置的阈值后显示剩余库存或显示剩余库存。库存状态仅显示已激活库存跟踪的产品。

产品信息分区中库存状态块的设置

设置	描述
文本样式	选择文本的样式。在正文、副标题或大写之间选择。
低库存阈值	使用滑块设置产品显示库存不足时的阈值（0 到 100）。如果您将滑块设置为零，则在库存完全售罄前，库存将一直显示有货。
显示库存计数	如果您想显示产品的存货库存计数，请选择此选项。

数量选择器块

此块会显示数量选择器，让客户可更改要购买的产品件数。此块中没有可调整的设置。默认数量为 1。

自定义 Liquid 块

此块显示您可以添加到块中的自定义 Liquid 或 HTML 代码。

产品信息分区中的自定义 Liquid 块的设置

设置	描述
自定义 liquid	显示您可以输入为 Liquid 或 HTML 代码的内容。

可折叠标签块

此块会显示带标题的可折叠标签。当客户点击标题时，该标签将展开，以显示更多内容。

产品信息分区中的可折叠标签块的设置

设置	描述
标题	标签的标题。在折叠和展开标签时显示。
标签内容	标签的内容。仅在展开标签时显示。
页面中的标签内容	在标签中显示页面内容。仅显示页面编辑器中的页面内容，此块中不会显示页面模板中的 Liquid 样式。在标签内容中输入的任何内容都将显示在页面内容上方。

弹出窗口块

此块会显示可点击的文本，点击这些文本即可打开一个弹出窗口。该弹出窗口会显示您某一个页面所含的内容。

产品信息分区中的弹出窗口块的设置

设置	描述
链接标签	可点击文本，客户点击此文本即可显示弹出窗口。
页面	您要在弹出窗口中显示其内容的页面。仅显示页面编辑器中的页面内容。该弹出窗口不会显示页面模板中任何 Liquid 样式。

SKU 块

当多属性具有关联 SKU 时，此块将显示产品的 SKU（货号）。详细了解如何从后台为产品多属性添加 SKU 编号。

“带文本的图标”块

此块最多显示三个图标，您可从预安装图标列表或上传的图片中进行选择。如果您选择上传图片，则上传的图片会覆盖任何图标下拉菜单选项。

对于图标的布局，您可以选择垂直或水平。若要删除图标，请清除标题字段。若要显示超过三个图标，请添加另一个带文本的图标块。

库存状态块

此块将显示产品库存状态，例如有货、库存不足或缺货。默认情况下，低库存阈值设置为 10。您可以将低库存阈值更改为 0 到 100 的数值。如果选中显示库存计数复选框，则系统会向客户显示产品的确切库存数量。

当商品售罄后，则会显示缺货状态。但是，如果您选择缺货后继续销售，则当您的库存数量为零或者负数时，商品库存将继续显示为有货状态。

产品推荐分区设置

根据当前查看的产品，此分区会显示类似产品、具有相似描述的产品或经常与此产品一起购买的产品。

产品推荐分区的设置

设置	描述
标题	分区的标题。您可以对分区标题使用动态源。
标题大小	更改标题文本的大小。在小号、中号和大号之间选择。
要显示的最大产品数	使用范围滑块选择要显示的推荐产品最大数量。最小值：2，最大值：10。
台式设备上的列数	台式电脑上显示的列数。最小值：1。最大值：4。
配色方案	可应用于此分区的一组颜色。详细了解配色方案。
图片比	推荐产品的图片的图片比： 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。 纵向 - 将图片裁剪为使用 2:3 比例。 方形 - 将图片裁剪为使用 1:1 比例。
在悬停时显示第二张图片	在客户将光标悬停在图片上时，显示产品的第二张图片（如果有）。
显示厂商	显示每款产品的厂商。
显示产品评分	用星星图形显示平均产品评分，并在括号里注明评论次数，例如 ★★★★★ (8)。还需要产品评论应用以及元字段定义（用于 reviews.rating_count和 reviews.rating）。
移动设备上的列数	为移动设备设置特定的列布局。在 1 列和 2 列之间选择。
分区填充	在分区的顶部或底部增加间距。使用范围滑块在分区上方或下方添加 0px 到 100px 之间的间距。

若要详细了解产品推荐，请参阅了解产品推荐。

快速订单列表分区设置

您可以将快速订单列表分区添加到产品模板中，以便客户可以轻松创建包含多件产品的不同产品多属性的批量订单。

快速订单列表分区的设置

设置	描述
配色方案	可应用于此分区的一组颜色。详细了解配色方案。
分区填充	在分区的顶部或底部增加间距。使用范围滑块在分区上方或下方添加 0px 到 100px 之间的间距。
显示图片	显示多属性图片。
显示 SKU	显示多属性 SKU。

详细了解如何将快速订单列表分区添加到产品页面。

产品系列页面

默认情况下，产品系列页面具有产品系列横幅和产品网格分区。

产品系列横幅分区设置

产品系列横幅分区的设置

设置	描述
显示产品系列描述	显示产品系列的描述。
显示产品系列图片	显示产品系列图片。
配色方案	可应用于此分区的一组颜色。详细了解配色方案。

产品网格分区的设置

设置	描述
每页产品数	您要在每页上显示的产品数量。可以是 4 的任何倍数 - 从 8 到 24。默认为 16。
台式设备上的列数	使用范围标尺选择要在台式电脑上显示的列数。最小值：1，最大值：5。
图片比	产品图片的图片比： 适应图片（默认）- 使用图片的纵横比。这可以防止图片被裁剪。 纵向 - 将图片裁剪为使用 2:3 比例。 方形 - 将图片裁剪为使用 1:1 比例。
图片形状	为产品图片选择以下一种图片形状： 默认 - 将产品图片更改为矩形。 拱形 - 将产品图片顶部更改为曲线形。 Blob - 将产品图片更改为六种 blob 圆形中的随机一种圆形，并且在悬停时可显示独特的动画。 向左 V 形 - 将产品图片更改为向左 V 形，并在左侧有一个尖角。 向右 V 形 - 将产品图片更改为向右 V 形，并在右侧有一个尖角。 菱形 - 将产品图片更改为四边菱形。 平行四边形 - 将产品图片更改为有两组平行线的形状。 圆形 - 将产品图片更改为圆形或椭圆形，并且在悬停时可显示独特的动画。
在悬停时显示第二张图片	在客户将光标悬停在产品图片上时，显示第二张产品图像（如果产品有第二张图片）。
显示厂商	显示每款产品的厂商。
显示产品评分	用星星图形显示平均产品评分，并在括号里注明评论次数，例如 ★★★★★ (8)。还需要产品评论应用以及元字段定义（用于 reviews.rating_count 和 reviews.rating）。
启用快速添加按钮	快速添加按钮可供客户通过产品卡将商品添加到购物车。如果产品有多属性，点击该按钮将出现弹出窗口，其中显示选择选项和产品详细信息，客户可在此处选择所需的多属性、将商品添加到购物车、使用立即购买立刻结账或者点击查看商品的完整详细信息。请注意，此设置取决于您的产品页面上是否激活了立即购买按钮。如果产品模板中未激活立即购买按钮，客户可以选择将产品添加到购物车，但立即购买快速结账工作流将不会显示。页面的台式电脑上的媒体文件位置设置决定了媒体文件将在快速添加模态窗口中显示在哪一侧。
启用筛选	使客户可根据您的导航设置中的筛选条件来筛选产品系列中的产品。
台式设备筛选布局	在水平（默认）、垂直或抽屉式布局之间选择。
启用排序	允许客户对搜索结果进行排序。
移动设备上的列数	为移动设备设置特定的列布局。在 1 列和 2 列之间选择。
分区填充	在产品网格的顶部或底部增加间距。使用范围滑块在产品网格上方或下方添加 0px 到 100px 之间的间距。

产品系列列表页面

产品系列列表页面显示在线商店销售渠道中供应的所有产品系列。

产品系列列表页面的设置

设置	描述
标题	页面标题。
产品系列排序依据	确定产品系列的显示顺序： 字母顺序，A-Z - 按字母顺序显示产品系列。 字母顺序，Z-A - 按倒序字母顺序显示产品系列。 日期，新到早 - 基于在商店中创建每个产品系列的时间，按从最新到最早的顺序显示产品系列。 日期，早到新 - 基于在商店中创建每个产品系列的时间，按从最早到最新的顺序显示产品系列。 产品计数，高到低 - 基于产品系列中包含的产品数，按从最高数量到最低数量的顺序显示产品系列。 产品计数，低到高 - 基于产品系列中包含的产品数，按从最低数量到最高数量的顺序显示产品系列。
图片比	产品系列图片的图片比： 适应图片（默认）- 使用图片的纵横比。这可以防止图片被裁剪。 纵向 - 将图片裁剪为使用 2:3 比例。 方形 - 将图片裁剪为使用 1:1 比例。
台式设备上的列数	台式电脑上显示的列数。最小值：1。最大值：5。
移动设备上的列数	为移动设备设置特定的列布局。在 1 列和 2 列之间选择。

页面

您可以在 Shopify 后台中创建自定义页面，用于创建面向客户的内容，例如“关于我们”页面或有关产品的额外信息。这些页面在模板编辑器中没有额外的设置。

博客页面

博客页面是您在 Shopify 后台内创建的任何博客的主页。默认情况下，博客页面包含博客文章分区。

博客文章分区设置

博客文章分区在博客中显示最新的博客文章。每篇博客文章都显示任何博客图片、博客标题，以及博客文章的摘录或前几句话。对于较大的屏幕，您可以选择以网格或拼贴格式显示博客文章。

博客文章分区的设置

设置	描述
在大屏幕上的布局	以网格或拼贴显示博客文章。
显示配图	显示博客文章的配图。
配图高度	使用下拉菜单在默认 适应图片、小、中或大之间选择。
显示日期	显示每篇博客文章的发布日期。
显示作者	显示每篇博客文章的作者。

博客文章页面

博客文章页面显示博客文章的内容。默认情况下，博客文章页面包含博客文章分区。博客文章分区本身没有可自定义设置，但包含以下默认块：

• 配图
• 标题
• 分享
• 内容

配图块

博客文章页面上配图块的设置

设置	描述
配图高度	确定博客文章配图的高度： 适应图片（默认） - 保持图片的原始纵横比。 图片规格如下所示。在小、中、大配图之间选择。

配图尺寸

博客文章页面上配图块的尺寸

小卡	大卡
小配图高度 台式设备 - 177 px 平板电脑 - 143 px 移动设备 - N/A	大配图高度 Desktop - 275 px Tablet - 220 px 移动设备 - 110 px
中配图高度 Desktop - 307 px 平板电脑 - 219 px 移动设备 - N/A	中配图高度 台式设备 - 550 px Tablet - 440 px Mobile - 220 px
大配图高度 Desktop - 407 px Tablet - 275 px 移动设备 - N/A	大配图高度 Desktop - 825 px Tablet - 660 px Mobile - 330 px

标题块

博客文章页面上标题块的设置

设置	描述
显示日期	显示博客文章的发布日期。
显示作者	显示博客文章的作者。

分享块

此块显示一个可点击的链接，客户可使用此链接在其社交媒体上分享博客文章。

博客文章页面上分享块的设置

设置	描述
文本	可点击文本，客户点击此文本即可将博客文章分享到其社交媒体。

内容块

内容块显示博客文章的内容。它没有可自定义设置。

购物车页面

默认情况下，购物车页面包含商品和小计分区。

商品分区设置

商品分区显示客户添加到购物车的产品及数量。

购物车页面上商品分区的设置

设置	描述
显示厂商	显示购物车中每款产品的厂商。

小计分区设置

小计分区具有小计价格和结账按钮块。这两个块都没有可自定义设置。

购物车页面上小计分区的设置

设置	描述
启用购物车备注	显示购物车备注字段，客户可在其中输入其他信息。

密码页面

若您的在线商店激活了密码保护，当有客户尝试访问您的网站时，密码页面便会显示。此页面具有自己的标头和页脚，默认情况下包含电子邮件注册信息分区。

密码标头分区

密码页面上密码标头分区的设置

设置	描述
配色方案	可应用于此分区的一组颜色。详细了解配色方案。

电子邮件注册信息分区

此分区供客户订阅您的电子邮件营销，以便他们可以详细了解您的业务，例如何时开始营业。

密码页面上电子邮件注册信息分区的设置

设置	描述
配色方案	可应用于此分区的一组颜色。详细了解配色方案。
使分区展示全宽	将分区扩展为浏览器窗口的宽度。

标题块

密码页面上密码标头分区中标题块的设置

设置	描述
标题	分区的标题。

副标题块

密码页面上密码标头分区中标题块的设置

设置	描述
描述	分区的文本内容。

电子邮件表单块

此块显示客户可在其中输入其邮箱的电子邮件表单字段。此块没有可自定义设置。

密码页脚分区

密码页面上密码页脚分区的设置

设置	描述
配色方案	可应用于此分区的一组颜色。详细了解配色方案。

404 页面

当客户尝试访问不存在的网站链接（例如您已从商店中删除的产品的产品页面）时，系统会显示 404 页面。此页面没有可自定义设置。

搜索页面

搜索页面是供客户在您在线商店中搜索特定产品或页面的位置。该页面默认包含搜索结果分区。

搜索结果分区设置

搜索结果分区的设置

设置	描述
台式设备上的列数	台式电脑上显示的列数。最小值：1。最大值：5。
图片比	推荐产品的图片的图片比： 适应图片（默认）- 使用图片的纵横比。这可以防止图片被裁剪。 纵向 - 将图片裁剪为使用 2:3 比例。 方形 - 将图片裁剪为使用 1:1 比例。
图片形状	为产品图片选择以下一种图片形状： 默认 - 将产品图片更改为矩形。 拱形 - 将产品图片顶部更改为曲线形。 Blob - 将产品图片更改为六种 blob 圆形中的随机一种圆形，并且在悬停时可显示独特的动画。 向左 V 形 - 将产品图片更改为向左 V 形，并在左侧有一个尖角。 向右 V 形 - 将产品图片更改为向右 V 形，并在右侧有一个尖角。 菱形 - 将产品图片更改为四边菱形。 平行四边形 - 将产品图片更改为有两组平行线的形状。 圆形 - 将产品图片更改为圆形或椭圆形，并且在悬停时可显示独特的动画。
在悬停时显示第二张图片	在客户将光标悬停在产品图片上时，显示第二张产品图像（如果产品有第二张图片）。
显示厂商	显示每款产品的厂商。
显示产品评分	用星星图形显示平均产品评分，并在括号里注明评论次数，例如 ★★★★★ (8)。还需要产品评论应用以及元字段定义（用于 reviews.rating_count 和 reviews.rating）。
启用筛选	点击可激活对搜索结果进行筛选。
台式设备筛选布局	在水平（默认）、垂直或抽屉式布局之间选择。
启用排序	点击可激活对搜索结果进行排序。
显示日期	显示每篇博客文章的发布日期。
显示作者	显示每篇博客文章的作者。
移动设备上的列数	为移动设备设置特定的列布局。在 1 列和 2 列之间选择。
分区填充	在搜索结果的顶部或底部增加间距。使用范围滑块在搜索结果上方或下方添加 0px 到 100px 之间的间距。