Hallo zusammen, ich habe mich gefragt, wie ich eine solche Infobox erstellen kann, die einem Kunden angezeigt wird, nachdem er auf einen Rabattlink in einer Mail geklickt hat. Kann mir hier jemand helfen? Dankeschön. 
Hey @steffi_h
Danke für das Bild und hier gäbe es ein paar Dinge zu beachten um den Use-Case der oben im Sugarshape Beispiel angezeigt wird, zu implementieren. An erster stelle ist Sugarshape nicht auf der Shopify Platform und scheint ein Custom Build zu sein, sprich, wurde von einer Agentur erstellt. Kostenschätzung der Webseite: €300k.
Wir haben aber Apps, die das, was man im Bild sieht, ggf. nachahmen und sogar viel besser können als was in deinem Beispiel oben gezeigt wird (ich zeige die App Demos weiter unten) denn die Lösung in deinem Bild scheint etwas “Behelfsmäßig” zu sein thb, sprich, da sie nur ein Textbox mit viel Text ist und sonst nichts. Ist das eine gute UX (user experience) oder gut für die Barrierefreiheiten auf Mobile? Das wäre eine Frage die man sich stellen müsste als Shopinhaber:in.
Unten habe ich ein paar Demos für dich gesammelt, die du durchklicken kannst und die wir hier auch gerne weiter besprechen können, wie z. B. welcher Use-Case für dein Shop am besten geeignet wäre. Die Apps verwenden oft einen Floating Button oder Widget den man anklickt um den Rabatt zu bekommen, was nach jahrelanger UX Design Research und dessen Ergebnisse eine verbesserte UX darstellt:
Pro-Tipp - den Kunden etwas Sense of Urgency/Scarcity übermitteln: Was beispielsweise in deinem Bild oben fehlt ist etwas “Sense of Urgency/Scarcity”, sprich, ein Countdown Timer der sagt, dass der Rabatt in einer gewissen Zeit, wie 5Min, abläuft. Viele User legen etwas in den Warenkorb und klicken dann wieder woanders und können den Cart dann sogar vergessen und kehren nicht mehr zurück. Ein Countdown Timer kann dem User den notwendigen Push geben den Warenkorb abzuschießen.
CLV (customer lifetime value) erhöhen: Dann ist da auch nichts im Bild dabei den User zu einem Wiederkehrenden User zu machen, sprich, eine Aufforderung sich im Shop oder für den Newsletter zu registrieren was weitere Vorteile und reduzierte Preisangebote mit sich bringt. Die Apps unten können das auch um die CLV zu erhöhen**.**
AOV (average order value) erhöhen: um den Gesamtwert der Bestellung zu erhöhen, kann man dem Kunden auch einen Incentive geben mehrere Produkte in den Cart zu legen, mit Staffelpreise oder Mengenrabatte. Das können die unten aufgelisteten Apps auch und sie sind alle am neuesten Stand des relativ neuen und wissenschaftlichen UX Design Disziplin und haben alle top Bewertungen (nicht vergessen, die Bewertungen zu lesen) sowie Free Plans available:
- Automatic Discounts App
- Coupon X App (siehe Widget rechts unten)
- All‑in‑One Discount On Cart
- BulkBunny︱ Bulk Discount Codes
- Bulk Discount Code Bot
- Cartix Cart Discounts
- Weitere solche Apps hier
Ein No-Brainer und Win-Win? ?
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Hallo Gabe,
vielen Dank für deine Antwort!
Ich möchte mein Anliegen noch einmal kurz beschreiben:
Ein Kunde ist bereits im Newsletter angemeldet und erhält eine Mail mit einem Rabattcode. Der Kunde klickt dann auf den Button, wo der Rabattcode hinterlegt ist und demnach direkt aktiviert ist, wenn der Kunde im Shop landet. Ich möchte lediglich den Kunden mit einer kleiner Infobox wissen lassen, dass der Rabattcode bereits aktiviert ist. Diese Infobox muss auch nicht so groß sein wie im SugarShape-Beispiel.
Weißt du, was ich meine?
Super Steffi, verstehe! @steffi_h
Das wird aber eine Code Lösung verlangen die du mit einem unserer Shopify Experten erarbeiten müsstest (ein E-Mail an die Experten kostet ja nichts). Ich werde aber unten eine grobe Anleitung geben wie das im grossen und ganzen implementiert werden könnte.
Hier also die Schritte, um ein Info Kästchen in deinem Shop anzuzeigen, das deinen Kunden informiert, dass ein Rabattcode bereits aktiviert wurde, nachdem sie auf den Link in einer E-Mail oder einem Newsletter geklickt haben. Gehe zu “Online Store” und im aktuellen Theme aus und klicke auf “Actions” > “Duplizieren” (um das in einer Theme Kopie vorher zu testen) → “Edit code”.
Speichere immer alle Änderungen:
- Klicke auf “Add a new snippet” und nenne es zum Beispiel
discount-info-box. - In das neue Snippet fügst du den HTML-Code für dein Infokästchen ein. Hier ein einfaches Beispiel:
Hey! Dein Rabattcode ist schon aktiviert und wird beim Checkout automatisch angewendet. Viel Spaß beim Shoppen!
- Gehe zum Haupt-Theme-Code (zum Beispiel
theme.liquid) oder zu dem Template, wo du das Infokästchen anzeigen möchtest. - Füge an der Stelle, wo das Kästchen erscheinen soll, den folgenden Code ein:
{% include 'discount-info-box' %}
- Noch im Code-Editor, finde deine JavaScript-Datei (oft
theme.jsoder ähnlich). - Füge folgenden JavaScript-Code hinzu, der das Infokästchen einblendet, wenn der Rabattcode in der URL steht (angenommen, der Rabattcode ist ein URL-Parameter namens
discount
document.addEventListener("DOMContentLoaded", function() {
var params = new URLSearchParams(window.location.search);
if(params.has('discount')) {
document.getElementById('discount-info-box').style.display = 'block';
}
});
- Besuche deinen Shop und füge
?discount=testcodeam Ende der URL ein (ersetzetestcodemit dem Namen deines Rabattcodes). - Du solltest das Infokästchen sehen, das darüber informiert, dass der Rabattcode aktiviert ist.
Denke daran, immer eine Sicherung deines Themes zu machen, bevor du Änderungen vornimmst, und teste die Funktionen gründlich, bevor du sie live schaltest.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!