Powiadomienia w sklepie

Gdy klienci dodają produkty do koszyka, zmieniają zawartość szuflady koszyka aplikacji, finalizują zakup lub stosują kod rabatowy, aplikacja wyświetla w sklepie krótki komunikat o powodzeniu lub błędzie. Funkcja Storefront notifications pozwala wybrać wygląd tych komunikatów.

Dostępne są trzy style:

• Toast – mały komunikat w rogu ekranu.
• Modal – wyskakujące okno na środku ekranu z przyciskiem OK. Pozostaje na ekranie, dopóki klient go nie zamknie.
• Banner – pasek u góry lub u dołu ekranu.

Kroki zarządzania

1. Otwórz Storefront notifications

   W aplikacji kliknij Add-on Features, znajdź Storefront notifications i kliknij Customize.

2. Wybierz styl domyślny

   W sekcji Notification style wybierz Default style: Toast, Modal lub Banner. Każdy komunikat używa tego stylu, chyba że w następnym kroku wybierzesz inny dla jego funkcji.

   

3. Wybierz styl dla poszczególnych funkcji (opcjonalnie)

   W sekcji Style per feature pozostaw Default lub wybierz inny styl dla grupy komunikatów:

   • Add to cart – produkty dodawane do koszyka przez aplikację: ze stron produktów, Quick Buy, Quick Order Form lub szuflady koszyka hurtowego aplikacji.
   • Cart updates – zmiany w szufladzie koszyka hurtowego aplikacji, takie jak aktualizacja koszyka oraz zapisanie lub usunięcie adresu.
   • Checkout & Pay later – błędy podczas finalizacji zakupu oraz komunikaty o powodzeniu i błędach zamówień Pay later.
   • Discount code – komunikaty pola kodu rabatowego aplikacji, na przykład gdy kod zostanie zaakceptowany lub nie jest ważny dla produktów w koszyku.

   Przykład: pozostaw Toast jako styl domyślny i wybierz Modal dla Checkout & Pay later, aby klienci nie przeoczyli potwierdzenia Pay later.

4. Dostosuj każdy styl

   Ustaw wygląd każdego stylu w jego własnej sekcji. Pozostaw kolor pusty, aby użyć domyślnego wyglądu.

   Styl Toast

   • Auto hide – domyślnie włączone. Wyłącz, aby każdy toast pozostawał na ekranie, dopóki klient go nie zamknie.
   • Design – Classic, Card, Soft lub Pill.
   • Position – Top right, Top left, Bottom right lub Bottom left.
   • Auto hide after – od 2 do 30 sekund. Domyślnie 5.
   • Success background, Error background i Text color.

   Styl Modal

   • Design – Classic, Card lub Dialog.
   • Button background i Button text – kolory przycisku OK.
   • Corner radius – od 0 do 40 px.

   Styl Banner

   • Auto hide – domyślnie włączone. Wyłącz, aby baner pozostawał na ekranie, dopóki klient go nie zamknie.
   • Design – Classic, Soft lub Floating.
   • Position – Top lub Bottom.
   • Auto hide after – od 2 do 30 sekund. Domyślnie 5.
   • Success background, Error background i Text color.

5. Wyświetl podgląd i zapisz

   W sekcji Preview wybierz Preview template, a następnie kliknij Show success lub Show error, aby zobaczyć dany styl z Twoimi ustawieniami. Podgląd używa tych samych szablonów co Twój sklep.

   

   Kliknij Save.

Warto wiedzieć

• Klienci zamykają Modal przyciskiem OK, przyciskiem ×, kliknięciem poza oknem lub klawiszem Esc. Modal nigdy nie zamyka się samoczynnie.
• Na ekranie może być jednocześnie do pięciu toastów. Gdy pojawi się szósty, najstarszy jest usuwany.
• Jednocześnie wyświetlany jest tylko jeden modal i jeden baner. Nowy komunikat zastępuje ten, który jest na ekranie.
• Gdy zamówienie Pay later zakończy się powodzeniem i wyświetli się komunikat o sukcesie, aplikacja czyści koszyk i przeładowuje stronę. W przypadku Modal strona przeładowuje się po zamknięciu okna przez klienta, aby mógł najpierw przeczytać komunikat. W przypadku Toast lub Banner przeładowuje się po kilku sekundach.
• Tekst komunikatów edytuje się tak samo jak inne teksty w sklepie. Zobacz Edytowanie i tłumaczenie treści niektórych funkcji aplikacji.
• Potrzebujesz innego sposobu wyświetlania powiadomień? Kliknij Contact support w sekcji Notification style, a nasz zespół Ci pomoże.

Notatka

Ważne: upewnij się, że osadzenie aplikacji jest aktywne w Twoim motywie, w przeciwnym razie te ustawienia nie będą działać w sklepie. Zobacz Aktywacja/dezaktywacja aplikacji w motywie.

Potrzebujesz pomocy?

Jeśli napotkasz jakiekolwiek trudności podczas wykonywania tych kroków, skontaktuj się z nami bez wahania, pisząc na adres e-mail [email protected].