> For the complete documentation index, see [llms.txt](https://bogos-guideline.gitbook.io/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogos-guideline.gitbook.io/user-guide/detailed-guide/customize/customize-checkout-upsell.md).

# Customize Checkout Upsell

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

{% hint style="info" %}
Remember to add the "**BOGOS Checkout Upsell**" block in your theme editor so the upsell widget can appear at checkout. [Here’s how](https://bogos-guideline.gitbook.io/user-guide/user-guide/upsell/create-checkout-upsell#id-7.-enable-the-checkout-upsell-widget).
{% endhint %}

## 1. General

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

1. **Widget layouts:** There are 2 widget layouts to choose from for displaying upsell products:

* **Carousel**: Displays upsell products in a scrollable horizontal format.
* **Stack**: Displays upsell products in a vertical list.

2. **Images alignment:** Control how the product image is positioned inside the widget (top, center, bottom).
3. **Border radius:** Control how rounded the corners of your widget appear.
4. **Widget position:**

To reposition the widget on your checkout page, go to your theme editor and make edits the block "BOGOS Checkout Upsell".

*For more details, read our \[*[*Adjust BOGOS Block*](/user-guide/quick-start-guide/adjust-bogos-blocks.md)*].*

## 2. Widget info

* **Activate upsell message:** Turn this on to display a message at the top of your upsell widget.
* **Activate compare-at-price:** Turn this on to display the original price of the upsell product before the discount is applied.
* **Upsell message:** Customize the message displayed at the top of the upsell widget.
* **Button text:** Choose the text for the button that customers will click to add the upsell product to their checkout summary.

## 3. Color

The color options are kept simple to match Shopify's checkout style. You can customize these 3 colors:

* **Button Style:** The button to add the upsell product to the checkout summary.
* **Background Color:** The background color of the upsell widget.
* **Price Color:** The discounted price that the customer will pay.

If you select "**Accent Color**" for the price, BOGOS will sync the price color with the accent color set in your checkout theme.&#x20;

To change it, click at the blue sentence “**Setting your store accent color here**” to be redirected to your theme editor and then adjust the accent color you want.

{% hint style="warning" %}
Changing the accent color will also update other elements that use it at your checkout.
{% 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://bogos-guideline.gitbook.io/user-guide/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.