Jak przejść bez głowy z Shopify

Większość witryn eCommerce jest zbudowana na platformach, które jednocześnie zasilają back-end i front-end. Jest to proste rozwiązanie, które umożliwia opłacalną i oszczędzającą czas konserwację witryny, a także łatwe aktualizacje.

Jednak coraz więcej firm eCommerce wymaga doskonałej wydajności i wybiera podejście bezgłowe. Headless oznacza oddzielenie front-endu platformy od back-endu. Oznacza to, że front-end odpowiada za wrażenia użytkownika, treść i projekt. Podejście bez głowy uwalnia nie tylko zespół projektowy, ale także zespół marketingowy, który nie jest już ograniczony możliwościami platformy.

Jeśli jesteś właścicielem sklepu Shopify, nie możesz sobie pozwolić na utratę solidnych funkcji eCommerce Shopify (przetwarzanie płatności, zarządzanie zapasami, zgodność z PCI itd.), ale możesz chcieć zastosować technologię, która znacznie zwiększy szybkość Twojej witryny lub możesz masz zaawansowane wymagania w zakresie zarządzania treścią, złożony katalog produktów lub po prostu chcesz uwolnić się od ograniczeń swojego motywu i stworzyć wysoce unikalną witrynę.

W tym artykule Jak przejść bez głowy z Shopify , przyjrzymy się, jak i dlaczego przejść bez głowy z Shopify oraz markom, które zrobiły to skutecznie, w jaki sposób to zrobiły i jakie korzyści odniosły dzięki temu.

Co to jest Headless Shopify?

Shopify domyślnie zarządza zarówno frontendem, jak i backendem witryny. To doskonały wybór dla firm, które wymagają tylko najbardziej podstawowych funkcji w swoich sklepach.

Ponieważ Headless Commerce oddziela frontend sklepu (lub „head”) od jego funkcji zaplecza (np. zarządzania zapasami, zarządzania treścią i możliwości realizacji), Shopify może być używany w połączeniu z różnymi systemami zarządzania treścią (CMS) do obsługi zawartość sklepu.

Wraz z rozwojem firmy może się okazać, że pewne funkcje lub możliwości projektowe stają się coraz bardziej nieelastyczne. Strategia „jeden rozmiar dla wszystkich” może działać do pewnego momentu, ale wraz z rozwojem Twojej firmy możesz odkryć, że potrzebujesz dodatkowej funkcjonalności poza tym, co zapewnia Shopify Storefront. Często marki wybierają Shopify bez głowy, aby osiągnąć następujące cele:

• Zbuduj witrynę, która ładuje się szybciej dzięki szybkiemu ładowaniu między stronami.
• Zwiększ kontrolę nad wizualną prezentacją swoich produktów.
• Stwórz bardziej elastyczne i proste zarządzanie treścią.
• Mieć strukturę adresu URL, którą można w pełni dostosować.

Na szczęście nie ma potrzeby gruntownej modernizacji ani budowania nowej platformy eCommerce od podstaw. Shopify został zaprojektowany z myślą o separacji, a wraz z rozwojem Twojej firmy może łatwo dostosować frontend, który lepiej spełnia potrzeby Twojej firmy. Tutaj przydaje się ich API dla witryn sklepowych.

Czy Shopify to bezgłowy CMS?

Warto zauważyć, że Shopify posiada bezgłowy CMS. Zintegrowane usługi Shopify sprawiają, że jest to tak potężne narzędzie dla marek eCommerce. Wbudowany system zarządzania treścią Shopify, warstwa tematyczna i edytor , który być może już znasz, bezproblemowo integruje się z pozostałymi funkcjami eCommerce.

