FluentCart Order Bumps: So legst du sie an (Update 2.3.1)

FluentCart hat seine Order Bumps komplett überarbeitet, und so kannst du deine bestehenden Produkte nun entweder direkt im Warenkorb, im Side Cart oder im Checkout noch mal um passende Produkte ergänzen.

Dein Kunde sieht den Order Bump, klickt ihn einfach an, und schon ist das Produkt der Bestellung hinzugefügt.

Wie du das Ganze aufsetzen kannst, kannst du dir entweder im Video anschauen oder dir den nachfolgenden Artikel durchlesen.

1. Was ist ein Order Bump?

Ein Order Bump ist ein kleines Zusatzangebot direkt beim Kauf. Natürlich gibt’s dafür, wie bei Order Bumps so üblich, einen Rabatt, denn du preist das Produkt ja zusätzlich an, im Sinne von: „Hey, nimm dir das noch dazu.“

Bisher hat FluentCart den Order Bump in einer festen Darstellung angezeigt. Mit dem Update 2.3.1 bestimmst du selbst, wo er auftaucht und wie er aussieht.

Hinweis: Order Bumps gehören zu FluentCart Pro.

2. Das Order-Bump-Modul aktivieren

Stelle als Erstes sicher, daß du auf der neuesten Version von FluentCart bist und daß du in den Einstellungen unter „Funktionen und Add-ons“ das Modul „Order Bump“ mit dem Toggle aktiviert hast.

Ist das der Fall, findest du oben unter „Mehr“ den Menüpunkt „Order Bump“.

3. Erst das Design: eine Vorlage wählen

Bevor du deinen ersten Order Bump anlegst, würde ich dir raten, erst einmal auf „Design“ zu klicken. Mit der neuesten Version gibt’s dort verschiedene Vorlagen für die Order Bumps, deren sechs gibt FluentCart vor.

Klickst du bei einer Vorlage auf „Customize“, siehst du, wie das Ganze vonstattengeht: Alles, was du dort siehst, ist letztendlich nichts anderes als der Gutenberg-Editor. Du kannst die Gruppen auf der linken Seite aufklappen, die Überschriften anklicken und alles umsetzen, was du auch ganz klassisch im Gutenberg-Editor machen könntest.

Mit „Use this Layout“ ist die Vorlage dann in Benutzung. Über „Add Template“ kannst du dir außerdem ein eigenes Template von Grund auf aufbauen, bis zu 20 sind möglich.

Merke: Die Vorlage, die du hier auswählst, gilt für alle Order Bumps in deinem Shop, nicht für ein einzelnes Produkt. Einem Produkt ordnest du den Order Bump zu, nicht die Vorlage. Außer du spielst noch mit CSS, dazu weiter unten mehr.

4. Den Order Bump anlegen

Ist das Design festgelegt, klickst du auf „Neu hinzufügen“, gibst einen Titel ein und suchst dir das Produkt aus, das du als Zusatzangebot anbieten möchtest. Mit „Erstellen“ geht’s weiter.

Auf der linken Seite hast du dann die Möglichkeit, einen eigenen Text einzugeben. Ich habe das Feld im Video leer gelassen, weil mir reicht’s, wenn Bild und Preis angepriesen werden.

Thema Bild: Für den Moment zieht sich der Order Bump das Produktbild als Thumbnail. Du kannst aber jederzeit speziell für diesen Order Bump ein eigenes Bild hinterlegen. Einfach auf „Medium hinzufügen“ klicken, Bild hochladen, fertig.

Beim Rabatt entscheidest du dich zwischen Prozent und einem festen Betrag. Dazu kannst du dich E-Commerce-typisch noch entscheiden, ob ein Gutscheinrabatt zusätzlich zum Angebotsrabatt gelten soll und ob es kostenlosen Versand gibt.

5. Placement: Wo der Order Bump angezeigt wird

Schön ist, was jetzt unter dem Punkt „Placement“ möglich ist. Hier hast du zwei Möglichkeiten, die Kasse und den Warenkorb. Den Warenkorb (Cart Page) kannst du erst auswählen, wenn du ihn auf der rechten Seite aktiviert hast.

An der Kasse ziehst du den Order Bump einfach mit der Maus an die gewünschte Stelle. Sobald du darüber fährst, erscheinen blaue Kästen, also über oder unter den Kundendaten, über den Zahlungsmöglichkeiten oder über der Bestellübersicht. Loslassen, fertig.

Alles, was du so verschiebst, kannst du auch im Dropdown auf der rechten Seite einstellen.

