Skip to main content

How can we help you?

I have placed an order on Digistore24

Set up upsell flow (JavaScript & upsell buy button)

This article shows you how to set up individual upsell items for your upsell flow and how to integrate them into your upsell page.

Note

This article is available in four variants:

Open Conversion Cockpit

You set up your upsell flow in the Conversion Cockpit of your initial product.

Proceed as follows:

  1. In the Vendor view, open Product setup > Product configuration.
  2. Click the three-dot icon on your initial product, then click Go to Conversion Cockpit.
  3. Click Settings.   
  4. Determine if duplicate purchases are allowed in this upsell flow.
  5. Create the upsell step. Choose one of the variants shown below to proceed.
Offer a single product as an upsell

Offer a single product as an upsell

You are offering a single product on the upsell page.

Step 1 - Add upsell item

Proceed as follows:

  1. Click Add upsell on the initial product or an existing upsell item.

    You can choose between a green arrow (upsell) and a red arrow (downsell) for the upsell item.

    The input window for the upsell item will be displayed.

  2. In step (1) Upsell type, select the option Products.
  3. Click Continue.
  4. In step (2) Upsell options, select the product to be sold in the field Product 1.
  5. Click Continue.
  6. In step (3) Integration, choose the option Without WordPress plugin.
  7. Click Continue.
  8. In step (4) Button type, select the option Upsell buy button.
  9. Click Continue.
  10. In step (5) Links to insert, the codes for integrating the upsell item into your upsell page will be displayed. You will need these in the next section.
  11. Click Save. The upsell item is added to the upsell flow and closed.
  12. Check the upsell page.

    In the upsell item, the upsell page is displayed in the Sales page field, which is stored in the product settings. If no upsell page is stored, the order form is used as the upsell page instead.

    Click the pencil icon to adjust the URL of the sales page.

    Note
    • If the selected product can only be sold as an upsell, the URL from the Sales page field in the product settings will be used.
    • If the selected product can be sold individually and as an upsell, the URL from the Upsell page field in the product settings will be used.
    • You can open the product settings by clicking on the product ID at the top of the upsell item.
    • You can check whether the product is a pure upsell product or not. See the Sales restrictions in the product settings under Up-/Downgrade / Upsell. Check the upsell page.

Step 2 - Integrate upsell item into the upsell page

After creating the upsell item in the Conversion Cockpit, you can integrate it into your upsell page.

Proceed as follows:

  1. Open the upsell item. To do this, click the pencil icon next to the title.
  2. Click on step (5) Links to insert.
  3. In the Design for upsell buy button field, select a template. You can edit templates or create new ones.
  4. Copy the code line from the JavaScript field and paste it anywhere in the header of your upsell page. This script adds a session ID to your upsell page. This is necessary for the upsell to work.
  5. Copy the code line from the Upsell buy button field and paste it into your upsell page where the purchase decision buttons should be displayed. This will display the upsell buy button.
Offer alternative products as an upsell

Offer alternative products as an upsell

You offer several alternative products on the upsell page.

Step 1 - Add upsell item

Proceed as follows:

    1. Click Add upsell on the initial product or an existing upsell item.

      You can choose between a green arrow (upsell) and a red arrow (downsell) for the upsell item.

      The input window for the upsell item will be displayed.

    2. In step (1) Upsell type, select the option Products.
    3. Click Continue.
    4. In step (2) Upsell options, select the product to be sold in the field Product 1.
    5. Click Add product. The field Product 2 will be displayed. Select an alternative product here.
    6. Repeat this process for all the products you want to offer as alternatives on the upsell page. You can offer up to ten products.
    7. Click Continue.
    8. In step (3) Integration, choose the option Without WordPress plugin.
    9. Click Continue.
    10. In step (4) Button type, select the option Upsell buy button.
    11. Click Continue.
    12. In step (5) Links to insert, the codes for integrating the upsell item into your upsell page will be displayed. You will need these in the next section.
    13. Click Save. The upsell item is added to the upsell flow and closed.
    14. Check the upsell page.

      In the upsell item, the upsell page is displayed in the Sales page field, which is stored in the product settings. If no upsell page is stored, the order form is used as the upsell page instead.

      Click the pencil icon to adjust the URL of the sales page.

      Note
      • If the selected product can only be sold as an upsell, the URL from the Sales page field in the product settings will be used.
      • If the selected product can be sold individually and as an upsell, the URL from the Upsell page field in the product settings will be used.
      • You can open the product settings by clicking on the product ID at the top of the upsell item.
      • You can check whether the product is a pure upsell product or not. See the Sales restrictions in the product settings under Up-/Downgrade / Upsell.Check the upsell page.

        In the upsell item, the upsell page is displayed in the Sales page field, which is stored in the product settings. If no upsell page is stored, the order form is used as the upsell page instead.

        Click the pencil icon to adjust the URL of the sales page.

