What is a 1-click upsell and how does it work?

An upsell is a secondary product that's offered immediately after your customer completes their initial purchase.

Since we save your customer's card details, they can accept the upsell with just one click and get charged instantly.

By offering a 1-click upsell, you can increase your revenue by up to 25%.

To set up an upsell, you will need:

A primary product
An upsell product
A page for accepting the upsell

Primary Product

This is the main product you sell through our checkout. It's your customer's first interaction and purchase.

For instance, you could create a course on how to play the guitar. This is the primary product.

(If you're reading this tutorial, you've probably already created your primary product)

Upsell product

You'll also need to create your "upsell product".

This is a separate product that will be offered in a 1-click purchase, immediately following the approved purchase of the primary product.

You can also create a member's area for the upsell product.

Acceptance Page for the Upsell

Next, you need to create a page where your customer can accept (or decline) the 1-click upsell.

This page will be displayed immediately after the payment for your primary product has been approved.

It should contain information about the upsell product you're offering, such as its price, benefits, and more.

You can create this page using your website builder (e.g., Klickpages, Elementor, OptimizePress), or it can even be a regular HTML page.

The crucial part is to create the basic structure of the page and make it live. You'll need to have the URL to access the page.

Configuring the Acceptance Page for the Upsell

Now, on the Products menu, open your primary product editing screen.

Click on the Settings tab, and scroll down to the "Thank you and upsell page" section.

Activate the option "This product has a custom thank you page or upsell"



Enter the URL of your upsell acceptance page (which you just created) in the provided field.

Next, click on the "upsell generator" button to generate your accept and decline upsell buttons:



Select product and upsell offer (which you will offer on 1-click purchase)

You can also customize the button text, decline upsell text, and color.

(Scroll down to see a preview of the button)

When you're done, click "Copy HTML Code"!



The generated code will look something like this:

<div style="text-align:center">
<button id="kiwify-upsell-trigger-XFQ6I7P" style="background-color:#5383ad;padding:12px 16px;cursor:pointer;color:#FFFFFF;font-weight:600;border-radius:4px;border:1px solid #5383ad;font-size:20px;">Sim, eu aceito essa oferta especial!</button>
<div id="kiwify-upsell-cancel-trigger" style="margin-top:1rem;cursor:pointer;font-size:16px;text-decoration:underline;font-family:sans-serif;">Não, eu gostaria de recusar essa oferta</div>
</div><script>
let nextUpsellURL = "";
let nextDownsellURL = "";</script><script src="https://kiwify-snippets.netlify.app/upsell/upsell.min.js"></script>

You should then place this HTML code on your upsell acceptance page, where you want the button to appear. It can go anywhere on your page.

Do not copy the code shown above. It's just an example. You must generate your own code in the product settings.

Once you've completed this, save your changes!

When a customer purchases your primary product, they'll be automatically redirected to the configured URL, where they'll have the option to click on the accept or decline upsell button.

How to Test the Upsell

To test if the upsell is working, simply visit your upsell acceptance page and add the parameter "?token=123" to the URL.

For instance, if your upsell acceptance page is https://myproduct.com/upsell , you'd navigate to: https://myproduct.com/upsell?token=123

Doing this allows you to click the upsell button and see the payment confirmation box. It won't redirect you any further; the fact that it shows up indicates that it's working!

Is it Possible to Offer Multiple Upsells or Downsells?

Yes, it is possible. You can do this setup in the upsell button generator.

The logic for the next upsell or downsell is always the same. It's essentially a "thank you page" that contains an accept and decline button.

For each new upsell or downsell URL, you'll need to repeat the process and generate a new button.

More Customization for Advanced Users

For those with advanced HTML skills, it's possible to customize the appearance of the accept and decline upsell buttons, including using other types of buttons.

Start by generating your upsell code as usual, then make the necessary changes

However, keep in mind:

The javascript snippet should be at the bottom of the page, ideally close to the closing </body> tag

<script src="https://kiwify-snippets.netlify.app/upsell/upsell.min.js"></script>

Your upsell button (or buttons) must have the ID shown here (example):

<button id="kiwify-upsell-trigger-XFQ6I7P" style="background-color:#5383ad;padding:12px 16px;cursor:pointer;color:#FFFFFF;font-weight:600;border-radius:4px;border:1px solid #5383ad;font-size:20px;">Sim, eu aceito essa oferta especial!</button>

See, the ID of the button above is: kiwify-upsell-trigger-XFQ6I7P (your product will have another ID, this is just an example)

Your opt-out button or link must have the ID kiwify-upsell-cancel-trigger

By adding these IDs to your page elements, you can fully customize the accept/decline upsell buttons or links.

Again, this requires more advanced knowledge of HTML, and we don't recommend it for beginners. It's much simpler to set it up using our button generator.

Updated on: 10/04/2024