登录
开始免费试用

产品页面

产品页面是显示有关商店所销售产品的信息，也是客户可以购买产品的地方。

在模板编辑器中，产品页面默认具有产品信息分区和相关产品分区。

本页相关主题

产品信息分区

产品信息分区显示产品的详细信息，例如标题、描述、价格和图片。

产品信息分区设置

产品信息分区设置
设置描述
在台式设备上启用粘性内容向下滚动页面时，在滚动浏览过所有图片之后，产品信息列才会开始滚动。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
台式设备媒体文件宽度为台式电脑设置产品页面上的产品媒体文件的宽度。在小、中或大之间选择。
将媒体文件限制为屏幕高度选择此选项后，系统将基于任何设备的浏览器窗口的高度来设置媒体文件最大高度。
媒体文件适应选择原始可保留媒体文件的原始纵横比，选择填充可使媒体文件适应其显示位置。
台式设备上的布局 设置产品媒体文件在台式电脑上的布局。从以下选项中进行选择：
  • 堆叠 - 以堆叠的方式在页面上垂直显示产品媒体文件。点击堆叠的某个媒体文件类型将打开一个弹出窗口，其中显示所选媒体文件的较大视图。
  • 2 列 - 以堆叠的方式显示产品媒体文件，但显示为两列。
  • 缩略图 - 如果产品具有多个图片或其他媒体文件类型，则剩余的媒体文件将在主产品媒体文件下方显示为缩略图。客户可以点击任何缩略图，将缩略图显示为主要产品媒体文件。
  • 缩略图轮播 - 如果产品具有多个图片或其他媒体文件类型，则剩余的媒体文件将在主产品媒体文件下方的轮播中显示为缩略图。客户可以点击任何缩略图，将缩略图显示为主要产品媒体文件，或使用轮播导航箭头显示其他媒体文件。
台式设备上的媒体文件位置选择在台式电脑上的页面左侧还是右侧显示产品媒体文件。
图片缩放选择图片在台式设备上的缩放方式：
  • 打开灯箱 - 客户可以点击显示更大的图片版本。这是移动设备上显示的产品媒体文件的默认功能。
  • 点击和悬停 - 客户可点击放大图片，然后悬停光标查看已放大的不同部分。当再次点击放大的图片或者光标离开图片的容器时，悬停缩放将被停用。在激活此设置并且用户使用移动设备时，当点击图片时，图片将默认为在模态窗口（灯箱）中打开。
  • 无缩放 - 此选项会停用图片缩放。适用于分辨率不高、放大时显示效果不好的图片。
移动设备布局设置产品媒体文件在移动设备上的布局。从以下选项中进行选择：
  • 2 列 - 并排显示两个产品媒体文件，具有滚动和查看其他产品媒体文件的轮播功能。
  • 显示缩略图 - 显示单个主要产品媒体文件，下方滚动缩略图轮播。
  • 隐藏缩略图 - 显示单个主要产品媒体文件，下方滚动轮播，但不显示缩略图。
在选择多属性后隐藏其他多属性的媒体文件选择一种多属性后，系统会隐藏其他多属性的图片。取消选择该多属性后，其他图片将重新出现。
启用视频循环对于产品媒体文件中的任何视频，此设置会循环播放视频，使视频在播放完成后自动重放。
顶部填充设置分区顶部的间距。
底部填充设置分区底部的间距。

除了产品信息分区设置外，您还可以查看和自定义产品徽章的一些模板设置，还可以添加特定于分区的自定义 CSS。

产品信息块

您可以将以下块与产品信息分区一起使用：

文本块

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

产品信息分区中的文本块设置
设置描述
文本向产品页面添加额外信息的文本字段。
文本样式 更改文本的样式。从以下选项中进行选择：
  • 正文 - 将文本更改为段落样式的文本。
  • 副标题 - 将文本更改为副标题文本，该文本略大于段落样式的文本。
  • 大写 - 将文本更改为小于段落样式的文本，并将所有文本改为大写。

标题块

标题块显示正在查看的产品的标题。此块没有可自定义设置。

