Create a multi-step order box

With Digistore24, you can now create a multi-step order box in addition to the classic and responsive order forms.

​Classic order form

Responsive order form

Multi-step order box

What are the benefits of a multi-step order box?

  • check
    Your customers can make micro-decisions so that the purchase decision is ultimately easier for them to make.
  • The multi-step order box can be placed directly on your sales page. Your customers will not be redirected to an external page.

How do I create a multi-step order box?

Since this order box must be inserted either via HTML or our WordPress plugin and it is not sufficient to place a link to the box (as is the case with a responsive or classical order form), we speak here of a so-called widget.

To create a multi-step order box widget, follow this guide:

  1. ​In the vendor view, go to ​Account > Order forms.
  2. ​At the top, click on the button "​Create order widget for your sales page".
  3. ​For "​Name"​, enter a name for ​​​your order widget. This name is only visible to you.
  4. Click on "Save and update preview" to display your order box on the right half of the page.
You do not need to specify the multi-step order box in the product properties!

The multi-step order box exists and works independently of the order form that you have defined in the product properties in the tab “Order Form”. This means that the multi-step order box does not replace your “normal” order form. Think of the box more as an addon: Your form specified in the product properties still works as usual.

How can I design my multi-step order box according to my individual needs?

1. Form style

The field 'form style' enables you to change the main color of your order widget. You have three options:

White

Blue

Grey

2. Number of steps

​You can choose between one, two and three step(s).

Why should I select just one step?

We want to ensure that each of our customers has the greatest possible freedom to customize their business. The great advantage of the order widget is that it can be installed directly on the sales page and does not require any further clicks. This advantage can also be played out in just one step, which is entirely up to you​.

3. Product image - Yes or no?

​You can choose whether your product image is displayed or not.

Depending on how big it is, it can sometimes be quite a cumbersome process. For this reason, please consider carefully whether you really want to display your product image. If necessary, you can replace it with a smaller version.

Your product image will be displayed above the purchase options. If you have set three steps, it will be displayed in the second step.

4. Arrangement


  1. ​Contact details: In the dropdown menu "Request contact details ...", you can choose whether you want to display the contact details after the product selection or at the beginning before the product selection.
  2. ​Order summary: ​In the checkbox list "​Display order summary"​, you can ​​​​​​choose between several arrangement possibilities.
  3. ​Revocation checkbox: If you have created a digital, software, service or seminar product, you can set the refund regulation "No right of revocation" for private customers. This means that the customer gives up their right of revocation. They must explicitly confirm this in a checkbox. If you have set up such a ​revocation checkbox, you can use the dropdown menu "Display checkbox" to select where you want to place it.
  4. ​Order: ​Use the dropdown menu "​Order"​ to specify the general order of the above-mentioned features.​​​

5. Tabs

Here you can specify what the tabs should look like.

Firstly, you can choose whether you want to display the tabs as text (default setting) or whether you want to use your own image.

​As text, you can change the default texts from "Step 1"/"Step 2"/"Step 3" to other texts. If you want, you can also add additional texts.

​If you want to use an image as a tab, you can decide whether you want to upload the image with our usual uploader or directly as a URL. You can specify a separate image for each step.

​To upload an image via the uploader, proceed as follows:

  1. ​In the dropdown menu "​Type of tabs"​, select "Upload images".​​​
  2. ​Click on one of the icons next to the step for which you want to set an image as a tab.
  3. ​Click on "​Upload image"​.​​​
  4. ​Choose one of the modes on the left to upload your picture. If you have a file on your computer, select the "My computer" mode and click on "Select the files". Now you can search for your product image in the usual Finder/Explorer view.
  5. ​Once you have selected your product image, click on "​Upload"​in the bottom right corner.​​​​​​​​​
Pay attention to image dimensions!

Please pay attention to the required image dimensions. Your image must be exactly 600 pixels wide and 120 pixels high. Please also use only GIF, JPG, PNG and SVG images.

6. Button texts

Here you can specify which text should be written in the buttons that the customer clicks on to go to the next tab. By default, the text "Next" is specified.

​If you want, you can also add an additional text for each button.

You can change the button text for each tab.

Please note that there can be no "Next button" in tab 3, because your multi-step widget can only have a maximum of three steps.

7. Order bump feature - Yes or no?

If you want, you can now add an order bumper to your product. An explanation of what an order bumper is and how to use it can be found in ​​this article.

To display an order bumper on your order widget, change the style to "​Dashed frame".​​​​

​In the field "​Position"​, you can change the position of the order bumper. ​​​In the field "Selection text", y​ou can also change the title text and the animation of the red flashing arrow that is selected by default. In addition, it is possible to change the content ​under the same menu item.

8. Custom CSS code

​If you are not satisfied with the design options available to you or have precise ideas that cannot be implemented using our features, you can hire a programmer to write a custom CSS code that will make your order widget unique.​​​

You can then add this CSS code in the field next to "​Custom CSS code".​​​​

9. Favicon

​A favicon is a small icon or symbol visible in the address bar of a web browser to the left of the URL.

10. Header image

You can also add a header image to your order widget to further customize your order box.

In addition, you can upload separate headers for the following pages of the order box by clicking on "Advanced header settings". This is especially useful if you want to display the order status in your header.

​FAQs

How do I install the multi-step order box on my website?

You have two options:

  1. Copy the HTML code under the preview of your multi-step order box and paste it via iframe on your website.
  2. If you use WordPress, you can add your multi-step order box via shortcode. Download our Digistore24 WordPress plugin or use the Membership plugin Digimember.

Does the multi-step order box replace the order forms I have used until now?

No, you have to imagine the multi-step order box as a kind of addon to your "normal" order forms. These continue to work as usual: your customers can order via these forms, affiliates are paid for their services, etc...

So you can decide if you want to continue using your order forms - if you use the new order box - or not. But it's not mutually exclusive.

Can I still display a Social Proof Bubble?

Of course! This is now displayed at the bottom in the footer of the order widget.

Can I also insert a pre-filled voucher code on the order box?

Of course!

For a classic or responsive order form you had to set the GET parameter "voucher" to the end of the URL. This GET parameter must now be inserted into the iframe of your order box.

What does such a GET parameter look like?

"?voucher=EXAMPLE"

Where do I add the GET parameter to the iframe code?

Insert the code at the end of the last URL. Make sure you put the parameter before the apostrophe.

<script src='https://www.digistore24.com/service/js/orderform_widget.js'></script><script>const DS24_ORIGIN='https://www.digistore24.com';</script>
<iframe id='ds24_payIFrame' style='overflow: hidden; width: 100%; height: 600px; border: none; background: transparent;' src='https://www.digistore24.com/product/123456/12345?voucher=EXAMPLE'></iframe>

How do I create such a voucher code?

You can get more information here.

Updated on 13. November 2018

Was this article helpful?

Related Articles