Jednak te funkcje są zaprojektowane tak, aby w razie potrzeby działały niezależnie od siebie. Dlatego jeśli potrzebujesz większej elastyczności w sposobie organizowania treści w swoim CMS (Shopify obsługuje tylko cztery predefiniowane typy treści), możesz użyć bardziej wszechstronnego CMS innej firmy, takiego jak Contentful lub Pryzmatyczny, zdefiniować swoje dane w dowolny sposób, a następnie połącz go z Shopify za pomocą interfejsu API przy użyciu funkcji headless.

Shopify i inni dostawcy opracowali solidny zestaw narzędzi, który upraszcza proces znacznie bardziej, niż mogłoby się wydawać. Jeśli jesteś małym sprzedawcą internetowym, CMS Shopify może wystarczyć, ale jeśli skalujesz lub masz model biznesowy zorientowany na urządzenia mobilne, w którym priorytetem jest szybkość, wrażenia klientów i prezentacja, względna prostota Shopify bez głowy i bardziej niezawodne Opcja CMS może uzasadniać budowanie PWA. Możesz skorzystać z tej opcji, korzystając z platformy doświadczenia lub dostawcy usług typu frontend jako usługi, który obejmuje CMS zgodny z Shopify.

Plusy i minusy przejścia bez głowy z Shopify

Plusy bezgłowego Shopify

• Większy stopień kontroli nad wrażeniami klientów : Dzięki architekturze bezgłowej będziesz mieć znacznie więcej możliwości dostosowywania i personalizacji niż w przypadku Shopify typu plug-and-play. Możesz pokonać ograniczenia natywnych funkcji i motywów Shopify i stworzyć wyjątkowe wrażenia wizualne związane z merchandisingiem. Ponadto zyskasz większą kontrolę nad zarządzaniem witryną bez konieczności dodatkowego kodowania lub poświęcania dostosowywania.
• Większa szybkość : szybkość oznacza większą sprzedaż, szczególnie na urządzeniach mobilnych, więc wszystko, co możesz zrobić, aby usprawnić bazę kodu, pomoże Ci dokonać konwersji. Przechodząc bez głowy, możesz użyć bardziej wydajnej techniki dostarczania frontendu. Korzystając z bezgłowego projektu PWA, Twoja przeglądarka ładuje statycznie utworzoną witrynę bez wykonywania dynamicznych żądań do bazy danych, które często są dość powolne.
• Dostosowywane adresy URL w celu poprawy SEO : struktura adresów URL ma kluczowe znaczenie w kierowaniu klientów do Twojej witryny. Shopify jest w rzeczywistości dość sztywny, jeśli chodzi o modyfikację adresu URL. Korzystanie z architektury bezgłowej do tworzenia stron internetowych zapewnia pełną kontrolę nad strukturą adresów URL, co pozwala zmaksymalizować wyniki SEO.
• Skrócony czas wprowadzania na rynek : dzięki dostosowanemu interfejsowi użytkownika połączonemu ze sklepem Shopify Twój zespół marketingowy może szybciej konceptualizować i projektować kampanie, eksperymentując ze stylem witryny i rozmieszczeniem produktu bez wpływu na procedury zaplecza, co skutkuje krótszym czasem od koncepcji do realizacji. Dodatkowo uzyskasz precyzyjną kontrolę nad wyglądem i stylem Twojej marki.

Wady bezgłowego Shopify

