Noch keine Osteraktion fĂŒr Deinen Online-Shop? Oder nur eine langweilige E-Mail-Kampagne geplant? Dann habe ich etwas Besseres fĂŒr Dich. Last-Minute!
Stell Dir vor: Ein kleiner Hase hĂŒpft durch Deinen Online-Shop. Wer ihn 3x erwischt, bekommt einen Rabattcode, begleitet von Animationen, Sound und einer Konfetti-Explosion.
Das Ergebnis? Höhere Conversion-Raten und mehr Geld in Deiner Tasche!
Wir haben dieses Spiel ursprĂŒnglich fĂŒr die neue Website unseres CRO-optimierten Shopify-Themes Conversfy entwickelt â und jetzt kostenlos fĂŒr Dich umgebaut.
Warum funktioniert das so gut?
Gamification ist nicht nur ein Buzzword. Es basiert auf klaren psychologischen Prinzipien:
- Menschen lieben es, Ziele zu verfolgen und dafĂŒr belohnt zu werden.
- Visuelle, auditive und interaktive Reize erhöhen die Aufmerksamkeit.
- Ein Erlebnis bleibt besser im GedÀchtnis als ein statisches Rabattbanner.
Was das fĂŒr Deinen Online-Shop bedeutet:
â
LĂ€ngere Verweildauer
â
Höhere Engagement-Rate
â
Emotionale Bindung
â
Mehr KĂ€ufe, weil Nutzer SpaĂ haben
Studien zeigen: Interaktive Elemente können die Conversion-Rate um bis zu 70âŻ% steigern â gerade bei mobilen Nutzern.
So funktioniert das Spiel
- Ein Icon (z.âŻB. Osterhase) erscheint zufĂ€llig auf der Seite.
- Der Besucher klickt ihn 3x an â jedes Mal mit Sound & Konfetti.
- Danach erscheint ein Modal-Fenster mit Rabattcode, Kopier-Button und Link zum Shop.
Warum Du solche Games verwenden solltest?
Die meisten Online-Shops setzen auf klassische Rabatt-Popups, die inzwischen niemand mehr beachtet. Dieses Spiel dagegen:
- bricht das Muster
- ĂŒberrascht
- animiert zur Handlung
- fĂŒhrt spielerisch zur Conversion
Und es kostet Dich nichts auĂer 5 Minuten Zeit zum Einbau.
Dein nÀchster Schritt
- Section herunterladen
- Binde die Section und Audio-Dateien in Deinem Online-Shop ein
- Stelle Deine gewĂŒnschten Texte, Farben und Sounds im Theme Editor ein
- Teste das Spiel â und beobachte, was mit Deiner Conversion passiert
âĄïž Liquid-Code & Sounds herunterladen
Installationsanleitung & Demo
Osteraktion schon verplant. Kein Problem!
Das Spiel lÀsst sich beliebig anpassen. Es geht nicht um Osterhasen, sondern um Interaktion.
Hier ein paar Beispiele:
- Halloween: Geister jagen, KĂŒrbisse sammeln
- Black Friday: Rabatt-Bomben entschÀrfen
- Valentinstag: Herzen anklicken
- Launch-Aktion: Neues Produkt versteckt auf der Seite
Du entscheidest, welches Symbol wann wo auftaucht und was danach passiert.
Anpassungsmöglichkeiten
Die Spiel-Sektion ist komplett ĂŒber den Shopify-Theme-Editor steuerbar. Kein Coding nötig. Du kannst u.âŻa. einstellen:
| Parameter | Beschreibung | Beispielwert |
|---|---|---|
| Start-Button Text (mobil) | Text auf dem Start-Button fĂŒr MobilgerĂ€te | Spiel starten |
| Startbutton Textfarbe | Textfarbe des Start-Buttons | #333333 |
| Kopieren-Button Hintergrundfarbe | Hintergrundfarbe des Kopieren-Buttons | #2196F3 |
| Kopieren-Button Hover-Hintergrundfarbe | Hover-Hintergrundfarbe des Kopieren-Buttons | #0b7dda |
| Shop-Button Hintergrundfarbe | Hintergrundfarbe des Shop-Buttons | #4CAF50 |
| Shop-Button Hover-Hintergrundfarbe | Hover-Hintergrundfarbe des Shop-Buttons | #3e8e41 |
| Minimale Spawn-Verzögerung (ms) | Minimale Wartezeit bis zum nÀchsten Hasen | 2000 |
| Maximale Spawn-Verzögerung (ms) | Maximale Wartezeit bis zum nÀchsten Hasen | 6000 |
| Konfetti-Stopp-Verzögerung (ms) | Verzögerung bis Konfetti-Effekt endet | 3000 |
| ZĂ€hler Randfarbe | Randfarbe des ZĂ€hlers | #ffcc00 |
| Rabattfeld Randfarbe | Randfarbe des Rabattfeldes | #ffcc00 |
| Glow-Effekt Farbe | Farbe fĂŒr Glow-Effekte | #FFD700 |
| Position von Startbutton | Position des Start-Buttons/ZĂ€hlers | bottom-left |
| Hasen-Icon | Emoji oder Zeichen fĂŒr den Hasen | đ° |
| Ei-Icon | Emoji oder Zeichen fĂŒrs Ei im Modal | đ„ |
| Klick-Sound URL | URL zum Klick-Sound | https://cdn.shopify.com/s/files/1/0834/0750/3649/files/coin.mp3 |
| Sound bei Gewinn | URL zum Gewinn-Sound | https://cdn.shopify.com/s/files/1/0834/0750/3649/files/winner.mp3 |
| Titel im Modal | Ăberschrift im Modal-Fenster | Herzlichen GlĂŒckwunsch! |
| Nachricht im Modal | Text im Modal-Fenster | Du hast den Osterhasen drei Mal gefunden und einen Rabattcode gewonnen! |
| Rabattcode | Code, der im Modal angezeigt wird | OSTERN2025 |
| Buttontext fĂŒr Kopieren-Button | Text auf dem Button zum Kopieren | Code kopieren |
| Shop-URL | Link zum Online-Shop | https://shopify.de |
| Buttontext fĂŒr Shop-Button | Text auf dem Shop-Button | Zum Online-Shop |
| HasengröĂe (px) | GröĂe des Hasen in Pixel | 80 |
| Konfetti aktivieren | Konfetti ein-/ausschalten | true |
| Eckenradius | Rundung fĂŒr Buttons und Elemente | 10px |
| Verzögerung beim Start (ms) | Wartezeit bis zum ersten Hasen | 3000 |
| ZÀhler-Text PrÀfix | Text vor dem HasenzÀhler | Gefundene Hasen: |
| ZÀhler anzeigen | Ob ein HasenzÀhler angezeigt wird | false |
đĄ Wenn Du keine Shop-URL angibst, wird nur der Rabattcode-Button angezeigt.
đą Soundeffekte funktionieren in den meisten modernen Browsern. Auf iOS ist Sound ggf. deaktiviert, aber Animation und Code funktionieren immer.
đ¶ Du kannst eigene Sounds verwenden. Diese kannst Du z.B. hier finden: Sounds 1, Sounds 2. Beachte, dass die Effekte nicht zu lange sind!
đ§ââïž Du bist Entwickler? Dann fĂŒhl Dich frei, das Layout usw. anzupassen. Nicht erlaubt ist der Verkauf von diesem Script!
Fazit
Dieses Oster-Special verwandelt Deinen Online-Shop in ein kleines Spielcasino. Statt langweiligen Pop-ups bekommst Du:
Statt:
- Bannerblindheit
- starrer Rabattanzeigen
- toter E-Mail-Kampagnen
bekommst Du:
- Aufmerksamkeit
- Interaktion
- Emotionale Markenbindung
- âŠund letztlich: mehr VerkĂ€ufe!
Ich wĂŒnsche Dir viel Erfolg und bald schöne Ostern! đ°
