Eine Multi-Step Order Box anlegen

Mit Digistore24 kannst du neben dem klassischen sowie dem responsive Bestellformular nun auch eine Multi-Step Order Box erstellen.

Klassisches Bestellformular

Responsive Bestellformular

Multi-Step Order Box

Was sind die Vorteile einer Multi-Step Order Box?

  • check
    Deine Kunden können Mikro-Entscheidungen treffen, so dass ihnen am Ende die Kaufentscheidung leichter von der Hand geht.
  • check
    Die Multi-Step Order Box ist direkt auf deiner Verkaufsseite platzierbar. Deine Kunden werden somit nicht auf eine externe Seite umgeleitet.

Wie erstelle ich eine Multi-Step Order Box?

Da dieses Bestellformular entweder per HTML oder unserem WordPress-Plugin eingebaut werden muss und es nicht reicht, auf das Formular zu verlinken (so wie es bei einem responsive oder klassischen Bestellformular der Fall ist), sprechen wir hierbei von einer sogenannten Order Box.

Um eine Multi-Step Order Box zu erstellen, folge dieser Anleitung:

  1. Gehe in der Vendor-Ansicht zu Konto > Bestellformulare.
  2. Klicke oben auf den Button "Multi-Step Order Box für Ihre Verkaufsseite erstellen".
  3. Gib neben "Name" einen Namen für dein Bestell-Widget ein. Dieser Name ist nur für dich ersichtlich.
  4. Klicke auf "Speichern und Vorschau aktualisieren" um auf der rechten Hälfte der Seite dein Bestellformular anzeigen zu lassen.
Du musst die Multi-Step Order Box nicht in den Produkteigenschaften festlegen!

Die Multi-Step Order Box existiert und funktioniert unabhängig von dem Bestellformular, das du in den Produkteigenschaften im Tab „Bestellformulare“ festgelegt hast. Das bedeutet, dass die Multi-Step Order Box dein „normales“ Bestellformular nicht ersetzt. Stell dir die Box eher als Addon vor: Dein in den Produkteigenschaften festgelegtes Formular funktioniert weiterhin wie gewohnt.

Multi-Step Order Box mit Button auf Seite öffnen

Möchtest du, dass die Multi-Step Order Box erst per Klick auf einen Button geöffnet wird, musst du einige Änderungen am HTML-Code vornehmen, den wir für dich bereitstellen:

Schritt-für-Schritt-Anleitung

Wie kann ich meine Multi-Step Order Box individuell gestalten?

1. Formular-Stil

Bei Formular-Stil kannst du die Hauptfarbe deiner Multi-Step Order Box ändern. Du hast drei Optionen:

Weiß

Blau

Grau

2. Anzahl der Schritte

Du kannst entweder zwischen einer Anzahl von einem, zwei oder drei Schritt(en) wählen.

Warum sollte ich nur einen Schritt auswählen?

Wir möchten sicherstellen, dass jeder unserer Kunden den größtmöglichen Spielraum hat, um sein Business individuell zu gestalten. Der große Vorteil der Multi-Step Order Box ist, dass sie direkt auf der Verkaufsseite eingebaut werden kann und keinen weiteren Klick benötigt. Dieser Vorteil kann auch mit nur einem Schritt ausgespielt werden, das liegt ganz in deiner persönlichen Präferenz.

3. Produktbild - Ja oder nein?

Du kannst auswählen, ob dein Produktbild angezeigt werden soll oder nicht.

Je nachdem, wie groß es ist, kann es manchmal durchaus sperrig sein. Demnach überlege dir gut, ob du dein Produktbild tatsächlich anzeigen willst oder tausche es gegebenenfalls durch eine kleinere Version aus.

Dein Produktbild wird über den Kaufoptionen angezeigt oder - wenn du drei Schritte eingestellt hast - im zweiten Schritt extra.

4. Anordnung

Du kannst die Anordnung folgender Elemente bestimmen:

  1. Kundendaten: Beim Dropdown-Menü "Kundendaten abfragen ..."  kannst du auswählen, ob du die Kundendaten, die ausgefüllt werden müssen, nach der Produktauswahl oder am Anfang, noch vor der Produktauswahl, anzeigen lassen willst.
  2. Bestellzusammenfassung: Du kannst bei der Checkbox-Liste "Bestellzusammenfassung anzeigen" zwischen mehreren Anordnungsmöglichkeiten wählen.
  3. Widerrufscheckbox: Solltest du ein digitales, Software-, Dienstleistungs- oder Seminarprodukt erstellt haben, kannst du für Privatkunden die Umtauschregelung “Kein Widerrufsrecht” einstellen. Das bedeutet, dass der Kunde sein Widerrufsrecht aufgibt. Dies muss er in einer Checkbox explizit bestätigen. Solltest du so eine Widerrufscheckbox eingerichtet haben, kannst du mit dem Dropdown-Menü "Widerrufscheckbox anzeigen" wählen, wo du sie platzieren möchtest.
  4. Reihenfolge: Mit dem Dropdown-Menü "Reihenfolge" kannst du die allgemeine Reihenfolge der oben genannten Features bestimmen.

5. Tabs

Hier kannst du bestimmen, wie die Tabs aussehen sollen.

Du kannst zunächst auswählen, ob du die Tabs als Text (Standard-Einstellung) anzeigen lassen möchtest oder du dein eigenes Bild verwenden möchtest.

Als Text kannst du die Standardtexte von "1. Schritt"/"2. Schritt"/"3. Schritt" zu anderen Texten ändern. Wenn du möchtest, kannst du auch Zusatztexte hinzufügen.

