Provedly in einem Shopify-Shop zu installieren, dauert vier Schritte: aus dem App Store installieren, die Abrechnung bestätigen, das Theme App Embed einschalten und ein Widget veröffentlichen. Es wird kein Code in dein Theme eingefügt, und nichts ändert sich, bis du das Embed einschaltest. Diese Anleitung geht jeden Schritt durch und die paar Entscheidungen, die du unterwegs triffst.
Bevor du anfängst. Du brauchst einen Shopify-Shop, in dem du Inhaber bist oder als Mitarbeiter die Berechtigung hast, Apps zu installieren und Themes zu bearbeiten. Ein Provedly-Konto brauchst du vorab nicht; die Installation der App legt eines an, das mit deinem Shop verknüpft ist.
Es hilft außerdem, dich für einen Plan zu entscheiden, bevor die Abrechnung erscheint. Der Free-Plan kostet $0 und enthält 2.000 Impressionen pro Monat, eine Website, ein Widget und eine CTA-Leiste, verifizierte Käufe inklusive, mit einem kleinen „by Provedly“-Badge. Eine Impression ist eine Benachrichtigung, die einem Besucher angezeigt wird, und ein typischer Besuch erzeugt etwa drei, 2.000 Impressionen sind also grob 700 Besuche. Wenn dein Shop mehr hat, deckt Starter für $9 pro Monat 25.000 Impressionen ab und lässt dich das Badge entfernen. Alle Details unter /de/pricing.
Schritt 1: aus dem Shopify App Store installieren
Such im App Store nach Provedly oder folge dem Link auf /de/features. Klick auf Installieren. Shopify zeigt die Berechtigungen, die die App anfordert, nämlich die, die nötig sind, um Bestell-Webhooks zu empfangen und genug Bestelldetails zu lesen, um eine Benachrichtigung zu bauen. Bestätige sie.
Shopify leitet dich dann in das eingebettete Provedly-Dashboard in deinem Shopify-Admin weiter. Ab diesem Punkt kannst du das Dashboard auch unter provedly.app öffnen, wenn dir ein vollständiger Browser-Tab lieber ist.
Schritt 2: die Abrechnung bestätigen
Provedly rechnet Shopify-Shops über Shopify Billing ab, die Plangebühr erscheint also auf deiner normalen Shopify-Rechnung statt auf einer separaten Karte. Beim ersten Start bittet dich das Dashboard, einen Plan zu wählen und die Belastung im Bestätigungsbildschirm von Shopify zu bestätigen. Auch die Wahl von Free läuft über diesen Bildschirm, weil Shopify verlangt, dass die App ein Abo registriert, aber der Betrag ist $0.
Wenn du später upgradest oder downgradest, läuft derselbe Bestätigungsablauf erneut. Den Unterschied zur Stripe-Abrechnung für Websites ohne Shopify erklärt /de/blog/shopify-billing-vs-stripe.
Schritt 3: das Theme App Embed aktivieren
Diesen Schritt übersehen die meisten. Die Installation der App verbindet die Daten, aber in deiner Storefront erscheint nichts, bis das Theme App Embed eingeschaltet ist.
- Geh im Shopify-Admin zu Onlineshop, dann Themes.
- Klick bei deinem Live-Theme auf Anpassen.
- Öffne App-Embeds in der linken Seitenleiste (das Puzzle-Symbol in den meisten Shopify-Versionen).
- Such Provedly und schalte es ein.
- Klick auf Speichern.
Das Embed lädt ein einziges Script von etwa 6 KB gzipped. Es rendert in einem Shadow DOM, sodass das CSS deines Themes nicht ins Widget sickert und die Styles des Widgets nicht nach außen dringen. Wenn du bei anderen Apps Script-Tags genutzt hast, erklärt der Vergleich in /de/blog/theme-app-embed-vs-script-tag, warum das Embed der bessere Weg ist.
Schritt 4: dein erstes Widget veröffentlichen
Leg zurück im Provedly-Dashboard ein Widget für Kaufbenachrichtigungen an. Die Standards sind zurückhaltend und es lohnt sich, sie anfangs beizubehalten: 3 Sekunden Verzögerung vor dem ersten Toast, 6 Sekunden auf dem Bildschirm, 30 Sekunden Abstand zwischen Toasts und ein Limit von 5 pro Session. Du kannst sie später enger oder lockerer stellen, sobald du siehst, wie Käufer reagieren; /de/blog/notifications-per-visit-frequency bespricht die Abwägungen.
Drei Einstellungen verdienen jetzt eine Entscheidung.
- URL-Targeting. Wähle all pages, only these pages oder all except. Die meisten Shops starten mit Produkt- und Kollektionsseiten und schließen den Checkout aus. Die Begründung steht in /de/blog/social-proof-on-checkout-page.
- Geräte-Targeting. Entscheide, ob das Widget auf dem Desktop, auf Mobilgeräten oder auf beiden erscheint. Mobile Layouts brauchen kleinere Toasts und ein einfaches Wegklicken, was /de/blog/mobile-social-proof-design behandelt.
- Noch keine Bestellungen. In einem Shopify-Shop zeigt das Widget nur verifizierte Bestellungen aus dem Shop, nie Sample- oder importierte Zeilen, es bleibt also still, bis die erste Bestellung eingeht. Der Tab Design zeigt eine Live-Vorschau des Toasts, während du ihn anpasst.
Klick auf Publish. Öffne deine Storefront in einem privaten Fenster und warte drei Sekunden.
Was nach deiner ersten echten Bestellung passiert
Wenn ein Kunde eine Bestellung aufgibt, sendet Shopify einen signierten Webhook orders/create an Provedly. Wir prüfen die Signatur, speichern die Bestellung und stellen sie dem Widget mit dem Kennzeichen „Verifizierter Kauf“ zur Verfügung. Das Kennzeichen verlinkt auf deine öffentliche Verifizierungsseite, die Shopify als verbundene Quelle aufführt und die Anzahl sowie den Zeitpunkt des letzten verifizierten Kaufs zeigt.
Vielleicht fällt dir auf, dass der Käufer als „Someone“ statt mit Vornamen erscheint. Shopifys Programm Protected Customer Data beschränkt den Zugriff auf personenbezogene Felder, bis die Nutzung einer App für deinen Shop genehmigt ist. Namen erscheinen, sobald diese Genehmigung vorliegt; was du in der Zwischenzeit tun kannst, steht in /de/blog/shopify-someone-protected-customer-data.
Optional: eine CTA-Leiste hinzufügen. Der Free-Plan enthält eine Leiste. Ein Countdown bis zum echten Ende eines Sales, ein Evergreen-Timer pro Besucher oder ein geplanter Zähler lassen sich im Bereich Bars anlegen und genauso ausrichten wie Widgets. Leisten erscheinen oben oder unten auf der Seite und folgen denselben Geräte- und URL-Regeln. Für die Planung der Sale-Saison lies /de/blog/black-friday-countdown-bars.
Eine Checkliste, um zu prüfen, ob alles funktioniert
| Prüfung | Wo du nachsiehst | Erwartetes Ergebnis |
|---|---|---|
| App installiert | Shopify-Admin, Apps | Provedly ist aufgeführt |
| Abrechnung aktiv | Provedly-Dashboard, Plan | Planname und Verlängerungsdatum |
| Embed aktiviert | Theme-Editor, App-Embeds | Schalter an und gespeichert |
| Widget veröffentlicht | Provedly-Dashboard, Widgets | Status „Live“ |
| Toast erscheint | Storefront, privates Fenster | Toast nach etwa 3 Sekunden |
| Webhook empfangen | Provedly-Dashboard, Sources | Shopify zeigt nach einer Testbestellung einen Zeitpunkt des letzten Empfangs |
Wenn der Toast nicht erscheint, prüf zuerst noch einmal den Schalter des Embeds und dann die Regeln des URL-Targetings, die die angezeigte Seite womöglich ausschließen.
Häufige Fragen
Muss ich theme.liquid bearbeiten oder ein Script einfügen?
Nein. Das Theme App Embed übernimmt das Laden. Theme-Dateien zu bearbeiten ist unnötig, und wir raten davon ab, weil Theme-Updates manuelle Änderungen überschreiben können.
Macht die Installation der App meinen Shop langsamer?
Das Script ist etwa 6 KB gzipped groß und lädt asynchron nach dem Seiteninhalt. Es blockiert das Rendering nicht.
Kann ich dasselbe Provedly-Konto auch für eine Website ohne Shopify nutzen?
Ja. Websites auf anderen Plattformen nutzen das Script-Tag und Stripe-Webhooks für die Verifizierung. Ab Starter sind mehrere Websites enthalten; der Free-Plan enthält eine.
Installiere aus dem App Store und bring noch heute einen verifizierten Toast live; die Pläne findest du unter /de/pricing.