> 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-checkout-upsell.md).

# 自定义结账页追加销售

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

{% hint style="info" %}
请记得在主题编辑器中添加“**BOGOS Checkout Upsell**”模块，以便追加销售小组件能够显示在结账页上。[操作方法请点击此处](https://bogos-guideline.gitbook.io/user-guide/user-guide/upsell/create-checkout-upsell#id-7.-enable-the-checkout-upsell-widget)。
{% endhint %}

## 1. 常规

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

1. **小组件布局：** 可选择 2 种小组件布局来显示追加销售商品：

* **轮播式**：以可横向滚动的形式显示追加销售商品。
* **堆叠式**：以纵向列表形式显示追加销售商品。

2. **图片对齐方式：** 控制商品图片在小组件内的位置（顶部、居中、底部）。
3. **圆角：** 控制小组件边角的圆滑程度。
4. **小组件位置：**

要在结账页上重新调整小组件位置，请前往主题编辑器并编辑“BOGOS Checkout Upsell”模块。

*如需了解更多详情，请阅读我们的\[*[*调整 BOGOS 模块*](/cn/quick-start-guide/adjust-bogos-blocks.md)*]。*

## 2. 小组件信息

* **激活追加销售消息：** 开启此选项可在追加销售小组件顶部显示一条消息。
* **激活原价对比：** 开启此选项可在应用折扣前显示追加销售商品的原价。
* **追加销售消息：** 自定义显示在追加销售小组件顶部的消息。
* **按钮文本：** 选择客户点击以将追加销售商品添加到结账摘要中所用按钮的文本。

## 3. 颜色

颜色选项保持简洁，以匹配 Shopify 的结账页样式。您可以自定义以下 3 种颜色：

* **按钮样式：** 用于将追加销售商品添加到结账摘要中的按钮。
* **背景颜色：** 追加销售小组件的背景颜色。
* **价格颜色：** 客户需要支付的折扣后价格。

如果您为价格选择“**强调色**”，BOGOS 会将价格颜色与您结账主题中设置的强调色同步。

要更改此设置，请点击蓝色文字“**在此处设置您的店铺强调色**”，即可跳转到主题编辑器，然后调整您想要的强调色。

{% hint style="warning" %}
更改强调色也会同时更新结账页上其他使用该颜色的元素。
{% endhint %}


---

# 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-checkout-upsell.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.