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?
- What are the benefits of a multi-step order box?
- How do I create a multi-step order box?
- How can I design my multi-step order box according to my individual needs?
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:
- In the vendor view, go to Account > Order forms.
- At the top, click on the button "Create order widget for your sales page".
- For "Name", enter a name for your order widget. This name is only visible to you.
- Click on "Save and update preview" to display your order box on the right half of the page.
How can I design my multi-step order box according to my individual needs?
You have several options for designing your order widget:
1. Form style
The field 'form style' enables you to change the main color of your order widget. You have three options:
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.
- 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.
- Order summary: In the checkbox list "Display order summary", you can choose between several arrangement possibilities.
- 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.
- Order: Use the dropdown menu "Order" to specify the general order of the above-mentioned features.
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:
- In the dropdown menu "Type of tabs", select "Upload images".
- Click on one of the icons next to the step for which you want to set an image as a tab.
- Click on "Upload image".
- 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.
- Once you have selected your product image, click on "Upload" in the bottom right corner.
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", you 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".
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.
How do I install the multi-step order box on my website?
You have two options:
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?
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?
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.