> For the complete documentation index, see [llms.txt](https://docs.bogos.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bogos.io/cn/detailed-guide/customize/customize-bundle-product-page.md).
# 自定义捆绑包页面
本指南将说明如何在 BOGOS 应用中自定义捆绑包页面的外观和内容。
**共分 4 个步骤进行自定义：**
1. 设置[预览与布局选项](#preview-and-layout-options)。
2. 选择要自定义的内容：[按优惠活动自定义](#by-offer-customize)、[全局自定义](#global-customize)或[子商品页面上的小组件](#widget-on-child-product-page)。
3. 调整所选区域的全部可用设置。
4. 预览更改，然后点击“保存”。
## 预览与布局选项
在开始自定义之前，请先选择与您店铺设置最匹配的预览设置，这有助于更准确地调整显示效果。
* **预览选项**：在桌面端和移动端之间切换，查看页面在各设备上的显示效果。
* **布局**：选择要自定义的布局。
1. 商品图片显示在捆绑包内容旁边（默认布局）。
2. 捆绑包页面作为独立区块添加到您的主题中（详情请参阅 \[[调整 BOGOS 模块](/cn/quick-start-guide/adjust-bogos-blocks.md)]）。
* **列宽比例**：选择商品图片与捆绑包内容区域之间的宽度比例，以更好地适配您的店铺布局。
## 按优惠活动自定义
按优惠活动自定义仅可让您调整某一个特定捆绑包页面的设计。此处所做的任何更改**不会影响其他任何捆绑包页面**。
**访问此设置：**
1. 打开 BOGOS 应用 > 所有优惠活动 > 打开您想要的捆绑包页面的设置。
2. 点击任意**自定义**按钮 > 确保已选中**按优惠活动自定义**。
### a) 自定义包装组（包装组选择字段）
填写或调整以下内容：
* **包装组选择标签**：显示在包装组大小区域上方的文本，用于向客户说明更多详情。
* **标签样式**：选择要高亮显示包装组标签的哪个部分：
* **高亮数量**：加粗显示所需商品数量。
* **高亮折扣**：加粗显示折扣值。
* **文本对齐**：将包装组文本对齐方式设为左对齐、居中或右对齐。
* **图片方向**：选择包装组图片相对于文本是垂直还是水平排列。
* **每行包装组数量**：设置每行显示的包装组数量：
* **全宽**：适用于捆绑包页面作为独立模块/区块添加到您的主题中时（详情请参阅 \[调整 BOGOS 模块]）。
* **紧凑**：适用于捆绑包内容显示在商品图片旁边时（默认布局）。
* **移动端**：适用于移动端显示。
完成后点击**保存**。
### b) 自定义区块
该区块有两个自定义区域，分别控制不同的设置：1. 商品选择字段，或 2. 按步骤。
#### ***b.1. 商品选择字段***
在此处，客户可以自定义整体商品选择区域。
选择**商品选择字段**，然后填写或调整以下内容：
* **布局**：选择步骤的显示方式：
* **手风琴式**：以纵向可展开区块的形式显示步骤。客户可以同时展开多个步骤来查看和选择商品。
* **选项卡式**：以横向选项卡的形式显示步骤。客户可通过切换选项卡来查看和选择商品。
* **步骤数量指示器**：选择每个步骤标题上如何显示已选商品数量。
{% hint style="info" %}
在预览中添加商品以查看显示效果。
{% endhint %}
* **添加商品按钮**：自定义客户用于将商品添加到捆绑包中的按钮。
* **按钮样式**：从图标和文本、仅文本或仅图标中选择。
* **按钮标签**：输入显示在添加商品按钮上的文本。
* **选择图标**：选择要显示在按钮上的图标。
#### ***b.2. 按步骤***
在此处，客户可以分别自定义每个步骤的显示效果。
点击**某个步骤名称**（例如“选择您的鞋子”），然后填写或调整以下内容：
* **商品卡片布局**：选择每个商品卡片的显示方式：
* **横向**：最适合客户需要快速浏览选项的场景。
* **纵向**：最适合图片有助于客户做出选择的视觉类商品。
* **仅名称**：最适合商品图片不重要，或您希望呈现简洁、以文本为主的选择列表的场景。
* **商品卡片样式**：
* 简约卡片：以无背景形式显示商品。
* 带背景卡片：以带背景的卡片形式显示商品，视觉分隔效果更强。
* **每行商品数量**：设置每行显示的商品数量，适用于：
* **全宽**：适用于捆绑包页面作为独立模块/区块添加到您的主题中时（详情请参阅 \[调整 BOGOS 模块]）。
* **紧凑**：适用于捆绑包内容显示在商品图片旁边时（默认布局）。
* **移动端**：适用于移动端显示。
完成后点击**保存**。
## 全局自定义
全局自定义可让您调整店铺中**所有**捆绑包页面的整体显示效果。
### 访问此设置
您可以使用以下任一方式：
* 导航至**所有优惠活动** > 打开任意捆绑包页面的设置 > 前往右侧的展示捆绑包面板 > 打开自定义页面下拉菜单 > 点击全局自定义。
* 导航至**自定义** > 捆绑包 > 捆绑包页面 > 选择全局自定义选项卡。
### 内容
**总价文本**：输入显示在捆绑包页面总价行上的标签。
**添加捆绑包按钮**：
* 按钮标签：输入显示在加入购物车按钮上的文本。
* 在按钮上显示倒计时：启用后，会在客户添加商品时，在按钮上显示实时倒计时消息（例如：已添加 2 件，还差 1 件）
{% hint style="info" %}
使用 {{amount\_added}} 显示客户已添加的商品数量。
使用 {{amount\_left}} 显示解锁对应包装组折扣所需的剩余商品数量。
{% endhint %}
**商品快速查看弹窗**：当客户点击商品标题时，会打开一个显示商品详情的快速查看弹窗。
* 前往商品文本：输入引导客户前往完整商品页面的链接文本。
### 颜色
BOGOS 允许您通过以下 4 种方式中的任意一种来自定义所有元素的颜色：
* 从下拉菜单中选择一套**现成的配色方案**。
* **手动调整**所有可用颜色字段。
* 使用 [AI 主题检测器](#ai-theme-detector)根据您店铺的品牌形象自动生成完整的小组件配色方案。
* **联系 BOGOS 支持团队**获取颜色自定义方面的帮助。
完成后点击**保存**。
#### AI 主题检测器
BOGOS AI 会扫描您的网店，检测品牌的主色、辅色和文本颜色，然后自动生成完整的小组件配色方案。
{% hint style="warning" %}
您的店铺**不得**设置密码保护，否则 AI 将无法访问和检测您的品牌颜色。
{% endhint %}
使用 BOGOS AI 编辑颜色：
1. 点击**笔形图标**。
2. 点击**重新扫描**让 BOGOS AI 重新检测，或**手动调整**主色、辅色或文本字段。
3. 点击**应用于预览**，将颜色应用到小组件预览中。
## 子商品页面上的小组件
该小组件会显示在捆绑包中所含商品的商品页面上。它可以让客户知道该商品是捆绑优惠的一部分，并快速将客户重定向到捆绑包页面。
### 访问此设置
您可以使用以下任一方式：
* 导航至**所有优惠活动** > 打开任意捆绑包页面的设置 > 前往右侧的展示捆绑包面板 > 打开子商品页面上的小组件下拉菜单 > 启用在子商品页面上添加小组件 > 点击小组件自定义。
* 导航至**自定义** > 捆绑包 > 捆绑包页面 > 选择子商品页面上的小组件选项卡。
### 常规
* **小组件样式**：从 3 种可用布局选项中选择。
* **每行商品数**：设置桌面端和移动端每行显示的商品数量。
### 内容
* **显示折扣标签**：在小组件中展示所有包装组大小及对应折扣。
* **显示商品和变体名称**：显示捆绑包中所含商品的名称及所选变体名称。
* **标签**：设置显示在小组件上方的标题。使用 {{number}} 显示包含该商品的捆绑包页面数量。
* **重定向按钮标签**：设置引导客户前往捆绑包页面的链接文本。
### 颜色
BOGOS 允许您通过以下 4 种方式中的任意一种来自定义所有元素的颜色：
* 从下拉菜单中选择一套**现成的配色方案**。
* **手动调整**所有可用颜色字段。
* 使用 [AI 主题检测器](#ai-theme-detector-1)根据您店铺的品牌形象自动生成完整的小组件配色方案。
* **联系 BOGOS 支持团队**获取颜色自定义方面的帮助。
完成后点击**保存**。
#### AI 主题检测器
BOGOS AI 会扫描您的网店，检测品牌的主色、辅色和文本颜色，然后自动生成完整的小组件配色方案。
{% hint style="warning" %}
您的店铺**不得**设置密码保护，否则 AI 将无法访问和检测您的品牌颜色。
{% endhint %}
使用 BOGOS AI 编辑颜色：
1. 点击**笔形图标**。
2. 点击**重新扫描**让 BOGOS AI 重新检测，或**手动调整**主色、辅色或文本字段。
3. 点击**应用于预览**，将颜色应用到小组件预览中。
## 需要帮助？
如果您需要任何帮助，欢迎通过 BOGOS 应用内的实时聊天与我们的客户支持团队联系。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.bogos.io/cn/detailed-guide/customize/customize-bundle-product-page.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.