# 产品页面

电商产品页面展示所有与相关产品关联的详细信息和媒体项目。可以自定义  
`图片和视频部分 <ecommerce/product_page/image-customization>`，选择`显示哪些产品信息 <ecommerce_design/product_page/customization>`，展示特定的`按钮 <ecommerce_design/product_page/buttons>`，自定义`属性详情部分 <ecommerce_design/product_page/attributes>`，启用`额外的组织功能 <ecommerce_design/product_page/page-features>`，以及使用`构建块 <ecommerce_design/product_page/building_blocks>`添加内容。

## 产品图片和视频 {#ecommerce/product_page/image-customization}

在  
`产品表单中添加媒体项目 <ecommerce/products/images>` 或在前端`创建产品 <ecommerce/products/create-products>` 后，可在前端产品页面上对其进行自定义。操作步骤：

1. 在在线商店中打开相应的产品页面，点击右上角的`编辑`，进入`样式`标签页。

::: tip
**提示**  
要从后端`产品表单 <ecommerce/products/product-form>`快速进入对应的产品页面，点击表单顶部的 `fa-globe` `前往网站` 智能按钮。
:::

2. 管理单个媒体项目：点击产品页面上的媒体项目，向下滚动至网站编辑器的`图片`区域。可`替换`或`移除`图片/视频，并`重新排序`项目。使用  
`fa-angle-double-left`（左双箭头）或`fa-angle-double-right`（右双箭头）将媒体移动到首位或尾位，使用  
`fa-angle-left`（左箭头）或`fa-angle-right`（右箭头）则以一步为单位移动。

3. 调整图片和视频区域的布局：进入`图片区域`，设定图片的`大小`和`位置`。随后在`图片`标签页中使用以下选项进行自定义：

- **主图**：点击`替换`更换主产品图片。  
  > **注意**：主媒体项目不能使用视频。

- **额外媒体**：`添加更多`图片或视频（可通过 URL），或`全部移除`媒体项目。

- **显示方式**：当使用多个媒体项目时，可选择以下布局：

  - **轮播**：访客可使用`fa-angle-left`（左箭头）或`fa-angle-right`（右箭头）切换图片。可在`fa-long-arrow-left`（左侧）或`fa-long-arrow-down`（底部）显示`缩略图`，并可调节图片的`圆角`。

  - **网格**：以方形网格方式展示媒体项目。可调节`列数`并设定网格中图片之间的`间距`。

- **自动裁剪**：选择尺寸对图片进行裁剪，以匹配页面布局，适用于`移动端布局 <website/visibility/mobile-and-computer>`的设计。

- **点击放大**：启用后，访客点击图片时会出现放大效果。

## 页面布局和产品信息显示 {#ecommerce_design/product_page/customization}

要自定义产品页面的布局，进入任意产品页面，点击右上角`编辑`，切换到`样式`标签页。然后在`页面宽度`设置中选择`常规`或`全宽`。

::: tip
**提示**  
可以为`商城页面 <ecommerce/catalog/customize-layout>`选择不同的宽度。
:::

在`产品详情`区域中选择在产品页面上显示哪些信息。可以配置`按钮 <ecommerce_design/product_page/buttons>`、定义`属性展示方式 <ecommerce_design/product_page/attributes>`、使用`页面组织功能 <ecommerce_design/product_page/page-features>`进行页面布局，或通过`构建块 <ecommerce_design/product_page/building_blocks>`添加内容。

### 按钮 {#ecommerce_design/product_page/buttons}

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

- **购买样式**：定义按钮的布局方式。  
- **购买选项**：（启用/禁用）`立即购买 <ecommerce/checkout/buy-now>`按钮和/或`数量`选择器。  
- **操作**：启用`愿望清单 <ecommerce/products/additional_features/wishlists>`和`产品对比 <ecommerce/products/additional_features/product-comparison>`功能。

### 属性 {#ecommerce_design/product_page/attributes}

选择在产品页面的`规格`部分展示属性的方式：

- **无**：不显示属性。  
- **页面底部**：在页面底部显示属性。  
- **手风琴**：在订单选项下方直接显示可折叠的属性表格。

