Skip to content

Discounted upsell

What you’ll build: a cross sell that shows “$40 $30” and gives the customer that price only when they add it from the offer.

Requirements: Business plan and Shopify Plus.

A cross sell product showing the original price $10.00 crossed out, the discounted price $7.50, and the discount message ‘Checkout offer (-$2.50)’

  1. Create the discount. Click Create customization and choose Product discount.

    • Discount type and Discount value: for example Percentage, 25.
    • Discount message: shown under the product in the block and next to the discount at checkout, for example Checkout offer.
    • Variants applied to: the variants you’ll offer.
    • Areas applied to: untick Cart and keep Checkout components (upsells, cross-sells, etc.).
    • Save the function.
  2. Create the metafield definition (one time per store). In Shopify admin, add a Variants metafield definition checkout_buddy.markings, type JSON, with Storefront API access. Full steps. This lets blocks show the discounted price.

  3. Create the offer. Choose Upsell / Cross sell, set Choose products by to Select products manually, and pick the same variants. Set up the text and layout you want.

  4. Save and place the block. Note the block’s ID and add it to a Checkout Buddy app block with Fixed block ID in the Checkout Editor. See add a block to checkout.

  5. Test it. The block shows the reduced price. Add the product from the block: the discount appears at checkout. Add the same product from your store instead: no discount.

  • Keep “Disable custom attributes” off in the app block’s settings. The discount only recognizes items the block marks as added by Checkout Buddy.
  • The discount applies to items added by any Checkout Buddy block, not only this cross sell. It also applies to a line the customer changes with a cart line editor block, even if they added it from your store.
  • The block doesn’t check the discount’s display rules. If the discount has conditions (such as a cart minimum), give the block the same rules so customers aren’t shown a price they won’t get.
  • Only automatic product discounts show in blocks. Collection discounts, codes, and order discounts still apply at checkout but the block shows the full price.
  • Two discounts on one variant: blocks show whichever automatic product discount was saved last.
  • Works the same way in checkbox product offers, line item upsells, and the cart line editor.