产品页面

电子商务产品页面会展示与相关产品有关的所有产品详细信息和媒体项目。您可以自定义 图像和视频部分、选择 要显示的产品信息、显示特定的 按钮、自定义 属性详细信息部分、启用 附加组织功能,以及使用 构建块 添加内容。

产品图片和视频

在 向产品表单添加媒体项 或 在前端创建产品 后,可在前端产品页面上对其进行自定义。为此,请导航至在线商店中的相关产品页面,点击右上角的 编辑,然后导航至 样式 选项卡。

小技巧

要从后端的 产品表单 访问相关产品页面,请点击表单顶部的 前往网站 智能按钮。

要管理单个媒体项,请在产品页面上点击该项目,然后向下滚动到网站编辑器的 图片 部分。随后,您可以 替换 或 移除 图片或视频,并 重新排序 这些项目。使用 (左双箭头) 或 (右双箭头) 将媒体移至第一位或最后一位,使用 (左箭头) 或 (右箭头) 将其移动一个位置。

要调整图片和视频部分的布局,请转到 图片区域,定义图片的大小和 位置。然后,导航至 图片 部分,并使用以下选项自定义此部分:

  • 主图:点击 替换 以更改产品主图。

    注解

    无法将视频用作主媒体项。

  • 额外媒体:添加更多 图片或视频(包括通过 URL),或 全部移除 媒体项。

  • 显示:当您使用多个媒体项时,可在以下布局中进行选择:

    • 轮播:此选项允许访客使用 (左箭头) 或 (右箭头) 从一张图片导航到下一张。在 (左侧) 显示 缩略图,或在 (底部) 显示,并调整图片角落的 圆角。

    • 网格:此布局以方形布局显示媒体项。如有必要,可调整 列数,并定义网格中图片之间的 间距。

  • 自动裁剪:选择尺寸以裁剪图片,使其与页面布局相匹配。在设计 移动端 布局 时,此功能非常有用。

  • 点击缩放:启用后,访客点击图片即可放大图片。

页面布局和产品信息显示

要自定义产品页面的布局,请访问任意产品页面,点击右上角的 编辑,然后导航至 样式 选项卡。接着,转到 页面宽度 设置,并选择 常规 或 全宽 选项。

小技巧

您可以为 商店页面 选择不同的宽度。

通过 产品详情 部分中提供的选项,选择在产品页面上显示哪些产品信息。您可以配置 按钮,定义 属性的显示方式,使用 页面自定义功能 组织页面,并使用 构建块 添加内容。

按钮

使用以下选项自定义产品页面上显示的按钮:

  • 购买样式:定义按钮的布局。

  • 购买选项:启用/停用 立即购买 按钮和/或 数量 选择器。

  • 操作:启用 心愿单 和 产品比较 功能。

属性

选择产品 属性 在产品页面的 规格 部分中的显示方式:

  • 无:不显示详情。

  • 页面底部:在页面底部显示详情。

  • 手风琴式:在订购选项正下方显示一个可折叠的表格。

注解

仅当启用 产品变体 且已为产品定义至少一个属性时,才会显示规格部分。

小技巧

页面组织选项和附加功能

开启/关闭以下选项,以在所有产品页面上启用或禁用相应功能:

  • 分隔线:组织页面并提高视觉清晰度。

  • 税费提示:指明价格是 含增值税还是不含增值税。

  • 标签:在产品页面上显示在 后端 中创建的标签,并让客户能够按这些标签筛选产品。

  • 条款和条件:显示指向您的 条款和条件 的链接。

  • 评价:允许 已登录的门户用户 提交产品评价。要添加评价,用户必须导航至页面底部的 客户评价 部分,并点击 (加号) 图标。然后,他们可以使用 (星形) 图标选择评分并留下评论。 (星形) 评分会直接显示在产品名称下方。

  • 搜索栏:显示一个可独立于 商店页面 显示或隐藏的搜索栏。

  • 徽带 (或徽章):突出显示特定产品。

小技巧

您可以启用附加功能并显示先前在后端配置的信息:

  • 线上下单 & 线下取货:在产品页面上显示订单取货地点和送货可用性,并允许客户选择所需的取货点。

  • 描述:在产品名称正下方显示电子商务专用的产品描述。

  • 包装:提供不同类型的包装。

  • 文档:添加相关文档,例如用户手册或其他支持材料。

  • 替代产品:推荐类似产品并自定义该部分。

  • 显示可用数量:当数量低于指定阈值时,显示产品的可用数量。

  • 缺货消息:为缺货产品显示自定义消息。

  • 补货时获取通知:客户可以输入电子邮件地址,以便在商品补货时收到通知。

  • 产品页面额外字段:要为产品页面启用特定的额外字段,请启用 开发者模式。然后,转到 网站 ‣ 配置 ‣ 网站,选择相关网站,导航至 产品页面额外字段 选项卡,在 字段 下方点击 添加一行,按需添加任意数量的额外字段,例如产品的条形码编号。

模板设计

使用构建块为所有产品页面或特定产品页面添加内容和设计元素。为此,请导航至任意或相关产品页面,点击右上角的 编辑。然后,在 (加号) 区块 选项卡中,选择一个构建块,并将其拖放到:

  • 拖放到产品页面顶部或底部的蓝色区域,使其在 所有 产品页面上可用,或

  • 拖放到产品标题下方或订购选项下方的蓝色构建块区域,使其仅对当前产品显示。

在产品页面上拖放构建块。

注解

这些构建块不会显示在 商店页面 上。

更多内容

可视化网页设计