Step 2 - Integrate upsell item into the upsell page

After creating the upsell item in the Conversion Cockpit, you can integrate it into your upsell page.

Proceed as follows:

    1. Open the upsell item. To do this, click the pencil icon next to the title.
    2. Click on step (5) Links to insert.
    3. In the Design for upsell buy button field, select a template. You can edit templates or create new ones.
    4. Copy the code line from the JavaScript field and paste it anywhere in the header of your upsell page. This script adds a session ID to your upsell page. This is necessary for the upsell to work.
    5. Copy all the Radio for product code lines into your upsell page, placing them where the alternatives should be displayed.
      1. Each alternative has its own code line where the product ID is specified with value="product-XXXXXX".
      2. Each code line creates a radio button on your upsell page for selecting the respective alternative. The radio buttons are unlabelled:
      3. Place a description and/or an image next to each code line for the respective alternative. 
        <input type="radio" name="digistore-upsell-button-radio" value="product-508535" /> Description and/or image for the product with ID 508535.

        On the upsell page (from the customer's perspective):

         Product in brown
 Product in blue
 Product in pink
    6. Copy the code line from the Upsell buy button field and paste it into your upsell page where the purchase decision buttons should be displayed. This will display the upsell buy button.
Offer alternative quantities as an upsell

Offer alternative quantities as an upsell

You offer the same product in different quantities on the upsell page.

Step 1 - Add upsell item

Proceed as follows:

  1. Click Add upsell on the initial product or an existing upsell item.

    You can choose between a green arrow (upsell) and a red arrow (downsell) for the upsell item.

    The input window for the upsell item will be displayed.

  2. In step (1) Upsell type, select the option Quantity.
  3. Click Continue.
  4. In step (2) Upsell options, select the product to be sold in the field Select product.
  5. In the field Option 1, enter a quantity. You can only specify whole numbers. The minimum value is 1.
  6. Click Add quantity option. The field Option 2 will be displayed. Enter an alternative quantity.
  7. Repeat this process for all the quantity options you want to offer on the upsell page. You can offer up to ten options.
  8. Click Continue.
  9. In step (3) Integration, choose the option Without WordPress plugin.
  10. Click Continue.
  11. In step (4) Button type, select the option Upsell buy button.
  12. Click Continue.
  13. In step (5) Links to insert, the codes for integrating the upsell item into your upsell page will be displayed. You will need these in the next section.
  14. Click Save. The upsell item is added to the upsell flow and closed.
  15. Check the upsell page.

    In the upsell item, the upsell page is displayed in the Sales page field, which is stored in the product settings. If no upsell page is stored, the order form is used as the upsell page instead.

    Click the pencil icon to adjust the URL of the sales page.

    Note
    • If the selected product can only be sold as an upsell, the URL from the Sales page field in the product settings will be used.
    • If the selected product can be sold individually and as an upsell, the URL from the Upsell page field in the product settings will be used.
    • You can open the product settings by clicking on the product ID at the top of the upsell item.
    • You can check whether the product is a pure upsell product or not. See the Sales restrictions in the product settings under Up-/Downgrade / Upsell.
     

Step 2 - Integrate upsell item into the upsell page

After creating the upsell item in the Conversion Cockpit, you can integrate it into your upsell page.

Proceed as follows:

  1. Open the upsell item. To do this, click the pencil icon next to the title.
  2. Click on step (5) Links to insert.
  3. In the Design for upsell buy button field, select a template. You can edit templates or create new ones.
  4. Copy the code line from the JavaScript field and paste it anywhere in the header of your upsell page. This script adds a session ID to your upsell page. This is necessary for the upsell to work.
  5. Copy all the Radio for option code lines into your upsell page, placing them where the offered alternatives should be displayed.
    1. Each alternative has its own code line, where the product quantity is specified with value="qty-X".
    2. Each code line creates a radio button on your upsell page for selecting the respective alternative. The radio buttons are unlabelled:
    3. Place a description and/or an image next to each code line for the respective alternative. 
      <input type="radio" name="digistore-upsell-button-radio" value="qty-3" /> Description and/or image for the quantity 3.

      On the upsell page (from the customer's perspective):

       3 units for 60 €
 5 units for 90 €
 7 units for 120 €
  6. Copy the code line from the Upsell buy button field and paste it into your upsell page where the purchase decision buttons should be displayed. This will display the upsell buy button.
Offer alternative payment plans as an upsell

Offer alternative payment plans as an upsell

You offer the same product with different payment plans on the upsell page.

Step 1 - Add upsell item

Proceed as follows:

  1. Click Add upsell on the initial product or an existing upsell item.

    You can choose between a green arrow (upsell) and a red arrow (downsell) for the upsell item.

    The input window for the upsell item will be displayed.

  2. In step (1) Upsell type, select the option Payment plan.
  3. Click Continue.
  4. In step (2) Upsell options, select the product to be sold in the field Select product.
  5. In the field Payment plan 1, choose a payment plan.
  6. Click Add payment plan. The field Payment plan 2 will be displayed. Choose an alternative payment plan.
  7. Repeat this process for all the payment plans you want to offer on the upsell page. You can offer up to ten options.
  8. Click Continue.
  9. In step (3) Integration, choose the option Without WordPress plugin.
  10. Click Continue.
  11. In step (4) Button type, select the option Upsell buy button.
  12. Click Continue.
  13. In (5) Links to insert, the codes for integrating the upsell item into your upsell page will be displayed. You will need these in the next section.
  14. Click Save. The upsell item is added to the upsell flow and closed.
  15. Check the upsell page.

    In the upsell item, the upsell page is displayed in the Sales page field, which is stored in the product settings. If no upsell page is stored, the order form is used as the upsell page instead.

    Click the pencil icon to adjust the URL of the sales page.

    Note
    • If the selected product can only be sold as an upsell, the URL from the Sales page field in the product settings will be used.
    • If the selected product can be sold individually and as an upsell, the URL from the Upsell page field in the product settings will be used.
    • You can open the product settings by clicking on the product ID at the top of the upsell item.
    • You can check whether the product is a pure upsell product or not. See the Sales restrictions in the product settings under Up-/Downgrade / Upsell.
     

Step 2 - Integrate upsell item into the upsell page

After creating the upsell item in the Conversion Cockpit, you can integrate it into your upsell page.

Proceed as follows:

  1. Open the upsell item. To do this, click the pencil icon next to the title.
  2. Click on step (5) Links to insert.
  3. In the Design for upsell buy button field, select a template. You can edit templates or create new ones.
  4. Copy the code line from the JavaScript field and paste it anywhere in the header of your upsell page. This script adds a session ID to your upsell page. This is necessary for the upsell to work.
  5. Copy all the Radio for option code lines into your upsell page, placing them where the offered alternatives should be displayed.
    1. Each alternative has its own code line, where the payment plan is specified with value="payplan-XXXXXX".
    2. Each code line creates a radio button on your upsell page for selecting the respective alternative. The radio buttons are unlabelled:
    3. Place a description and/or an image next to each code line for the respective alternative. 
      <input type="radio" name="digistore-upsell-button-radio" value="payplan-410156" /> Description and/or image for the payment plan with ID 410156.

      On the upsell page (from the customer's perspective):

       One-time payment = 49 €
 3x 18 € = 54 €
 5x 12 € = 60 €
  6. Copy the code line from the Upsell buy button field and paste it into your upsell page where the purchase decision buttons should be displayed. This will display the upsell buy button.