Im Warenkorb wird der Order Bump immer unter den Produkten angezeigt, die schon im Warenkorb liegen. Das gilt für die Warenkorbseite und für das Side Cart, das von der Seite hereinfährt.

Und dann gibt’s noch „Hidden on Checkout“. Möchtest du z.B., daß der Order Bump nur im Warenkorb angezeigt wird, nicht aber an der Kasse, ziehst du ihn einfach in dieses Feld auf der rechten Seite. Mit „Use this placement“ speicherst du deine Auswahl.

Hinweis: Egal, von welchem Land aus du verkaufst, schau immer, was rechtlich möglich ist und wo du das Ganze anzeigen darfst.

6. Bedingungen: Wann der Order Bump erscheint

Als Letztes kannst du Bedingungen aktivieren, also „Anzeigen, wenn …“. Hier hast du die Wahl zwischen bestimmten Artikeln, die schon im Warenkorb liegen, und einer bestimmten Zwischensumme.

Im Video habe ich beides kombiniert: Der Order Bump erscheint nur, wenn schon Artikel für über 20 € im Warenkorb liegen und zusätzlich ein bestimmtes Produkt darin ist.

Anschließend den Order Bump aktivieren und aktualisieren.

Tipp: Kommt rechts oben eine Fehlermeldung, schau beim Rabatt nach. Bei mir stand dort zwar „Prozentsatz“, aber der Wert war noch 0. Das heißt, es gibt keinen Rabatt, und das mag FluentCart nicht, das ist extra so eingerichtet. Wert auf z.B. 5 setzen, aktualisieren, und schon klappt’s.

7. Testen

Jetzt ist es an der Zeit, das Ganze zu testen. Lege im Shop ein beliebiges Produkt in den Warenkorb.

In meinem Beispiel lag der Gesamtbetrag danach bei 40 €, und trotzdem erschien kein Order Bump. Ganz einfach, weil die zweite Bedingung, das bestimmte Produkt im Warenkorb, noch fehlte. Erst als das drin lag, kam der Order Bump, und zwar an allen drei Stellen: auf der Warenkorbseite, im Side Cart und an der Kasse.

Jetzt muß dein Kunde lediglich den Haken setzen, und das Produkt wird der Bestellung hinzugefügt und kann ganz einfach mitgekauft werden.

8. Mehr als die Vorlagen: eigenes Design mit CSS

Vielleicht reichen dir die sechs Vorlagen und eigene Templates im Editor nicht, und du möchtest einen ganz anderen Weg gehen. Also zum Beispiel Animationen einbauen, wie in meinem Demo-Shop die kreisende gestrichelte Linie um den Order Bump oder den Pfeil, der ständig aufploppt.

Auch das ist kein Problem. Ich benutze im Beispiel den Builder Breakdance*, aber eigentlich ist das ganz unabhängig von Breakdance, denn du kannst das mit jedem anderen Builder oder auch in Gutenberg umsetzen. Das ist reines CSS.

Und das CSS habe ich mir sogar von der KI schreiben lassen. Ich füge es letztendlich einfach nur in ein Tool wie FluentSnippets ein, um diese Animationen zu erreichen.

Hinweis: Baust du deine Warenkorbseite mit einem Warenkorb-Element aus deinem Page Builder statt mit dem Warenkorb von FluentCart, kann es sein, daß die Order Bumps dort fehlen. In meinem Demo-Shop war genau das der Fall, im Side Cart und an der Kasse waren sie trotzdem da. Mit dem Warenkorb von FluentCart selbst erscheinen sie.

Du willst deine Order Bumps auch per CSS gestalten und weißt nicht, wo du anfangen sollst? In der ThriveBiz+ Community bekommst du Antworten auf genau solche Umsetzungsfragen.

Fazit

FluentCart Order Bumps sind mit diesem Update deutlich flexibler geworden.

Nicht nur werden sie jetzt im Warenkorb, im Side Cart und im Checkout angezeigt, nein, du kannst dir an der Kasse auch aussuchen, wo genau sie erscheinen. Gestylt werden sie ganz einfach per Gutenberg, und wenn das nicht reicht, nimmst du einfach CSS.

Eine kleine Downside: Im Modal-Checkout, also wenn die Kasse als Popup aufgeht, kannst du sie nicht benutzen. Was mich für meinen Fall weniger interessiert, und vielleicht kommt das noch.

Falls du das Feature schon nutzt, ich höre sehr, sehr gern, was du damit machst!

Ich nutze für meinen eigenen Shop FluentCart*.

FAQ