> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getbonde.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product page upsells

> Display upsell offers on product detail pages.

Product page upsells display offers to customers on individual product pages. The widget can show as a product card slider or stacked product cards.

You can configure specific products to be shown based on which product page the customer is viewing. Discounts can be applied when customers add both the main product and the upsell product to their cart.

## Theme installation

<Steps>
  <Step title="Open the theme customizer">
    Navigate to **Online Store > Themes > Customize**.
  </Step>

  <Step title="Enable the app embed">
    Ensure the Bonde app embed is enabled in **App Embeds**.
  </Step>

  <Step title="Navigate to product template">
    Go to the product page template where you want the upsell widget.
  </Step>

  <Step title="Add the app block">
    Add the **Bonde: Product Page Upsell** app block where you'd like it to appear (typically beneath the add to cart button).
  </Step>

  <Step title="Save">
    Save your updates.
  </Step>
</Steps>

## Widget configuration

Navigate to **Upsells > Settings > Product Page Widget** to configure:

* **Section title**: The heading above upsell offers
* **Layout type**: Slider or stacked cards
* **Maximum products**: Limit how many upsells show at once
* **Colors and styling**: Match your theme

## Creating a product page upsell

<Steps>
  <Step title="Create the upsell">
    In the Bonde app, go to **Upsells** and click **Create Upsell**.
  </Step>

  <Step title="Select type">
    Select **Product Page** as the upsell type.
  </Step>

  <Step title="Configure triggers">
    Configure trigger conditions to control when the upsell appears, or leave blank to show on all product pages.
  </Step>

  <Step title="Select product">
    Select the product offer—this is the product displayed to customers in the upsell area.
  </Step>

  <Step title="Add discount (optional)">
    Optionally configure a discount for when customers add the upsell product.
  </Step>
</Steps>