Jeżeli jesteś na planie Shopify Plus i potrzebujesz zaktualizować swój checkout do nowej wersji, ten przewodnik przedstawi Ci wszystkie niezbędne informacje, które umożliwią przeprowadzenie tej operacji samodzielnie.

Co to jest checkout.liquid i dlaczego Shopify z niego rezygnuje?

Checkout.liquid to plik napisany w języku liquid odpowiedzialny za wyświetlanie strony realizacji zakupu. W przypadku planów niższych niż Shopify Plus jest on nieedytowalny - co oznacza, że jego modyfikacja jest praktycznie niemożliwa. W przypadku sprzedawców Shopify Plus możliwe było odblokowanie tego pliku i wprowadzanie modyfikacji (głównie przez dewelopera), co wiązało się z ryzykiem, że w krytycznej części ścieżki zakupowej pojawi się błąd, a nawet przerwa w działaniu  sklepu.

Wraz z wydaniem nowej wersji Checkoutu (One Page Checkout), Shopify zdecydowało się rozszerzyć możliwości modyfikacji tego wycinka e-commerce o wiele więcej możliwości. Ponadto niektóre zmiany można teraz będzie wprowadzić bez pomocy programisty. Dla deweloperów możliwości będą jednak znacznie większe niż dotychczas.

Checkout Extensions

Jeżeli śledzisz nasze treści lub próbowałeś/aś wprowadzić większe zmiany w procesie składania zamówienia, to na pewno masz świadomość, że Shopify ogranicza możliwości w tym miejscu. W praktyce sprowadza się to do "stylowania" (wyświetlenie swojego logo, zmiany kolorów) czy ukrycia niektórych pól formularza, wyświetlania wybranych metod dostawy i płatności. Bardzo często było to zresztą przedstawiane jako wada tego i innych rozwiązań ecommerce w modelu SAAS (software as a service). W rzeczywistości polityka ta wynikała z kilku czynników - gwarancja poprawnego działania sklepu i utrzymanie wysokiego poziomu konwersji, a tym samym satysfakcji sprzedawcy z platformy. Testy porównawcze Shopify z innymi głównymi platformami ecommerce pokazują, że checkout Shopify nadal jest najlepiej konwertującym checkoutem świata. E-commerce jednak ewoluuje, pojawiają się nowe narzędzia (np. personalizacja, programy lojalnościowe), większe potrzeby sprzedawców (np. unikalny proces składania zamówienia czy nietypowa promocja), a nawet całe modele biznesowe (np. subskrypcja). Shopify wychodzi na przeciw tym potrzebom i otwiera się na nowe możliwości jednocześnie zachowując bezpieczeństwo i stabilność procesu realizacji zakupów online.

‍

Checkout Extensions to termin określający cały zestaw narzędzi, które pomogą rozszerzyć możliwości dostosowania checkoutu do potrzeb sprzedawców i ich klientów. Zarówno sami sprzedawcy, jak i programiści Shopify bez wątpienia docenią nowe narzędzia. 

Zmiany niewymagające pracy developera

Zacznijmy od modyfikacji, które nie będą wymagały pracy programisty i będą możliwe do przeprowadzenia przez sprzedawców samodzielnie.

Edytor checkoutu

Checkout editor to narzędzie do wizualnej edycji strony - dostępne dla sklepów, które już przeszły na Checkout Extensibility. Można je odnaleźć na dwa sposoby:

• Ustawienia > Checkout  (w tym miejscu możesz stworzyć kilka wersji checkoutu i używać ich wymiennie na potrzeby testów, lub jako środowiska testowe i produkcyjne)
• Kanały sprzedaży > Sklep online > Szablony > Dostosuj

💡 Find out more about the all-new drag-and-drop checkout editor

‍

‍

Aplikacje Checkout z Shopify Apps store

Z poziomu edytora checkout z łatwością znajdziesz i zainstalujesz dodatkowe aplikacje rozszerzające domyślne możliwości checkout'u. Autorzy aplikacji prześcigają się w pomysłach poprawiających kluczowe metryki e-commerce jak CRO, AOV, LTV czy ROAS. Skonfigurowane moduły / widgety zainstalowanych aplikacji mogą być następnie wyświetlane i przeciągane metodą drag&drop w edytorze.

