Would you like to offer several product variants on your order form and have your customers select them using checkboxes? This article will explain how this all works.

Example for food supplement

A vendor sells the food supplement GainMAXX in the form of pill boxes. For this purpose, they would like to offer three different quantities on their order form:

1. GainMAXX – 1 box
2. GainMAXX – 3 boxes
3. GainMAXX – 6 boxes

The vendor therefore creates three separate products and adds the 3-box and 6-box variant to the first product “GainMAXX – 1 box” as an add-on.

Not the solution you're looking for?

There are many ways to offer multiple products on your order form. If this article does not represent what you want to implement, I recommend that you view our Order Bump feature or try to create variants in the product settings in the “Variants” tab.

Basic setup:

For each product variant you offer, you have to create a your own product and assign it as an add-on to one of your products.

To do so, proceed as follows:

Step 1: Create products

First of all, you have to create all the products you want to display on your order form as independent products create.

Since you add the products to your sales process as add-ons afterwards, the following steps are sufficient:

1. In the Vendor view, go to Product setup > Product configuration.
2. Click on Add product.
3. Enter a Name for the product e.g. [Product name] - [variant] = NutritionMAXX - 1 kilogram.
4. Enter a Sales Page.
5. Click on Save.

Repeat these steps for the other products you want to display on your order form.

For technical reasons, you also have to add a payment plan, but only for your main product. As a rule, the product with the lowest price/quantity is the most suitable main product, as it is displayed at the top of your order form and therefore is the first product.

To do so, proceed as follows:

1. In the Vendor view, go to Product setup > Product configuration.
2. Click on the E-icon at the Main Product.
3. Switch to the Payment Plans tab.
4. Scroll all the way down and click on the E-icon on the left of the only payment plan you will find.
5. Adjust the price of your main product in the First payment field.
6. Click on Update existing payment plan.

Step 2: Set products as add-on

Now switch to the product you want to use as your main product.

1. In the Vendor view, go to Product setup > Product configuration.
2. Click on the E-icon at the Main Product.
3. Switch to the Add-ons tab.
4. Select the option Yes - as radio button choice from the dropdown Buying main product is optional, if add-ons are present.
5. Click on Save.
6. Scroll to the Add add-on window and select one of the products you want to display on the order form from the Product dropdown list.
7. Set a price for this add-on in the Price field.
8. Finally, check if all other settings of your add-on match your expectations in the “Add add-on” window. If everything is OK, click on Add add-on.
9. Repeat steps 6-8 for all other products you want to display on the order form.

If you now call up the order form of your main product, you can freely choose between all the products you have created.

Tip: Preselect product(s) with GET parameters
If you would like to preselect a different product with different links, you can use GET parameters and thereby preselect the desired products via the link. You can find more information here. Important note: According to US law, add-ons must not be preselected. Therefore they are not preselected if the reseller is DS.us.

Design a conversion-optimized order form

In addition to the basic setup, it makes sense to adapt and optimize your order form to this funnel in order to generate more customers and revenue.

One of the most popular structures for order forms in a funnel looks like this:

This order form consists of:

1. A header image
2. The shopping cart
3. The fields for filling in the contact details
4. The list of payment methods
5. Information about the return period
6. A list of testimonials
7. A list of FAQs

To design such an order form, proceed as follows:

Guide

1. In the Vendor view, go to Account > Order form.
2. Click on Create responsive order form.
3. You are now in the editing view of your order form. You can design your order form by
   • Adding widgets (by dragging & dropping them from the left-hand side to the desired line),
   • Deleting widgets (by clicking on the trash can in the upper right-hand corner of the widget. If it is not visible, the widget must be present on the order form),
   • Moving widgets (by dragging & dropping them to the desired line),
   • Changing the width of widgets (by moving the slider on the bottom right-hand side of the widget to the left or right),
   • Editing widgets (by clicking on the E-icon in the top right-hand corner of the widget, if it is available).
   Set up the following structure using these operating options:
   
4. Next to the HTML widgets you will find four numbers.
   I have prepared a HTML code for you to use as a template. It is important that you adapt this code to your business.
   To use our template, add the following code to the HTML widgets by clicking on the E-icon in the top right-hand corner of the widget. Remember to always click “Apply” after adding the code in order to save it.
   1. HTML widget (template)
      <div class="box-hl-container"><h1><span>PRODUCT SELECTION<a></a></span></h1></div> <div class="box-body contact-body"></div>
      Note: Make sure you copy the entire code! Scroll to the right to see the entire code.
   2. HTML widget (template)
      <div class="guarantee-box"> <div class="guarantee-title"> 60-day return period! </div> <div class="guarantee-text"> <div class="money-back-guarantee"> <img src="https://dltq3zauxm86g.cloudfront.net/images/orderform/guaranty-seals/de/gold-60.png" alt="" /></div> <b>With this offer, you can test this product and return it for 60 days.</b> If you are not satisfied, you can always return your product. To do so, click on the immediate help link in the order confirmation email and return it yourself or contact me at beispiel@beispiel.com or the Digistore24 support at support@digistore24.com. <br /><b>After all, your happiness is the most important thing to me.</b> </div> <div class="guaranteed-by d-inline-block"> <div class="position-relative"> <b>GUARANTEED BY</b> <img src="https://dltq3zauxm86g.cloudfront.net/images/logo/made_in_germany.png" alt="" /></div> </div> <div class="clearfix"></div> </div>
   3. HTML widget (template)
      <div class="box-hl-container"><h1><span>WHAT OUR CUSTOMERS SAY<a></a></span></h1></div> <div class="box-body contact-body"></div>
   4. HTML widget (template)
      <div class="box-hl-container"><h1>FREQUENTLY ASKED QUESTIONS</h1></div><div class="orderform-box-inner box-area-inner with-frame contact-area"><h3><strong data-mce-style="font-size: 14px;">Q: Here should be a typical question of your customers.</strong></h3><p><strong data-mce-style="font-size: 14px;">A: </strong>Here should be the answer to this question.</p><p> </p><p><strong>Q: Here should be a typical question of your customers.</strong></p><p><strong>A: </strong>Here should be the answer to this question.</p><p> </p><p> </p></div>