价格块

价格块显示正在查看的产品的定价信息，例如价格和原价。此块没有可自定义设置。

多属性选择器块

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

产品信息分区中的多属性选择器块设置
设置描述
风格 选择向客户显示产品多属性的方式。从以下选项中进行选择：
  • 下拉菜单 - 在下拉菜单中显示多属性选项。它们只能显示为样本或文本。
  • 椭圆形框 - 将多属性选项显示为可以选择的按钮。它们只能显示为样本或文本。
样本 选择向客户显示颜色样本的方式。从以下选项中进行选择：
  • 圆圈 - 将颜色样本显示为可以选择的圆圈。
  • 正方形 - 将颜色样本显示为可以选择的正方形。
  • 无 - 不显示任何颜色样本。

数量选择器块

数量选择器块显示可点击和可编辑的数量字段，客户可以使用该字段更改他们要购买的产品数量。此块没有可自定义设置。

Buy Button 块

Buy Button 块会显示添加到购物车按钮和任何门店自提信息。它还可以显示您商店中拥有的任何动态结账按钮。

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

描述块

描述块显示正在查看的产品的描述。此块没有可自定义设置。

分享块

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

产品信息分区中的分享块设置
设置描述
文本客户点击此文本可将产品分享到其社交媒体。

SKU 块

SKU 块在相关时显示与产品或多属性关联的货号 (SKU)。详细了解如何为产品多属性添加 SKU 编号。

产品信息分区中的 SKU 块设置
设置描述
文本样式 更改文本的样式。从以下选项中进行选择：
  • 正文 - 将文本更改为段落样式的文本。
  • 副标题 - 将文本更改为副标题文本，该文本略大于段落样式的文本。
  • 大写 - 将文本更改为小于段落样式的文本，并将所有文本改为大写。

库存状态块

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

产品信息分区中的库存状态块设置
设置描述
文本样式 更改文本的样式。从以下选项中进行选择：
  • 正文 - 将文本更改为段落样式的文本。
  • 副标题 - 将文本更改为副标题文本，该文本略大于段落样式的文本。
  • 大写 - 将文本更改为小于段落样式的文本，并将所有文本改为大写。
低库存阈值使用范围滑块设置产品显示低库存消息时的阈值。选择 0 到 100 之间的数字。如果您将滑块设置为 0，则在产品完全售罄前，系统会一直显示有货。
显示库存计数如果您想显示产品的库存计数，请选择此选项。

自定义 Liquid 块

自定义 Liquid 块显示您添加到该块的自定义 Liquid 或 HTML 代码。

产品信息分区中的自定义 Liquid 块设置
设置描述
Liquid 代码显示您输入的 Liquid 或 HTML 代码呈现的内容。

可折叠行块

可折叠行块显示具有标题的可扩展和可折叠行。当客户点击图标、标题或向下箭头时，行会展开显示其他内容。

产品信息分区中的可折叠行块设置
设置描述
标题行的标题，在折叠和展开行时显示。
图标选择要与可折叠行一起显示的图标，或选择无仅显示行的标题。
行内容使用富文本编辑器输入行的内容。内容仅在展开行时显示。
页面中的行内容将页面中的内容添加到行中。这仅显示您在 Shopify 后台的在线商店 > 页面部分中添加到页面的内容。它不显示您在模板编辑器中的模板页面中添加的任何内容。在行内容字段中输入的任何内容都显示在您添加的页面内容上方。

弹出窗口块

弹出窗口块显示可点击的文本，点击它会打开一个弹出窗口。

产品信息分区中的弹出窗口块设置
设置描述
链接标签可点击文本，客户点击此文本即可显示弹出窗口。
页面在弹出窗口中选择要显示内容的页面。这仅显示您在 Shopify 后台的在线商店 > 页面部分中添加到页面的内容。它不显示您在模板编辑器中的模板页面中添加的任何内容。

产品评分块

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

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

此块没有可自定义设置。

互补产品块

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

