> For the complete documentation index, see [llms.txt](https://docs.limio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.limio.com/developers/limio-sdk/basket/cross-sell-and-upsell-functionality.md).

# Cross-Sell and Upsell

OrderItems can include `upsell` and `crossSell` arrays containing related offers that can be displayed to customers during checkout.

#### Understanding Upsells vs Cross-Sells

* **Upsells (`upsell`)**: Higher-tier versions of the current offer (e.g., upgrading from Basic to Premium)
* **Cross-Sells (`crossSell`)**: Complementary products that enhance the primary purchase (e.g., adding antivirus software when buying a VPN)

#### Cascade Removal for Cross-Sells

Cross-sell items can be configured with `cross_sell_cascade_removal__limio: true` in the offer attributes. When enabled, removing the parent offer will automatically remove all associated cross-sell items.

**Example:**

```tsx
import React from "react"
import { useBasket } from "@limio/sdk"

const BasketWithCrossSells = () => {
  const { orderItems, removeFromBasket } = useBasket()

  return (
    <div>
      {orderItems.map(item => (
        <div key={item.id}>
          <h3>{item.offer.name}</h3>

          {/* Display upsell opportunities */}
          {item.upsell && item.upsell.length > 0 && (
            <div className="upsell-section">
              <h4>Upgrade Options:</h4>
              {item.upsell.map(upsellOffer => (
                <div key={upsellOffer.path}>
                  <span>{upsellOffer.data.attributes.display_name__limio}</span>
                  {/* Add functionality to swap to upsell */}
                </div>
              ))}
            </div>
          )}

          {/* Display cross-sell opportunities */}
          {item.crossSell && item.crossSell.length > 0 && (
            <div className="crosssell-section">
              <h4>You Might Also Like:</h4>
              {item.crossSell.map(crossSellOffer => (
                <div key={crossSellOffer.path}>
                  <span>{crossSellOffer.data.attributes.display_name__limio}</span>
                  {/* Add functionality to add cross-sell to basket */}
                </div>
              ))}
            </div>
          )}

          <button onClick={() => removeFromBasket(item)}>
            Remove
            {item.crossSell?.some(cs =>
              cs.data.attributes.cross_sell_cascade_removal__limio
            ) && " (will also remove linked items)"}
          </button>
        </div>
      ))}
    </div>
  )
}
```

#### Implementation Example: Complete Upsell/Cross-Sell Flow

```tsx
import React, { useState } from "react"
import { useBasket } from "@limio/sdk"

const CheckoutWithRecommendations = () => {
  const { orderItems, addToBasket, swapOffer, removeFromBasket } = useBasket()
  const [expandedItem, setExpandedItem] = useState(null)

  const handleUpsell = async (itemId, upsellOffer) => {
    await swapOffer(itemId, upsellOffer)
  }

  const handleCrossSell = async (crossSellOffer) => {
    await addToBasket(crossSellOffer, { quantity: 1 })
  }

  return (
    <div className="checkout-cart">
      <h2>Your Cart</h2>

      {orderItems.map(item => (
        <div key={item.id} className="cart-item">
          <div className="item-header">
            <h3>{item.offer.name}</h3>
            <span className="price">
              {item.price.currency} {item.price.amount}
            </span>
          </div>

          {/* Show upsell options */}
          {item.upsell?.length > 0 && (
            <div className="upsell-banner">
              <h4>🚀 Upgrade Available!</h4>
              {item.upsell.map(upsell => (
                <div key={upsell.path} className="upsell-option">
                  <span>{upsell.data.attributes.display_name__limio}</span>
                  <button onClick={() => handleUpsell(item.id, upsell)}>
                    Upgrade Now
                  </button>
                </div>
              ))}
            </div>
          )}

          {/* Show cross-sell options */}
          {item.crossSell?.length > 0 && (
            <div className="crosssell-section">
              <button
                onClick={() => setExpandedItem(
                  expandedItem === item.id ? null : item.id
                )}
              >
                {expandedItem === item.id ? "Hide" : "Show"} Related Products
              </button>

              {expandedItem === item.id && (
                <div className="crosssell-grid">
                  {item.crossSell.map(crossSell => (
                    <div key={crossSell.path} className="crosssell-card">
                      <h5>
                        {crossSell.data.attributes.display_name__limio}
                      </h5>
                      <button onClick={() => handleCrossSell(crossSell)}>
                        Add to Cart
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          <button onClick={() => removeFromBasket(item)}>
            Remove from Cart
          </button>
        </div>
      ))}
    </div>
  )
}

export default CheckoutWithRecommendations
```


---

# 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.limio.com/developers/limio-sdk/basket/cross-sell-and-upsell-functionality.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.