5. Click on Settings in the top left-hand corner.
6. If you want to use our template, paste the following code in the Custom CSS code field.
   .money-back-guarantee img { margin-bottom: 70px; width: 80%; } #cart > tbody > tr.row_brutto_total.body.summary.brutto > td.summary_label > div { padding-bottom: 10px; } #order_form > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div > div > div.box-body.contact-body { margin-top: 0rem; } #order_form > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div { background: #f2f9ff; border-top-left-radius: 8px; border-top-right-radius: 8px; } #order_form > div > div:nth-child(5) > div { padding-top: 20px; } #order_form > div > div:nth-child(3) { background: #f2f9ff; } #order_form > div > div:nth-child(5) > div > div { background: #f2f9ff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #order_form > div > div.row.has_one_type_only.page_type_orderform { background: #f2f9ff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #order_form > div > div:nth-child(5) > div > div > div > div.orderform-box-inner.box-area-inner.with-frame.contact-area { padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) div.box-area-container { padding: 0 } .testimonial-area .testimonial-body .testimonial { background: #f2f9ff; margin-bottom: 0; } .html-area .box-hl-container h1 { margin-bottom: 16px } .box-area-inner .box-hl-container h1 { background-color: #3988E3; border-color: #071A2E; color: #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; text-transform: uppercase; text-align: center; font-size: 16px; font-weight: bold; padding: 10px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.47); } .unit_price .amount { position: relative; font-size: 18px; font-weight: 700; } #cart tbody tr:first-child { background: #a0cae9; border-bottom: 5px solid #f1f1f1; } #cart tbody tr:nth-child(2) { background: #a4dae6; border-bottom: 5px solid #f1f1f1; color: #fff; } #cart tbody tr:nth-child(3) { background: #afdac0; border-bottom: 5px solid #f1f1f1; color: #fff; } .money-back-guarantee { width: 235px; margin: 60px -10px 0 0; overflow: hidden; border-radius: 5px; float: right; position: relative; right: 0; bottom: 0; } .details h3 { font-size: 20px; } .money-back-guarantee { width: 200px; margin: 0; overflow: hidden; border-radius: 5px; float: right; position: absolute; right: -30px; bottom: -80px; } .guarantee-box a, .guarantee-box a:active, .guarantee-box a:visited { color: #00F; } .guaranteed-by { font-size: 24px; letter-spacing: -1px; padding: 18px 21px; width: 307px; bottom: -15px; left: 0; display: block; } .guaranteed-by .position-relative { position: relative; } .guarantee-box .guaranteed-by b { } .guarantee-box .guaranteed-by img { display: block; width: 100%; margin-left: 0px; } .guarantee-box { border: 3px solid #269de2; border-radius: 9px; background: #f2f9ff; position: relative!important; overflow: hidden; } .guarantee-box .guarantee-title { font-size: 20px; padding: 18px 21px; text-transform: uppercase; text-align: left; letter-spacing: -1px; color: black; } .guarantee-box .guarantee-text { padding: 0 10px 8px 21px; font-size: 14px; line-height: 18px; display: block; } .product-top-l-arrow, .product-top-r-arrow { position: absolute; top: -11px; width: 55px; height: 55px; } table.orderform_table > thead > tr { background: #f2f9ff; border: 0px #ddd solid; border-bottom: none; } .click-button { min-width: 200px; width: 100%; height: auto; padding: 12px; font-weight: 700; box-shadow: 0 0 0px transparent; border: 1px solid #777; } .click-button.long_text { font-size: 20px; } .box-body.html-body { padding: 0px!important; } .header { position: relative; margin-bottom: 10px; } .header .logo { width: 120px; } .header .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } div.box-area-container > div.box-area-inner { margin: 0rem; } div.box-area-container { padding: 0 5px 0 5px; position: relative; } .box-area-inner.with-frame, .box-area-inner.empty { background-color: #f2f9ff; border: 0px solid #cccccc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .box-hl-container { position: relative; overflow: hidden; } .box-hl-container:after { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 0; height: 0; content: ""; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 20px solid #3988E3; } .box-body { margin-top: 1rem; } .box-body.cart-top, .cart-body, .html-body { margin-top: 0rem!important; } .cart-body, .contact-area .box-body, .payment-area .box-body, .guarantee-box { margin-bottom: 20px; } .sub-heading { margin: 0; height: 5px; background: #545356; } table.orderform_table { margin-bottom: 0rem!important; } table.orderform_table tbody { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .products-top { position: relative; font-size: 17px; padding: 0 5px 5px; text-align: center; background: #3c3c3c; color: #fff; letter-spacing: -1px; margin: 0; } .table>tbody>tr>td { border-top: 0px solid transparent; } .row:after, .row:before { width: 0px!important } table.orderform_table td[data-responsive-cell-label]:before { display: none!important; opacity: 0; } table.orderform_table tbody .image { padding: 1rem 0 1rem 0; }
7. Click on Apply.
8. Click on Save.

Please pay attention to the note on legal advice.