Shopify pixels manager

Piksele to fragmenty kodu JavaScript, które są uruchamiane w sklepie internetowym – m.in. podczas realizacji zakupu. Można nimi zarządzać w sekcji Customer events w panelu administracyjnym. Ich podstawową funkcją jest udostępnianie danych o zachowaniu klientów. Przeważnie do celów marketingowych i analitycznych, ale nie tylko. Inne korzyści to dodatkowa warstwa kontroli (jakie dane udostępniam i komu), zapobieganie wykonywaniu kodu javascript stron trzecich oraz wbudowane narzędzia do zapewnienia zgodności z przepisami dotyczącymi prywatności.

Rozliczne gotowe piksele są dostępne w sklepie z aplikackami Shopify. Developerzy mogą naturalnie rozwijać swoje własne aplikacje instalujące na stronie piksele.

Nowe narzędzia dla developerów

Przejdźmy do narzędzi i modyfikacji, które mogą wykonać tylko doświadczeni programiści.

Branding API

Jeżeli potrzebujesz więcej możliwości zmiany wyglądu Twojego checkoutu, z pomocą przychodzi Branding API. Z pomocą paru linijek kodu można zmodyfikować wygląd m.in. formularzy, typografii czy detali w stylu zaokrągleń pól i obrazka favicon.

Zmiany wprowadzone za pomocą Branding API odpowiadają za wygląd stron checkoutu, ale też konta klienta i zainstalowanych rozszerzeń. Dzięki temu jesteś w stanie zarządzać spójnością wizualną serwisu, co przekłada się na pozytywne doświadczenia użytkownika.

‍

Checkout UI Extensions

Rozszerzenia UI pozwolą developerom tworzyć unikalne moduły wizualne, "klocki", z których można później budować checkout, co można było dostrzec już w powyższym opisie edytora. Dzięki rozszerzeniom UI można zmienić wszystkie lub poszczególne kroki checkoutu - informacja o produktach, shipping, płatności, podsumowanie.

Oto kilka przykładów i pomysłów, co można stworzyć za pomocą tych rozszerzeń:

• sekcja do "dosprzedaży" kolejnych produktów
• moduł subskrypcji
• zbieranie dodatkowych danych od klientów - np. miejsce na wpisanie dedykacji lub życzeń dołączanych do zamówienia pakowanego na prezent
• dodatkowe powiadomienia i ostrzeżenia
• dodatkowe elementy formularza - np. checkbox "zapakuj na prezent", wyślij do kogoś innego
• sekcja pozwalająca zrealizować kupon rabatowy - wyświetlenie informacji o terminie jego ważności
• identyfikacja tożsamości klienta w celu przyznania mu punktów w programie lojalnościowym

Z punktu widzenia developera bardzo dobrą informacją jest możliwość używania Storefront API z poziomu UX extensions. Co oznacza, że jesteśmy w stanie sprawdzić i wykorzystać dodatkowe informacje takie jak np. tagi, którymi został oznaczony klient i zaproponować inną logikę procesu składania zamówienia.

Web pixel app extension

Rozszerzenia pikseli są podobne do rozszerzeń UI. Deweloperzy mogą tworzyć własne fragmenty kodu, do śledzenia zachowań użytkownika (tzw. eventy klienta). Zanim stworzymy swój własny piksel, dobrą praktyką jest sprawdzenie wśród gotowych rozwiązań, czy nie istnieje już jakaś "sprawdzona w boju" - przetestowana i stabilna alternatywa. Tworząc i instalując piksele należy brać pod uwagę, że każdy kolejny skrypt, który dodasz spowolni stronę i wpłynie na jej wydajność, a tym samym na konwersje.

Shopify Functions

Użytkownicy planu Shopify Plus, którzy zaktualizowali już checkout do nowej wersji mogą teraz korzystać z Functions API. Mówiąc w uproszczeniu - funkcje Shopify pozwalają developerom budować zupełnie nową logikę procesów odpowiedzialnych za działanie sklepu - kilka przykładów:

