Storefront Notifications

Wanneer klanten producten aan de winkelwagen toevoegen, de winkelwagenlade van de app wijzigen, afrekenen of een kortingscode toepassen, toont de app een korte succes- of foutmelding in je webshop. Met Storefront notifications bepaal je hoe deze meldingen eruitzien.

Er zijn drie stijlen:

• Toast — een klein bericht in een hoek van het scherm.
• Modal — een popup midden op het scherm met een knop OK. De popup blijft staan tot de klant hem sluit.
• Banner — een balk boven- of onderaan het scherm.

Stappen om het te beheren

1. Open Storefront notifications

   Klik in de app op Add-on Features, zoek Storefront notifications en klik op Customize.

2. Kies de standaardstijl

   Kies bij Notification style de Default style: Toast, Modal of Banner. Elke melding gebruikt deze stijl, tenzij je in de volgende stap een andere stijl voor die functie kiest.

   

3. Kies een stijl per functie (optioneel)

   Laat bij Style per feature de optie Default staan of kies een andere stijl voor een groep meldingen:

   • Add to cart — producten die de app aan de winkelwagen toevoegt: vanaf productpagina’s, Quick Buy, het Quick Order Form of de Wholesale-winkelwagenlade van de app.
   • Cart updates — wijzigingen in de Wholesale-winkelwagenlade van de app, zoals het bijwerken van de winkelwagen of het opslaan of verwijderen van een adres.
   • Checkout & Pay later — fouten bij het afrekenen en de succes- en foutmeldingen van Pay later-bestellingen.
   • Discount code — meldingen van het kortingscodevak van de app, bijvoorbeeld wanneer een code wordt geaccepteerd of niet geldig is voor de artikelen in de winkelwagen.

   Voorbeeld: laat Toast als standaardstijl staan en kies Modal voor Checkout & Pay later, zodat klanten de Pay later-bevestiging niet missen.

4. Pas elke stijl aan

   Stel het uiterlijk van elke stijl in bij de bijbehorende sectie. Laat een kleur leeg om het standaardlook te gebruiken.

   Toast style

   • Auto hide — standaard ingeschakeld. Schakel dit uit om elke toast op het scherm te houden tot de klant hem sluit.
   • Design — Classic, Card, Soft of Pill.
   • Position — Top right, Top left, Bottom right of Bottom left.
   • Auto hide after — van 2 tot 30 seconden. De standaardwaarde is 5.
   • Success background, Error background en Text color.

   Modal style

   • Design — Classic, Card of Dialog.
   • Button background en Button text — de kleuren van de knop OK.
   • Corner radius — van 0 tot 40 px.

   Banner style

   • Auto hide — standaard ingeschakeld. Schakel dit uit om de banner te houden tot de klant hem sluit.
   • Design — Classic, Soft of Floating.
   • Position — Top of Bottom.
   • Auto hide after — van 2 tot 30 seconden. De standaardwaarde is 5.
   • Success background, Error background en Text color.

5. Bekijk een voorbeeld en sla op

   Kies bij Preview een Preview template en klik op Show success of Show error om die stijl met jouw instellingen te zien. Het voorbeeld gebruikt dezelfde sjablonen als je webshop.

   

   Klik op Save.

Goed om te weten

• Klanten sluiten een Modal met OK, de knop ×, door buiten de popup te klikken of met de toets Esc. Een modal sluit nooit vanzelf.
• Er kunnen maximaal vijf toasts tegelijk op het scherm staan. Komt er een zesde bij, dan wordt de oudste verwijderd.
• Er wordt telkens maar één modal en één banner getoond. Een nieuwe melding vervangt de melding op het scherm.
• Wanneer een Pay later-bestelling slaagt en de succesmelding wordt getoond, leegt de app de winkelwagen en laadt de pagina opnieuw. Bij Modal wordt de pagina opnieuw geladen wanneer de klant de popup sluit, zodat het bericht eerst gelezen kan worden. Bij Toast of Banner gebeurt dat na een paar seconden.
• De tekst van de meldingen bewerk je net als andere webshoptekst. Zie Inhoud van sommige functies van de app bewerken en vertalen.
• Wil je een andere weergave van meldingen? Klik in de sectie Notification style op Contact support en ons team helpt je graag.

Opmerking

Belangrijk: zorg dat de app-insluiting in je thema is geactiveerd, anders worden deze instellingen niet toegepast in je webshop. Zie Activate/Deactivate app in the theme.

Hulp nodig?

Kom je bij deze stappen in de problemen, aarzel dan niet om direct contact met ons op te nemen via het e-mailadres [email protected].