> 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-cart-discount.md).

# 自定义购物车折扣

本指南将说明如何在 BOGOS 中自定义**购物车折扣小组件**和**祝贺消息**，帮助您告知客户当前可享受的折扣，并在客户解锁优惠时给予祝贺。

<figure><img src="/files/ofO7flqANf23wGQduDC3" alt=""><figcaption></figcaption></figure>

**使用 BOGOS 进行自定义共分 5 个步骤：**

{% stepper %}
{% step %}
在 BOGOS 后台中，打开自定义 > 折扣 > 购物车折扣。
{% endstep %}

{% step %}
[自定义商品页面小组件。](#customize-product-page-widget)
{% endstep %}

{% step %}
[自定义祝贺消息。](#customize-congrats-message)
{% endstep %}

{% step %}
点击“保存”。
{% endstep %}

{% step %}
[调整店铺中小组件的位置。](#adjust-widget-position-on-your-store)
{% endstep %}
{% endstepper %}

## 1. 自定义商品页面小组件

商品页面小组件会显示在您的店铺中，向客户展示当前可享受的折扣，并激励他们向购物车中添加更多商品。

<figure><img src="/files/ZeldfkfmA6yyoDqTyxir" alt=""><figcaption></figcaption></figure>

### a) 常规

1. **小组件样式**：从 3 种可用布局选项中选择。

<figure><img src="/files/KF7cXaEmkSpzAlzz1AZb" alt=""><figcaption></figcaption></figure>

2. **折扣阶梯样式**：选择阶梯的列出方式——清单式或项目符号式。

{% hint style="info" %}
若选择项目符号选项，您可以从可用图标中选择，或联系 BOGOS 支持团队协助上传您自己的图标。
{% endhint %}

3. **将阶梯划分为表格**：启用此选项可将阶梯以表格形式显示，布局更简洁、更易于浏览。
4. **小组件圆角**（适用于小组件样式 2 和 3）：拖动滑块调整小组件边角的圆滑程度。

### b) 颜色

BOGOS 允许您通过以下 4 种方式中的任意一种来自定义所有元素的颜色：

* 从下拉菜单中选择一套**现成的配色方案**。
* **手动调整**所有可用颜色字段。
* 使用 [AI 主题检测器](#ai-theme-detector)根据您店铺的品牌形象自动生成完整的小组件配色方案。
* **联系 BOGOS 支持团队**获取颜色自定义方面的帮助。

完成后点击**保存**。

#### AI 主题检测器

BOGOS AI 会扫描您的网店，检测品牌的主色、辅色和文本颜色，然后自动生成完整的小组件配色方案。

{% hint style="warning" %}
您的店铺**不得**设置密码保护，否则 AI 将无法访问和检测您的品牌颜色。
{% endhint %}

使用 BOGOS AI 编辑颜色：

1. 点击**笔形图标**。

![](/files/8HMgW0p6Hvadbsq4mpf0)

2. 点击**重新扫描**让 BOGOS AI 重新检测，或**手动调整**主色、辅色或文本字段。

![](/files/wr4WVSAsv8yHcB3JKixf)

3. 点击**应用于预览**，将颜色应用到小组件预览中。

## 2. 自定义祝贺消息

当客户解锁某个折扣阶梯时，会显示祝贺消息，通过确认客户已成功领取优惠来保持其参与热情。

<figure><img src="/files/aVGqczKkGPDcpeo8UBey" alt=""><figcaption></figcaption></figure>

### a) 常规

1. **消息出现时间（秒）**：设置客户满足条件后，消息出现前的延迟时间。
2. **消息位置**：从 6 种可用位置中选择消息在屏幕上出现的位置。
3. **圆角**：拖动滑块调整消息边角的圆滑程度。

### b) 内容

<figure><img src="/files/IPHIPHbZmeWnNFObjyLx" alt=""><figcaption></figcaption></figure>

1. **标题**：输入显示在祝贺消息上的标题。
2. **描述**：添加有关客户刚刚解锁的折扣的详情。

{% hint style="warning" %}
请在描述中保留 **{{discount\_amount}}**，以便根据您的设置动态显示折扣内容。如果不慎删除，请点击**添加变量**将其恢复。
{% endhint %}

### c) 颜色

BOGOS 允许您通过以下 4 种方式中的任意一种来自定义所有元素的颜色：

* 从下拉菜单中选择一套**现成的配色方案**。
* **手动调整**所有可用颜色字段。
* 使用 [AI 主题检测器](#ai-theme-detector)根据您店铺的品牌形象自动生成完整的小组件配色方案。
* **联系 BOGOS 支持团队**获取颜色自定义方面的帮助。

完成后点击**保存**。

#### AI 主题检测器

BOGOS AI 会扫描您的网店，检测品牌的主色、辅色和文本颜色，然后自动生成完整的小组件配色方案。

{% hint style="warning" %}
您的店铺**不得**设置密码保护，否则 AI 将无法访问和检测您的品牌颜色。
{% endhint %}

使用 BOGOS AI 编辑颜色：

1. 点击**笔形图标**。

![](/files/8HMgW0p6Hvadbsq4mpf0)

2. 点击**重新扫描**让 BOGOS AI 重新检测，或**手动调整**主色、辅色或文本字段。

![](/files/wr4WVSAsv8yHcB3JKixf)

3. 点击**应用于预览**，将颜色应用到小组件预览中。

## 3. 调整店铺中小组件的位置

默认情况下，购物车折扣小组件**会自动显示在所有相关商品页面上。**

**但是，如果您：**

* 在商品页面上看不到任何小组件
* 想要在商品页面上重新调整其位置
* 想要将其添加到其他店铺页面（例如首页、系列页面或购物车页面）

**请按照以下步骤操作：**

1. 前往 Shopify 后台 > 网店。
2. 打开主题编辑器。
3. 导航至您想要调整小组件的页面。
4. 将“BOGOS: Cart Discount”模块添加或拖动到您想要的位置。

<figure><img src="/files/j5kdGP4F4UzqdnEx6HTO" alt=""><figcaption></figcaption></figure>

*如需了解更多详情，请参阅我们的\[*[*调整 BOGOS 模块*](https://bogos-guideline.gitbook.io/user-guide/user-guide/customize/customize-bogos-blocks)*]指南。*

## 需要帮助？

如果您需要任何帮助，欢迎通过我们 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-cart-discount.md?ask=<question>&goal=<endgoal>
```

`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.
