Möchtest du mehrere Produktvarianten auf deinem Bestellformular anbieten und deine Kunden mithilfe von Checkboxen wählen lassen? In diesem Artikel erfährst du, wie es funktioniert.
Beispiel für Nahrungsergänzungsmittel
Ein Vendor verkauft das Nahrungsergänzungsmittel GainMAXX in Form von Pillendosen. Dazu möchte er drei verschiedene Mengen auf seinem Bestellformular anbieten:
- GainMAXX – 1 Dose
- GainMAXX – 3 Dosen
- GainMAXX – 6 Dosen
Der Vendor legt also drei separate Produkte an und fügt die 3-Stück- und 6-Stück-Variante dem ersten Produkt „GainMAXX – 1 Dose“ als Add-on hinzu.
Nicht die Lösung, die du suchst?
Es gibt viele Möglichkeiten, mehrere Produkte auf deinem Bestellformular anzubieten. Entspricht dieser Artikel nicht dem, was du umsetzen möchtest, sieh unser Order-Bump-Feature an oder probiere, Varianten in den Produkteinstellungen im Tab „Varianten“ zu erstellen.
Schritt-für-Schritt Anleitung:
Zu jeder Produktvariante, die du anbietest, sollte ein eigenes Produkt angelegt und als Add-on einem deiner Produkte zugewiesen werden.
Gehe dazu wie folgt vor:
Schritt 1: Produkte erstellen
Zunächst solltest du alle Produkte, die du auf deinem Bestellformular anzeigen möchtest, als selbstständige Produkte erstellen.
Da du die Produkte danach als Add-ons deinem Verkaufsprozess hinzufügst, reichen folgende Schritte:
- Gehe in der Vendor-Ansicht zu Konto > Produkte.
- Klicke auf Produkt hinzufügen.
- Gib einen Namen für das Produkt ein, z. B. [Produktname] - [Variante] => NutritionMAXX - 1 Kilogramm.
- Gib eine Verkaufsseite an.
- Klicke auf Speichern.
Wiederhole diese Schritte für die anderen Produkte, die du auf deinem Bestellformular anzeigen möchtest.
Einzig für dein Hauptprodukt solltest du aus technischen Gründen außerdem noch einen Zahlungsplan hinzufügen. In der Regel eignet sich als Hauptprodukt das Produkt mit dem geringsten Preis/der geringsten Menge, da es auf deinem Bestellformular ganz oben und damit als erstes Produkt angezeigt wird.
Gehe dazu wie folgt vor:
- Gehe in der Vendor-Ansicht zu Konto > Produkte.
- Klicke bei deinem Hauptprodukt auf das E-Icon.
- Wechsle in den Tab Zahlungspläne.
- Scrolle ganz nach unten und klicke links neben dem einzigen Zahlungsplan, den du vorfindest, auf das E-Icon.
- Passe den Preis deines Hauptprodukts im Feld Erste Zahlung an.
- Klicke auf Bestehenden Zahlungsplan aktualisieren.
Schritt 2: Produkte als Add-on einstellen
Wechsle nun zu dem Produkt, das du als Hauptprodukt verwenden möchtest.
- Gehe in der Vendor-Ansicht zu Konto > Produkte.
- Klicke bei deinem Hauptprodukt auf das E-Icon.
- Wechsle in den Tab Add-ons.
- Wähle beim Drop-down-Menü Kauf vom Hauptprodukt ist optional, falls Add-ons vorhanden die Option Ja – als Radio-Button-Auswahl.
- Klicke auf Speichern.
- Scrolle zum Fenster Add-on hinzufügen und wähle beim Drop-down-Menü Produkt eines der Produkte aus, die du auf dem Bestellformular anzeigen möchtest.
- Lege beim Feld Preis einen Preis für dieses Add-on fest.
- Überprüfe abschließend, ob alle anderen Einstellungen deines Add-ons im Fenster „Add-on hinzufügen“ mit deinen Vorstellungen übereinstimmen. Ist alles in Ordnung, klicke auf Add-on hinzufügen.
- Wiederhole die Schritte 6–8 für alle weiteren Produkte, die du auf dem Bestellformular anzeigen möchtest.
Rufst du nun das Bestellformular deines Hauptprodukts auf, kannst du zwischen all den Produkten, die du eingestellt hast, frei wählen.
Tipp: Produkt/-e mit GET-Parametern vorauswählen
Wenn du mit verschiedenen Links auch ein unterschiedliches Produkt vorausgewählt haben möchtest, kannst du GET-Parameter verwenden und so über den Link die gewünschten Produkte vorauswählen. Mehr Informationen dazu erhältst du hier. Wichtiger Hinweis: Nach US-Recht dürfen Add-ons nicht vorausgewählt sein. Deshalb werden sie nicht vorausgewählt, wenn der Reseller DS.us ist.
Conversion-optimiertes Bestellformular entwerfen
Zusätzlich zum Basic-Setup macht es bei dieser Umsetzung Sinn, auch dein Bestellformular an diesen Funnel anzupassen und zu optimieren, um mehr Kunden und Einnahmen zu generieren.
Eine der beliebtesten Strukturen für Bestellformulare in einem solchen Funnel sieht wie folgt aus:
Dieses Bestellformular besteht aus:
- Einem Header-Bild
- Dem Warenkorb
- Den Ausfüllfeldern der Kontaktdaten
- Der Auflistung der Bezahlmethoden
- Einer Information zur Rückgabefrist
- Einer Auflistung von Testimonials
- Einer Auflistung von Häufig gestellten Fragen
Um ein solches Bestellformular zu gestalten, gehe wie folgt vor:
Anleitung
- Gehe in der Vendor-Ansicht zu Konto > Bestellformulare.
- Klicke auf Responsives Bestellformular erstellen.
- Du bist nun in der Bearbeitungsansicht deines Bestellformulars. Du kannst dein Bestellformular designen, indem du
- Widgets hinzufügst (indem du sie per Drag-and-Drop von der linken Seite in die gewünschte Zeile ziehst),
- Widgets löschst (indem du rechts oben beim Widget auf den Papierkorb klickst; ist dieser nicht sichtbar, sollte das Widget auf dem Bestellformular vorhanden sein),
- Widgets verschiebst (indem du sie per Drag-and-Drop in die gewünschte Zeile ziehst),
- die Breite von Widgets veränderst (indem du auf der rechten unteren Seite des Widgets den Regler nach links oder rechts verschiebst),
- Widgets bearbeitest (indem du beim Widget rechts oben auf das E-Icon klickst, falls es verfügbar ist).
- Neben den HTML-Widgets findest du im oberen Bild vier Zahlen.
Ich habe dir einen HTML-Code vorbereitet, den du als Vorlage nutzen kannst. Wichtig ist, dass du diesen Code trotzdem noch an dein Business anpasst.
Um unsere Vorlage zu verwenden, füge den HTML-Widgets folgenden Code hinzu, indem du beim Widget rechts oben auf das E-Icon klickst. Vergiss nicht, nach dem Hinzufügen des Codes immer auf Anwenden zu klicken, um den Code zu speichern.-
HTML-Widget (Vorlage)
<div class="box-hl-container"><h1><span>PRODUKTAUSWAHL<a></a></span></h1></div> <div class="box-body contact-body"></div>
Hinweis: Achte darauf, dass du den gesamten Code kopierst! Scrolle nach rechts, um den gesamten Code ansehen zu können. -
HTML-Widget (Vorlage)
<div class="guarantee-box"> <div class="guarantee-title"> 60-Tage Rückgabefrist! </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>Mit diesem Angebot kannst du dieses Produkt testen und 60 Tage lang zurückgeben.</b> Bist du unzufrieden, kannst du jederzeit dein Produkt zurückgeben. Klicke dazu in der Bestellbestätigungsmail auf den Soforthilfe-Link und gib es direkt selbst zurück oder wende dich an mich unter beispiel@beispiel.com oder den Digistore24-Support unter support@digistore24.com. <br /><b>Denn deine Zufriedenheit ist mir das Wichtigste.</b> </div> <div class="guaranteed-by d-inline-block"> <div class="position-relative"> <b>GARANTIERT VON</b> <img src="https://dltq3zauxm86g.cloudfront.net/images/logo/made_in_germany.png" alt="" /></div> </div> <div class="clearfix"></div> </div> -
HTML-Widget (Vorlage)
<div class="box-hl-container"><h1><span>DAS SAGEN UNSERE KUNDEN<a></a></span></h1></div> <div class="box-body contact-body"></div> -
HTML-Widget (Vorlage)
<div class="box-hl-container"><h1>HÄUFIG GESTELLTE FRAGEN</h1></div><div class="orderform-box-inner box-area-inner with-frame contact-area"><h3><strong data-mce-style="font-size: 14px;">Q: Hier sollte eine typische Frage deiner Kunden stehen.</strong></h3><p><strong data-mce-style="font-size: 14px;">A: </strong>Hier sollte die Antwort auf diese Frage stehen.</p><p> </p><p><strong>Q: Hier sollte eine typische Frage deiner Kunden stehen.</strong></p><p><strong>A: </strong>Hier sollte die Antwort auf diese Frage stehen.</p><p> </p><p> </p></div>
-
HTML-Widget (Vorlage)
- Klicke links oben auf Einstellungen.
- Wenn du unsere Vorlage verwenden möchtest, füge den folgenden Code in das Feld Eigener CSS-Code ein.
.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; } - Klicke auf Anwenden.
- Klicke auf Speichern.