Möchtest du ein Bild als Tab verwenden, kannst du dich entscheiden, ob du das Bild mit unserem üblichen Uploader oder direkt als URL hochladen möchtest. Du kannst für jeden Schritt ein eigenes Bild festlegen.

Um ein Bild über den Uploader hochzuladen, gehe wie folgt vor:

  1. Wähle im Dropdown-Menü "Art der Tabs" "Bilder hochladen".
  2. Klicke auf eines der Icons neben dem Schritt, für den du ein Bild als Tab festlegen möchtest.
  3. Klicke auf "Bild hochladen".
  4. Wähle einen der Modi links aus, wie du dein Bild hochladen möchtest. Wenn du eine Datei auf deinem Computer hast, wähle den Modi "Mein Computer" und klicke auf "Wählen Sie die Dateien". Nun kannst du in der gewohnten Finder/Explorer-Ansicht dein Produktbild suchen.
  5. Hast du dein Produktbild ausgewählt, klicke rechts unten auf "Hochladen".
Auf Bildmaße achten!

Bitte achte auf die geforderten Bildmaße. Dein Bild muss genau 600 Pixel breit und 120 Pixel hoch sein. Verwende bitte außerdem nur GIF-, JPG-, PNG- und SVG-Bilder.

6. Button-Texte

Hier kannst du bestimmen, welcher Text in den Buttons geschrieben sein soll, die der Kunde klickt, um zum nächsten Tab zu gelangen. Standardmäßig ist hier der Text "Weiter" vorausgefüllt.

Wenn du möchtest, kannst du außerdem einen Zusatztext für jeden Button hinzufügen.

Du kannst den Buttontext für jeden Tab ändern.

Beachte bitte, dass es keinen "Weiter-Button" im Tab 3 geben kann, weil dein Multi-Step-Widget nur maximal drei Schritte haben kann.

7. Orderbump-Feature - Ja oder nein?

Nun kannst du - wenn du willst - einen Orderbumper zu deinem Produkt hinzufügen. Eine Erklärung, was ein Orderbumper ist und wie du ihn in der Regel verwenden kannst, findest du in diesem Artikel.

Um einen Orderbumper auf deiner Multi-Step Order Box anzuzeigen, ändere den Stil zu "Gestrichelter Rahmen".

Du kannst nun bei "Position" die Position des Orderbumpers verändern. Außerdem kannst du den Titeltext sowie die Animation des standardmäßig ausgewählten roten, blinkenden Pfeils bei "Auswahltext" ändern und den Inhalt beim gleichnamigen Menüpunkt. 

8. Eigener CSS-Code

Solltest du mit den verfügbaren Gestaltungsmöglichkeiten nicht zufrieden sein oder genaue Vorstellungen haben, die sich mit unseren Features nicht umsetzen lassen, kannst du einen Programmierer beauftragen, einen für dich maßgeschneiderten CSS-Code zu schreiben, der dein Bestell-Widget einzigartig macht.

Füge diesen CSS-Code dann in das Feld neben "Eigener CSS-Code" ein.

9. Favicon

Ein Favicon ist ein kleines Icon oder Symbol, das in der Adresszeile eines Webbrowsers links von der URL sichtbar ist.

10. Headerbild

Du kannst deiner Multi-Step Order Box noch ein Headerbild hinzufügen, um dein Formular zusätzlich zu individualisieren.

Zusätzlich kannst du mit einem Klick auf "Erweiterte Headereinstellungen"  separate Header für die Folgeseiten des Bestellformulars hochladen. Das ist sinnvoll, wenn du in deinem Header den Status der Bestellung anzeigen möchten.

Häufig gestellte Fragen

Wie baue ich die Multi-Step Order Box auf meiner Website ein?

Du hast zwei Möglichkeiten:

  1. Kopiere den HTML-Code unter der Vorschau deiner Multi-Step Order Box und füge ihn per Iframe auf deiner Website ein.
  2. Wenn du WordPress verwendest, kannst du per Shortcode deine Multi-Step Order Box hinzufügen. Lade dazu unser Digistore24-WordPress-Plugin herunter oder verwende das Membership-Plugin Digimember.

Ersetzt die Multi-Step Order Box die Bestellformulare, die ich bis dato verwendet habe?

Nein, du musst dir die Multi-Step Order Box eher wie eine Art Addon zu deinen "normalen" Bestellformularen vorstellen. Jene funktionieren nämlich weiterhin wie gewohnt: Deine Kunden können über diese Formulare bestellen, Affiliates werden bei Vermittlung entlohnt, etc.

Du kannst dich also entscheiden, ob du - wenn du die neue Order Box nutzt - deine Bestellformulare weiter verwenden möchtest oder nicht. Es ist aber keine Entweder-Oder-Entscheidung.

Kann ich weiterhin eine Social Proof-Bubble anzeigen lassen?

Na klar! Diese wird nun ganz unten im Footer der Multi-Step Order Box angezeigt.

Kann ich auch auf der Order Box einen vorausgefüllten Gutscheincode einfügen? 

Selbstverständlich.

Für ein klassisches oder responsive Bestellformular musstest du dazu den GET-Parameter "voucher" an das Ende der URL setzen. Diesen GET-Parameter musst du nun in das Iframe deiner Order Box einsetzen.

Wie sieht ein solcher GET-Parameter aus?

"?voucher=GUTSCHEINCODE"

Wo füge ich den GET-Parameter in den Iframe-Code ein?

Füge den Code am Ende der letzten URL ein. Achte darauf, dass du den Parameter vor dem Apostroph einsetzt.

<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=GUTSCHEINCODE'></iframe>


Wie erstelle ich einen solchen Gutscheincode?

Mehr Informationen dazu erhältst du hier.

Aktualisiert am 10. Juli 2019

War dieser Artikel hilfreich?

Relevante Artikel