> **注意**：仅当`产品变体 <ecommerce/categories_variants/product-variants>`启用且产品已定义至少一个属性时，规格部分才会显示。

::: tip
**提示**  

- 创建`属性类别 <ecommerce/categories_variants/attribute-categories>`以更好地组织此部分。  
- 使用`图片`属性显示类型 `<products/variants/attributes>` 在产品页面上展示变体图片。  
:::

### 页面组织选项和附加功能 {#ecommerce_design/product_page/page-features}

通过打开或关闭以下选项，可在所有产品页面上统一启用或禁用相应功能：

- **分隔符**：组织页面结构，提升视觉清晰度。  
- **税费指示**：标明价格是否`含税或不含税 <ecommerce/prices/taxes>`。  
- **标签**：在产品页面显示后端`标签 <ecommerce/catalog/filters>`，用户可据此过滤产品。  
- **条款与条件**：显示指向`条款与条件 </applications/finance/accounting/customer_invoices/terms_conditions>`的链接。  
- **评论**：允许`已登录的门户用户 </applications/general/users/user_portals>`提交产品评论。用户在页面底部的`客户评论`区域点击`fa-plus`（加号）图标后，可使用`fa-star-o`（空星）选择评分并留下评论。评分星标会直接显示在产品名称下方。  
- **搜索栏**：显示可单独控制显隐的搜索栏，独立于`商城页面 <ecommerce/catalog/toolbar>`。  
- **丝带/徽章**：使用`丝带 <ecommerce/products/additional_features/product-highlight>`突出显示特定产品。

> **提示**  
> 还可以在后端预先配置并在页面上启用以下附加功能：

- **点击取货**：在产品页面显示取货地点和配送可用性 `<ecommerce/shipping/instore-pickup>`。  
- **描述**：在产品名称下方显示专属的电商产品描述 `<ecommerce/products/description>`。  
- **包装**：提供多种包装类型 `<ecommerce/products/stock-management/packagings>`。  
- **文档**：添加用户手册等相关文档 `<ecommerce/products/digital-files>`。  
- **替代产品**：推荐相似商品并自定义展示区域 `<ecommerce/cross_upselling/alternative>`。  
- **可用库存**：当库存低于设定阈值时显示可用数量 `<ecommerce/products/stock-management/inventory>`。  
- **缺货提示**：为缺货商品显示自定义提示信息。  
- **到货通知**：用户可输入邮箱，当商品补货后收到通知。  
- **产品页面额外字段**：开启`开发者模式 </applications/general/developer_mode>`后，可在`网站 → 配置 → 网站`中为产品页面添加自定义字段（如条形码）。

### 构建块 {#ecommerce_design/product_page/building_blocks}

使用构建块可在所有产品页面或特定页面添加内容和设计元素。操作步骤：

1. 打开任意产品页面或目标产品页面，点击右上角`编辑`。  
2. 在`fa-plus`（加号）`块`标签页中选择构建块，拖拽至：

   - 页面顶部或底部的蓝色区域，使其在*所有*产品页面可用；或  
   - 产品标题下方或订单选项下方的蓝色构建块区域，仅在当前产品页面显示。

![在产品页面上拖拽构建块。](product_page/product-page-building-blocks.png)

> **注意**  
> 这些构建块不会出现在`商城页面 <ecommerce/catalog/customize-layout>`中。

::: seealso
`../../../websites/website/web_design`
:::

# 电商产品页面
## 图片和视频自定义
### 添加媒体
### 管理媒体项目
### 布局设置
- 主图
- 额外媒体
- 显示方式（轮播 / 网格）
- 自动裁剪
- 点击放大
## 页面布局与信息显示
### 页面宽度（常规 / 全宽）
### 按钮配置
- 购买样式
- 购买选项（立即购买、数量选择）
- 操作（愿望清单、产品对比）
### 属性展示
- 无
- 页面底部
- 手风琴
### 页面组织与附加功能
- 分隔符
- 税费指示
- 标签
- 条款与条件
- 评论
- 搜索栏
- 丝带/徽章
- 其他可选功能（点击取货、描述、包装、文档、替代产品、库存显示、缺货提示、到货通知、额外字段）
## 构建块使用
### 添加全局构建块
### 添加单页面构建块