• Zanik obsługi aplikacji/usług : gdy przestaniesz korzystać z wbudowanych motywów Shopify, niektóre aplikacje przestaną działać. Jeśli wybierzesz dostawcę frontendu jako usługi, zaoferuje on integracje, które możesz wybrać i ponownie zintegrować. Załóżmy jednak, że Twoja firma dostosowuje frontend Twojego sklepu Shopify za pomocą agencji (lub wybiera określone komponenty Twojej architektury). W takim przypadku musisz zaimplementować unikalny kod, aby umożliwić interfejsom API Shopify identyfikację aplikacji innych firm.
• Dodatkowa złożoność : Dodając kolejną warstwę do swojego stosu eCommerce, automatycznie zwiększasz złożoność swojej operacji. Jeśli wybierzesz dedykowany interfejs, będziesz odpowiedzialny za zarządzanie (co najmniej) dwiema platformami, aby Twoja witryna działała dobrze. Jeśli chcesz skalować, potrzebujesz wewnętrznego zespołu programistycznego, który jest zaznajomiony z Reactem, lub będziesz chciał współpracować z dostawcą frontend-as-a-service i/lub agencją.
• Uwagi dla partnera wdrożeniowego : Posiadanie partnera, który poradzi sobie z technicznymi wymaganiami związanymi z bezgłową sytuacją, pozwalając Tobie i Twoim pracownikom eCommerce skoncentrować się na sprzedaży i marketingu, jest pozytywną zmianą. W takim przypadku należy jednak zachować ostrożność.

Jak przejść bez głowy z Shopify

Krok 1: Wybierz odpowiednią technologię dla swojej witryny sklepowej

Przy wyborze technologii interfejsu użytkownika należy wziąć pod uwagę wiele czynników. Przynajmniej musisz wziąć pod uwagę zestaw umiejętności swojego zespołu programistów i możliwości tej konkretnej technologii, aby dopasować się do celów technicznych i projektowych twojego projektu.

• Zespół Shopify opracował demonstracyjne niestandardowe aplikacje sklepowe, które wykorzystują interfejs API Shopify Storefront. Ponieważ większość przykładów została zbudowana przy użyciu React.js i Ember, powinieneś rozważyć zastosowanie jednej z tych technologii.
• Powinieneś rozważyć użycie statycznego frameworka generatora witryn, takiego jak GatsbyJS lub Next.js. Renderowanie po stronie serwera (SSR) może pomóc ulepszyć optymalizację wyszukiwarek i skrócić TTI (Time to Interactive).
• Dodatkowo rozważ użycie bezgłowego CMS, takiego jak Pryzmat lub Contentful, aby skrócić czas programowania i zwiększyć wydajność.

Krok 2: Wygeneruj token dostępu

Przejdź do obszaru Aplikacje administratora Shopify, a następnie wybierz Zarządzaj prywatnymi aplikacjami .

Wybierz Utwórz nową prywatną aplikację . Wpisz imię i nazwisko oraz adres e-mail.

Wybierz opcję Zezwalaj tej aplikacji na dostęp do danych witryny sklepowej za pomocą interfejsu API Storefront w sekcji API Storefront. Zdefiniuj typy danych, które chcesz udostępnić swojej aplikacji. Kliknij przycisk Zapisz .

Po zapisaniu aplikacji wygenerowany token dostępu do sklepu można znaleźć na dole strony w obszarze Storefront API.

Krok 3: Stwórz jedyną w swoim rodzaju witrynę sklepową

Dobrym pomysłem jest rozpoczęcie od zapoznania się z jedną z niestandardowych aplikacji demonstracyjnych sklepu Shopify. Jeśli zdecydowałeś się użyć React.js w swoim projekcie, możesz przejrzeć repozytorium React-js-buy.

Następnym krokiem jest rozpoczęcie tworzenia niestandardowej witryny sklepowej. Aby zintegrować swoją aplikację React.js z interfejsem API Shopify Storefront, wykonaj następujące kroki:

• Zainstaluj JavaScript Kup moduł SDK za pomocą NPM: npm install --save shopify-buy lub jeśli lubisz Yarn, wybierz przędzę add shopify-buy .

• Import klienta z Javascript Kup pakiet SDK do włączenia do klienta z 'shopify-buy' ; i dostarcz swojej aplikacji następujący obiekt klienta:

• Po ustanowieniu Klienta możesz rozpocząć przesyłanie żądań do Storefront API .

Jakie są opcje Headless, z których możesz wybierać?

