Storefront-Benachrichtigungen

Wenn die Kundschaft Produkte in den Warenkorb legt, den Warenkorb-Drawer der App ändert, zur Kasse geht oder einen Rabattcode anwendet, zeigt die App in Ihrem Onlineshop eine kurze Erfolgs- oder Fehlermeldung an. Mit Storefront notifications legen Sie fest, wie diese Meldungen aussehen.

Es gibt drei Stile:

• Toast – eine kleine Meldung in einer Ecke des Bildschirms.
• Modal – ein Popup in der Bildschirmmitte mit einem OK-Button. Es bleibt sichtbar, bis die Person es schließt.
• Banner – eine Leiste am oberen oder unteren Bildschirmrand.

Schritte zur Verwaltung

1. Storefront notifications öffnen

   Klicken Sie in der App auf Add-on Features, suchen Sie Storefront notifications und klicken Sie auf Customize.

2. Standardstil auswählen

   Wählen Sie unter Notification style den Default style: Toast, Modal oder Banner. Alle Meldungen verwenden diesen Stil, sofern Sie im nächsten Schritt für die jeweilige Funktion keinen anderen wählen.

   

3. Stil pro Funktion auswählen (optional)

   Lassen Sie unter Style per feature die Einstellung Default oder wählen Sie für eine Gruppe von Meldungen einen anderen Stil:

   • Add to cart – Produkte, die die App in den Warenkorb legt: von Produktseiten, über Quick Buy, das Quick Order Form oder den Wholesale-cart-Drawer der App.
   • Cart updates – Änderungen im Wholesale-cart-Drawer der App, etwa beim Aktualisieren des Warenkorbs oder beim Speichern oder Löschen einer Adresse.
   • Checkout & Pay later – Fehler an der Kasse sowie die Erfolgs- und Fehlermeldungen von Pay-later-Bestellungen.
   • Discount code – Meldungen des Rabattcode-Felds der App, zum Beispiel wenn ein Code akzeptiert wird oder für die Artikel im Warenkorb nicht gültig ist.

   Beispiel: Behalten Sie Toast als Standardstil bei und wählen Sie Modal für Checkout & Pay later, damit die Kundschaft die Pay-later-Bestätigung nicht übersieht.

4. Jeden Stil anpassen

   Legen Sie das Aussehen jedes Stils in dessen eigenem Bereich fest. Lassen Sie eine Farbe leer, um das Standarddesign zu verwenden.

   Toast style

   • Auto hide – standardmäßig eingeschaltet. Schalten Sie es aus, damit jeder Toast sichtbar bleibt, bis die Person ihn schließt.
   • Design – Classic, Card, Soft oder Pill.
   • Position – Top right, Top left, Bottom right oder Bottom left.
   • Auto hide after – von 2 bis 30 Sekunden. Standard ist 5.
   • Success background, Error background und Text color.

   Modal style

   • Design – Classic, Card oder Dialog.
   • Button background und Button text – die Farben des OK-Buttons.
   • Corner radius – von 0 bis 40 px.

   Banner style

   • Auto hide – standardmäßig eingeschaltet. Schalten Sie es aus, damit das Banner sichtbar bleibt, bis die Person es schließt.
   • Design – Classic, Soft oder Floating.
   • Position – Top oder Bottom.
   • Auto hide after – von 2 bis 30 Sekunden. Standard ist 5.
   • Success background, Error background und Text color.

5. Vorschau ansehen und speichern

   Wählen Sie unter Preview ein Preview template und klicken Sie dann auf Show success oder Show error, um diesen Stil mit Ihren Einstellungen zu sehen. Die Vorschau verwendet dieselben Vorlagen wie Ihr Onlineshop.

   

   Klicken Sie auf Save.

Gut zu wissen

• Ein Modal wird mit OK, mit dem ×-Button, durch einen Klick außerhalb oder mit der Taste Esc geschlossen. Ein Modal schließt sich nie von selbst.
• Es können bis zu fünf Toasts gleichzeitig angezeigt werden. Kommt ein sechster hinzu, wird der älteste entfernt.
• Es wird immer nur ein Modal und ein Banner gleichzeitig angezeigt. Eine neue Meldung ersetzt die angezeigte.
• Wenn eine Pay later-Bestellung erfolgreich ist und die Erfolgsmeldung angezeigt wird, leert die App den Warenkorb und lädt die Seite neu. Bei Modal wird die Seite neu geladen, sobald die Person das Popup schließt, sodass die Meldung vorher gelesen werden kann. Bei Toast oder Banner erfolgt das Neuladen nach einigen Sekunden.
• Der Text der Meldungen wird wie anderer Shop-Text bearbeitet. Siehe Inhalte für einige Funktionen der App bearbeiten und übersetzen.
• Sie brauchen eine andere Darstellung der Benachrichtigungen? Klicken Sie im Bereich Notification style auf Contact support – unser Team hilft Ihnen gern weiter.

Hinweis

Wichtig: Stellen Sie sicher, dass die App-Einbettung in Ihrem Theme aktiviert ist, sonst gelten diese Einstellungen nicht in Ihrem Onlineshop. Siehe App im Theme aktivieren/deaktivieren.

Brauchen Sie Hilfe?

Sollten bei diesen Schritten Schwierigkeiten auftreten, zögern Sie nicht, uns umgehend per E-Mail an [email protected] zu kontaktieren.