产品信息分区中的互补产品块设置
设置描述
标题 块的标题。
显示为可折叠行 选择后，内容会在行内折叠显示。当客户点击标题时，行将展开显示其他内容。
图标 在互补产品在可折叠行内显示时，选择要与标题配对的图标。
要显示的最大产品数 选择要显示的最大互补产品数量。选择 1 到 10 之间的数字。
每页产品数 选择要在每个滑块页面显示的互补产品数量。选择 1 到 4 之间的数字。
分页样式 设置产品下方显示的滑块导航的样式。在点、计数器或数字之间选择。
图片比 设置产品卡图片的纵横比。在纵向或正方形之间选择。
启用快速添加按钮 如果您激活快速添加按钮，则您的客户可以使用以下选项之一，从产品卡将商品添加到购物车：
  • 添加到购物车 - 适用于单一属性产品。当客户点击此按钮时，产品会自动添加到他们的购物车。
  • 选择选项 - 适用于有多属性的产品。当客户点击此按钮时，系统将显示一个弹出对话框，供客户选择多属性，然后继续购买。

“带文本的图标”块

带文本的图标块最多显示 3 个附带文本的图标。从预安装图标列表中选择，或使用上传的图片。

产品信息分区中的“带文本的图标”块设置
设置描述
布局在块的水平或垂直布局之间选择。
第一个图标选择要在块中显示的图标，或选择无仅显示标题。
第一张图片选择要使用的图片，而不是图标。
第一个标题为第一个图标或图片添加标题。
第二个图标选择要在块中显示的图标，或选择无仅显示标题。
第二张图片选择要使用的图片，而不是图标。
第二个标题为第二个图标或图片添加标题。
第三个图标选择要在块中显示的图标，或选择无仅显示标题。
第三张图片选择要使用的图片，而不是图标。
第三个标题为第三个图标或图片添加标题。

相关产品分区

根据正在查看的产品，相关产品分区会显示类似产品、具有相似描述的产品或经常与正在查看的产品一起购买的产品。您可以使用 Shopify Search & Discovery 应用，手动将您自己的产品添加到相关产品分区。

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

相关产品分区设置

相关产品分区设置
设置描述
标题分区的标题。
标题大小标题文本的大小。在小号、中号、大号、超大号或特特大号之间选择。
要显示的最大产品数设置要显示的最大相关产品数量。选择 2 到 10 之间的数字。
台式设备上的列数设置产品在台式电脑上显示的列数。选择 1 到 6 之间的数字。
配色方案可应用于此分区的一组颜色。详细了解配色方案。
图片比设置显示的相关产品的配图的图片比。从以下选项中进行选择：
  • 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。
  • 纵向 - 将图片裁剪为使用 2:3 比例。
  • 方形 - 将图片裁剪为使用 1:1 比例。
图片形状为相关产品图片选择以下一种图片形状：
  • 默认 - 将产品图片更改为矩形。
  • 拱形 - 将产品图片顶部更改为曲线形。
  • Blob - 将产品图片更改为六种 blob 圆形中的随机一种圆形，并且在悬停时可显示独特的动画。
  • 向左 V 形 - 将产品图片更改为向左 V 形，并在左侧有一个尖角。
  • 向右 V 形 - 将产品图片更改为向右 V 形，并在右侧有一个尖角。
  • 菱形 - 将产品图片更改为四边菱形。
  • 平行四边形 - 将产品图片更改为有两组平行线的形状。
  • 圆形 - 将产品图片更改为圆形或椭圆形，并且在悬停时可显示独特的动画。
在悬停时显示第二张图片当客户在台式电脑上将光标悬停在产品图片上时，此选项显示第二张产品图像（如果产品有第二张图片）。
显示厂商显示每款产品的厂商。
显示产品评分用星星图形显示平均产品评分，并在括号里注明评论数，例如：★★★★★ (8)。还需要产品评论应用以及元字段定义（用于 reviews.rating_count 和 reviews.rating）。
移动设备上的列数设置产品在移动设备上显示的列数。选择 1 列或 2 列。
顶部填充设置分区顶部的间距。
底部填充设置分区底部的间距。
没有找到您需要的答案？我们将为您提供帮助。