Jeśli ustaliłeś, że Twoja witryna sklepowa Shopify wymaga nowego i ulepszonego interfejsu, istnieją trzy podstawowe podejścia. Którą z opcji wybierzesz, będzie zależeć od Twoich unikalnych wymagań biznesowych:

1. Zrób to sam

Rozwijając własną bezgłową architekturę w oparciu o Shopify Plus, zyskujesz własność wszystkich funkcji eCommerce, potencjalnie zwiększając swoją elastyczność. Oznacza to, że nie jesteś związany niczyim systemem i możesz przejąć inicjatywę w zakresie rozwoju i kodowania.

Jednak budowanie architektury bez głowy od samego początku pociąga za sobą znaczny wysiłek w zakresie rozwoju i kodowania. Na przykład motywy Shopify wykorzystują język szablonów Liquid. Ponieważ Liquid nie może być używany bez głowy, jeśli chcesz stworzyć spersonalizowaną witrynę sklepową dostępną za pośrednictwem interfejsu API Shopify Storefront, będziesz potrzebować zespołu zaznajomionego z frameworkami, takimi jak React.js i Ember. Alternatywnie, jeśli budujesz witrynę statyczną, będą musieli znać frameworki, takie jak Next.js lub Gatsby.

2. Rozwijaj się z agencją

Jeśli właściwie wybierzesz swoją agencję, będziesz współpracować z kimś, kto ma duże doświadczenie w tworzeniu stron bez głowy, które współpracują z backendem Shopify i jest dobrze zorientowany we wszystkich potencjalnych zagrożeniach – i jak im zapobiegać! Ponadto agencja może pomóc Ci w bezgłowym prowadzeniu sklepu, albo na zamówienie (jeśli jest to najlepsza opcja dla Ciebie) lub współpracując z dostawcą usług typu frontend jako usługą, aby ukończyć programowanie za pomocą oprogramowania.

Agencja będzie mogła Ci pomóc i doradzić na etapie projektowania oraz posiądzie wiedzę niezbędną do przekształcenia Twojej wspaniałej nowej wizji w rzeczywistość. Będą w stanie przedstawić zalecenia dotyczące tego, które funkcje, układ i nawigacja działają najlepiej z backendem Shopify, pomagając w ten sposób w optymalizacji witryny.

Z drugiej strony nadal będziesz odpowiedzialny za samodzielne zarządzanie swoim sklepem bez głowy. Gdy początkowy projekt i budowa zostaną ukończone, od Ciebie i Twojego personelu technicznego zależy utrzymanie płynnego przebiegu całej operacji, co jest niemałym wyczynem, gdy mamy do czynienia z licznymi ruchomymi elementami Twojego stosu technologicznego. Można to osiągnąć poprzez umowę zaliczkową z agencją partnerską.

3. Użyj Frontend-as-a-Service Provider

Jeśli nie jesteś zainteresowany badaniem, projektowaniem, programowaniem, testowaniem i wdrażaniem patchworku platform i niestandardowych interfejsów API, dostawca frontendu może to zrobić za Ciebie. To, co otrzymujesz, to idealne rozwiązanie, które zawiera wszystko, czego potrzebujesz do obsługi sklepu, a jednocześnie pozostaje w pełni dostosowane do Twoich konkretnych potrzeb.

Zamiast nawigować po wielu warstwach stosu technologii, Twoje zespoły będą mogły zarządzać wszystkimi problemami związanymi z handlem elektronicznym i marketingiem za pomocą intuicyjnego Menedżera doświadczeń, eliminując wiele problemów technicznych związanych z codziennym zarządzaniem witryną.

Korzystanie z platformy doświadczeń nie wyklucza współpracy ze studiem projektowania stron internetowych w celu przebudowania witryny. Wielu dostawców frontend ma firmy partnerskie, które są wyspecjalizowanymi twórcami stron internetowych, co oznacza, że ​​otrzymasz nie tylko fachową pomoc w sprawnym działaniu Twojego sklepu, ale także otrzymasz zupełnie nową stronę internetową!

