Aplikacja mobilna PWA w sklepie Shoper — jak włączyć krok po kroku

Adrian Zblewski · Founder GrowCommerce · Platynowy Partner Shoper

Nie każdy sklep potrzebuje własnej aplikacji w Google Play i App Store. W Shoperze możesz włączyć PWA (Progressive Web App): klient dodaje sklep do ekranu głównego telefonu i otwiera go jak aplikację, na pełnym ekranie i bez paska przeglądarki. Poniżej pokazujemy, jak to uruchomić, co sprawdzić wcześniej i jak zachęcić klientów do instalacji.

Czym jest PWA w sklepie Shoper

PWA to strona sklepu, którą klient może dodać do ekranu głównego telefonu. Po dotknięciu ikony sklep otwiera się na pełnym ekranie, jak zwykła aplikacja. Nie musisz budować osobnej aplikacji ani jej utrzymywać, bo dane są te same co w sklepie: produkty, ceny i stany. Sklep szybciej się ładuje przy powrotach, a przy słabym zasięgu może pokazać treści pobrane podczas poprzedniej wizyty.

Ikona na ekranie głównym przypomina klientowi o sklepie za każdym razem, gdy odblokowuje telefon. To dobre uzupełnienie newslettera i reklam. Na telefonie liczy się też szybkość, o której piszemy w artykule „Szybkość sklepu Shoper i Core Web Vitals”.

Zanim włączysz: wymagania

PWA wymaga certyfikatu SSL, czyli sklepu działającego w całości na HTTPS. Klient powinien mieć jedną z trzech najnowszych wersji przeglądarki. Jeśli w szablonie modyfikowany był plik header.tpl, włączenie PWA może sprawiać problemy, więc przed startem sprawdź zmiany w nagłówku albo poproś o to wdrożeniowca. Jak sprawdzić SSL i zabezpieczenia, opisujemy w tekście „Bezpieczeństwo i SSL w sklepie na Shoperze”.

Jak włączyć PWA krok po kroku

Krok 1: otwórz ustawienia aplikacji mobilnej

Zaloguj się do panelu administracyjnego i przejdź do Wygląd i treści > Mobilna wersja sklepu (PWA).

Krok 2: ustaw nazwę, ikonę i kolory

Nazwa powinna być krótka, bo pod ikoną na telefonie mieści się tylko kilkanaście znaków. Ikona musi być kwadratowa i czytelna w małym rozmiarze. Najlepiej sprawdza się sygnet albo pierwsza litera marki, a nie pełne logo z napisem. Kolory dobierz do barw sklepu.

Krok 3: zapisz i sprawdź na telefonie

Zapisz ustawienia i otwórz sklep na własnym telefonie. Na Androidzie po chwili powinna pojawić się propozycja dodania aplikacji. Na iPhonie dodasz sklep ręcznie z menu Safari. Sprawdź, jak wygląda ikona i czy sklep otwiera się na pełnym ekranie.

Krok 4: przejdź ścieżkę zakupu w aplikacji

Otwórz sklep z ikony i przejdź całą ścieżkę: wyszukiwanie, karta produktu, koszyk, logowanie, płatność. Sprawdź, czy przekierowania do bramki płatności wracają do sklepu, a menu i filtry są wygodne bez paska przeglądarki. Nowoczesny wygląd na telefonie daje szablon opisany w artykule „Modern 3.0 Storefront”.

Jak zachęcić klientów do instalacji

Prośba o dodanie aplikacji nie wystarczy, bo wielu klientów ją zamknie. Na iPhonie nie pojawi się wcale. Dlatego przygotuj prostą instrukcję dla obu systemów i pokaż ją tam, gdzie klient jest zadowolony albo zainteresowany sklepem.

Dobrym miejscem jest mail powitalny. W GrowMail dodasz do scenariusza powitania krótki blok z instrukcją dla Androida i iPhone’a. Jak zbierać zapisy, które uruchamiają powitanie, opisujemy w tekście „Formularze zapisu na newsletter w sklepie Shoper”. Drugie miejsce to strona po zakupie i ulotka w paczce z kodem QR prowadzącym do instrukcji.

PWA to co innego niż powiadomienia web push w panelu sklepu, które informują Ciebie o zamówieniach. Jak je włączyć, pokazujemy w poradniku „Powiadomienia o zamówieniach w Shoperze”.

Jak mierzyć efekty

Jeśli sklep ma podpiętą analitykę Google, zobaczysz liczbę instalacji aplikacji i wejść z ikony na ekranie głównym. Porównuj konwersję i wartość koszyka klientów wracających z aplikacji z resztą ruchu mobilnego. Jeśli konwersja na telefonie jest niska, zacznij od szybkości i koszyka. Gdzie szukać przyspieszenia, opisujemy w przewodniku „Jak przyspieszyć sklep Shoper”. Lekkie grafiki pomagają też w aplikacji, o czym piszemy w tekście „Lazy loading grafik na Shoperze”.

Na małym ekranie liczą się też elementy koszyka. Pasek darmowej dostawy z GrowCart i progi rabatowe z GrowPromo mają widoki dopasowane do telefonu.

Checklista: PWA w sklepie Shoper

• Sklep działa w całości na HTTPS.
• Sprawdziłem, czy plik header.tpl był modyfikowany.
• PWA jest włączone w Wygląd i treści > Mobilna wersja sklepu (PWA).
• Nazwa aplikacji jest krótka, a ikona czytelna w małym rozmiarze.
• Dodałem sklep do ekranu głównego na Androidzie i iPhonie.
• Przeszedłem w aplikacji całą ścieżkę zakupu z płatnością.
• Klienci znajdą instrukcję w mailu powitalnym i na stronie sklepu.
• Sprawdzam instalacje i wejścia z aplikacji w analityce.

Najczęstsze pytania

Czy PWA to to samo co aplikacja w Google Play?

Nie. PWA to strona sklepu dodana do ekranu głównego telefonu. Nie trzeba jej publikować w sklepie z aplikacjami ani osobno aktualizować.

Czy PWA działa na iPhonie?

Tak, ale klient dodaje sklep ręcznie: w Safari dotyka ikony udostępniania i wybiera „Do ekranu początkowego”. Dlatego warto pokazać mu instrukcję.

Co jest potrzebne do włączenia PWA w Shoperze?

Certyfikat SSL w sklepie i aktualna przeglądarka po stronie klienta. Przy zmodyfikowanym pliku header.tpl włączenie może wymagać poprawek w szablonie.

Gdzie włączyć PWA w panelu Shoper?

W panelu administracyjnym w sekcji Wygląd i treści > Mobilna wersja sklepu (PWA). Tam ustawisz też wygląd aplikacji.

Jak sprawdzić, ilu klientów zainstalowało aplikację?

W Google Analytics, jeśli sklep ma podpiętą analitykę. Zobaczysz liczbę instalacji i wejść z aplikacji.

Adrian ZblewskiFounder GrowCommerce — Platynowy Partner ShoperFounder GrowCommerce — Platynowego Partnera Shoper z 8-letnim doświadczeniem i ponad 1020 wdrożeniami. GrowCommerce tworzy szablony rodziny Modern (Modern 3.0 Storefront), aplikacje GrowX i GrowMail — e-mail marketing dla Shopera.Wszystkie wpisy autora