# Checkout upsell Source: https://gokarla.io/docs/guides/shops/checkout-upsell # Checkout upsell Show up to three product offers **inside the checkout**, in the order summary below the cart items, while the buyer is still completing their purchase. One click adds the product to the cart, and Karla applies your discount automatically — no discount codes or extra products to maintain. **Recommended for:** Marketing, E-commerce managers :::tip Want to offer something **after** payment instead, with one-click accept? See [Post-purchase upsell](/docs/guides/shops/post-purchase-upsell). The two surfaces work independently and can run together. ::: ## What you get - Up to three offer cards in the checkout order summary - A discount per offer — a percentage or a fixed amount — applied automatically at checkout - A quantity per offer (1–10 units added in one click) - A **Choose an option** selector so buyers can pick their size or color - A status badge in the Karla app that tells you whether offers are actually being shown ## Prerequisites 1. Install the [Karla Shopify app](https://apps.shopify.com/karla-1) and complete onboarding. 2. Your store must be on **Shopify Plus**. Shopify only allows app content on the checkout's information, shipping, and payment steps — where the order summary lives — for Plus stores. ## Setup overview | Step | Where | What you do | | ---- | ------------------------------------------------------- | ---------------------------------------------------- | | 1 | Karla app → **Upsells** → **Settings** | Add your offers and switch the upsell on | | 2 | Shopify admin → **Settings → Checkout** → **Customize** | Add the **Karla Checkout Upsell** app block and save | ## Step 1: Configure the offers in the Karla app 1. Open **Shopify admin → Apps → Karla**. 2. Click **Upsells** and open the **Settings** tab. 3. Scroll to **Checkout upsell (pre-purchase)** at the bottom. ### Offers Click **Add offer** to add up to three offers. For each **Offer**: | Setting | Options | | ------------------ | --------------------------------------------------------------------------- | | **Select product** | Pick exactly one product variant | | **Discount** | **No discount**, **Percentage**, or **Fixed amount** | | **Discount value** | Percent off the offered product (1–100), or an amount in your shop currency | | **Quantity** | Units added to the cart in one click (1–10) | - Use **Move up** / **Move down** to set the order the cards appear in, and **Remove offer** to delete one. - Each variant can appear in only one offer. - Every offer needs a product and a valid deal before you can save. Click **Save offers** to apply your changes. ### Switch it on Turn on **Show checkout offers**. The switch saves right away. The offers go to **every buyer** — there is no audience or flow targeting on this surface. Turning the switch off hides the cards and stops the discount on upsell lines added earlier. ### Status badge The badge next to the section title tells you what buyers get right now: | Badge | Means | | ------------------- | --------------------------------------------------------------------------------------------------------- | | **Off** | **Show checkout offers** is off | | **Ready** | On and configured, but Karla hasn't served offers in the last 7 days yet — check that the block is placed | | **Live** | Karla served offers to your checkout within the last 7 days | | **On, not serving** | Switched on, but no offers can be shown — the message under the badge names the reason | **On, not serving** reasons: | Message says | What to do | | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | No offers are configured yet | Add an offer and click **Save offers** | | A price list or catalog can reprice the products | A Markets or B2B price list in your shop currency could change the offered products' prices, so Karla hides the cards rather than advertise a price checkout won't charge. The message lists the affected catalogs. For a catalog with fixed prices, offer products that are not priced in it; a catalog with a percentage adjustment hides all offers until the adjustment is removed. | | None of the offered products can be sold | Check that the products are active, published, and in stock | | The automatic discount is not active | Click **Save offers** again, and don't deactivate **Karla Checkout Upsell** under **Shopify admin → Discounts** | :::info **Live** means Karla's server returned offers. Individual buyers can still see no cards — for example when every offered product is already in their cart, or they check out in another currency (see [Good to know](#good-to-know)). ::: ## Step 2: Add the block in the checkout editor Shopify only shows app content in checkout once you place it: 1. In Shopify admin, go to **Settings → Checkout** and click **Customize**. 2. Stay on the **Checkout** page, click **Add block**, and choose **Karla Checkout Upsell** (under Apps). 3. Place it below the cart line items in the order summary. 4. Optionally set a **Section heading**. Leave it empty to use the default ("You might also like"), translated automatically; custom text is shown as-is, untranslated. 5. Click **Save**. In the checkout editor, the block shows a hint when there is nothing to display, so you can still place it. ## What buyers see Below the cart items, buyers see a heading and one card per offer with: - The product image and title - The price for the offered quantity — with a discount, the discounted price, the original price struck through, and a badge such as **−10%** - A **Choose an option** selector when the product has several variants in stock — the image and price follow the buyer's choice, and your deal applies to whichever variant they pick - An **Add** button After the buyer clicks **Add**, the card shows an **Added** badge with the line total Shopify calculated. The discount appears on that cart line and stays with it if the buyer changes the quantity. If a price or deal changed since the page loaded, the card updates instead of adding, so the buyer never adds something at a price they didn't see. ## Good to know - **Discount.** Karla creates an automatic discount called **Karla Checkout Upsell** in your Shopify admin. It combines with product and shipping discounts, but not with order discounts — when a buyer uses an order discount code, Shopify applies the better of the two. Each offer is discounted once per cart. A fixed amount comes off the line, not each unit. - **Products already in the cart** don't get a card. - **Currency.** Offers are priced in your shop currency. Buyers checking out in another currency see no cards. - **Accelerated checkouts** (for example express wallets) that can't take new cart lines hide the section. - **Variant selector.** Buyers don't get a selector — only your pinned variant — when two offers use the same product, when a price list could reprice the product, or when fewer than two variants are in stock. If you set up an offer before the selector existed, select its product again to enable it. - **Price changes** in Shopify can take up to 5 minutes to show on the cards. Each **Add** checks the live price first. - **Separate from post-purchase settings.** The post-purchase **Product exclusions**, **Skip items if already in the order**, audience, and flows don't apply here. - **Order tag.** Orders that include a checkout upsell line are tagged **`karla-checkout-upsell`**. - **Performance.** The **Performance** tab on the Upsells page covers the post-purchase upsell only. ## Troubleshooting **No offers in checkout** - Check the status badge in the Karla app and follow its message. - Make sure the **Karla Checkout Upsell** block is placed and saved in the checkout editor. - Remove offered products from your test cart — products already in the cart don't get a card. - Check out in your shop currency. **Discount missing on an added product** - Check that **Karla Checkout Upsell** is active under **Shopify admin → Discounts**, then click **Save offers** in the Karla app. - An order discount code replaces the upsell discount when it is the better deal for the buyer. ## Related - [Post-purchase upsell](/docs/guides/shops/post-purchase-upsell) — one-click offers after payment - [Shopify integration](/docs/guides/shops/shopify) — install the app and other checkout surfaces