Niemniej jednak stracisz bezpośrednią kontrolę nad niektórymi bardziej wewnętrznymi komponentami swojego stosu technologicznego. Nie będziesz w stanie po prostu wejść do kodu i wprowadzić kilku zmian, kiedy tylko zechcesz; będziesz musiał omówić pewne techniczne, zakulisowe zmiany z dostawcą frontendu.

Przykłady sklepów bezgłowych Shopify

1. Kanał

Ben Kennedy, partner w thefeed.com, początkowo miał wątpliwości co do poprawy szybkości i wygody użytkownika, które można uzyskać, przechodząc na stronę Shopify bez głowy, więc postanowił przeprowadzić kilka eksperymentów. Po opracowaniu dwóch identycznych wersji swojej witryny, jednej bezgłowej i jednej korzystającej z Shopify Liquid, odkryli, że wersja bezgłowa przewyższa wersję Shopify Liquid, z 5,24% wyższym współczynnikiem konwersji i 10,28% wyższym dochodem na użytkownika .

Poza czystymi liczbami, Ben był pod wrażeniem łatwości, z jaką można było zaimplementować Shogun Frontend, bez konieczności angażowania się jego zespołu w kod bazowy.

2.Faye.co

Ta niemiecka firma jubilerska była kolejnym bezgłowym projektem Shopify dla We Make Websites. Alex przedstawia korzyści, jakie takie witryny mogą zapewnić markom: „Shopify Checkout zawsze był wyjątkowym produktem, który łączy najlepszy w swojej klasie UX (przyjazny dla urządzeń mobilnych, wsparcie dla alternatywnych metod płatności, takich jak Apple Pay, i przejrzysty interfejs użytkownika) z bezpieczna i skalowalna platforma." Zachowujesz wynikające z tego korzyści, a także możliwość utrzymywania katalogu produktów w Shopify”.

Ponadto stwierdził, że „używanie produktu takiego jak Shogun jest dobrym krokiem — replikuje niektóre elementy wtyczek i odtwarzania Shopify, unikając przy tym ogromnego wysiłku programistycznego związanego z budowaniem aplikacji JAMstack, ale z korzyściami płynącymi z bezgłowego (tj. oddzielenie problemów i architekturę, w której każdy komponent jest wyspecjalizowany)” oraz że te witryny są „bezpieczne i szybsze dzięki kompilacjom statycznym”.

3. Paul Valentine

Wspaniały jubiler i zegarmistrz nawiązał współpracę z agencją We Make Websites, aby przebudować swoją stronę internetową dla bezgłowych użytkowników. Podobnie jak wiele innych firm rozważających przeniesienie, Paul Valentine był zaniepokojony utratą łatwości i brakiem kontroli nad utrzymaniem witryny, co może pociągać za sobą migracja z Shopify do czystego „plug and play”.

Jednak według Alexa O'Byrne z We Make Websites kompromisy były tego warte. „W przypadku headless będziesz potrzebować bardziej intensywnie rozwijającego się personelu, przynajmniej przez cały czas tworzenia witryny”.

Wniosek

Bezgłowy stan jest tym, co spędza sen z powiek sprzedawcom internetowym. Spędziłeś lata rozwijając swoją firmę na renomowanej platformie eCommerce tylko po to, by odkryć, że gdy Twoja firma się rozwinęła, przerosłeś jej pierwotne możliwości.

Tworząc bezgłową witrynę sklepową Shopify eCommerce, użytkownicy mogą przeglądać, wyszukiwać i wybierać produkty bez odwiedzania sklepu Shopify. Poza tym umożliwia utrzymanie własnej bazy kodu i szablonów.

Jeśli jesteś rozwijającą się marką korzystającą z Shopify, ale uważasz, że nadszedł czas, aby uzyskać wolność, bezgłowe korzystanie z witryny Shopify nie musi być poważnym problemem rozwojowym.