• tworzenie nowego typu zniżki ponad te, które oferuje natywnie Shopify
• dostosowanie płatności - ukrywanie wybranych metod w zależności od jakiegoś parametru (np. tagu użytkownika)
• zmianę nazwy opcji dostawy w trakcie zamówienia
• tworzenie zestawów produktów - stworzenie nowego produktu z nowym SKU powstałego z połączenia kilku innych produktów
• dostosowanie reguł dotyczących dostawy

Funkcje napisane przez programistów mogą następnie być zainstalowane przez sprzedawców w sklepie. Sednem tej funkcjonalności jest to, że pozwala ona uzyskać elastyczność dostępną wcześniej tylko w systemach opartych o licencję open-source i jednocześnie zachować bezpieczeństwo, stabilność i niezawodność zamkniętych rozwiązań typu SAAS.

Post-purchase extension

Na koniec zostawiliśmy do omówienia komponent, który jest jeszcze w fazie beta - rozszerzenia pozakupowe. Póki co można je uruchomić na żądanie. Strona "pozakupowa" pokaże się wtedy klientowi po skończonym procesie składania zamówienia, ale zanim wyświetlimy mu stronę z podziękowaniem i podsumowaniem zakupu. Kilka pomysłów tego, co można zrobić na tym etapie:

• up-selling, cross-selling - dosprzedaż dodatkowych produktów
• ankieta, prośba o feedback
• kupon zniżkowy na następne zakupy
• zapisy do programu lojalnościowego

‍

Co stanie się po 13 sierpnia 2024?

Jak wspomniałem na początku tego artykułu - Shopify przestanie wspierać Shopify Scripts i checkout.liquid od 14 sierpnia 2023. Rok od tego czasu – 13 sierpnia 2024, stara wersja checkoutu zostanie wycofana, przestanie działać. Oznacza to, że merchanci Shopify Plus, którzy modyfikowali z wykorzystaniem tych narzędzi swój proces składania zamówienia automatycznie zaczną korzystać z nowej wersji checkoutu. Jeżeli znajdujesz się w tej grupie, to musisz odpowiednio wcześniej przygotować się do tego procesu i odwzorować mechanizmy zaimplementowane wcześniej na nowej wersji checkoutu.

W jaki sposób przejść na Checkout Extensibility

Zaznajamiając się z niniejszym artykułem wykonałeś/aś pierwszy krok niezbędny do tego procesu - zrozumienie, jakie narzędzia możesz wykorzystać do zbudowania nowego checkoutu.

Kolejny krok to przegląd istniejącego rozwiązania (checkout.liquid) – jakie zmiany zostały wprowadzone i odwzorowanie ich w nowym procesie. Zacznij od oceny, czy rzeczywiście potrzebujesz wszystkich użytych do tej pory rozwiązań (czy dają Ci one jakąś wartość biznesową) i zmapuj je do nowego zestawu narzędzi i funkcjonalności. Będziesz musiał/a zrobić przegląd wizualny – tego co widać na podstronach, ale również przegląd kodu - logiki wg której działa checkout.

Jedna ważna rzecz, o której musisz pamiętać to fakt, że być może nie wszystkie wcześniejsze funkcjonalności będzie można odwzorować 1:1. Dobrym pomysłem będzie porozmawianie z doświadczonym partnerem, które przeprowadził już dziesiątki podobnych operacji.

Zdefiniuj zakres prac i potwierdź go ze wszystkimi niezbędnymi interesariuszami projektu. Zbuduj i przetestuj nową wersję checkoutu. Pamiętaj, żeby stworzyć wersję próbną, którą można przetestować w bezpiecznych warunkach. Po skrupulatnych testach opublikuj nową wersję i na bieżąco monitoruj wszystkie krytyczne mierniki (CRO, AOV), aby mieć pewność, że klienci bez trudu mogą dokończyć składanie zamówienia.

Checkout jest newralgiczną częścią każdego ecommerce - zmiany przeprowadzane w tym obszarze zawsze wiążą się z ryzykiem i mogą być stresujące. Jeżeli potrzebujesz doświadczonego partnera, który zdejmie z Twoich barków chociaż trochę tego ciężaru lub odpowie na Twoje pytania, to polecamy się do usług.

‍

Jeśli masz do nas pytanie w sprawie Checkout Extensibility - uzupełnij poniższy formularz.

‍