W jaki sposób zaawansowane opracowywanie niestandardowe Shopify zapewnia lepsze wrażenia użytkownika

Dla firmy Paravel, sprzedawcy wysokiej jakości, innowacyjnych i odpowiedzialnie produkowanych bagaży, toreb i innych akcesoriów podróżnych, niestandardowa funkcjonalność jest koniecznością. Produkty, które produkują i sprzedają są jedyne w swoim rodzaju, dlatego oferowanie klientom jedynych w swoim rodzaju doświadczeń zakupowych było konieczne.

Paravel potrzebował wielu podstawowych funkcjonalności eCommerce, aby umożliwić prowadzenie praktycznych operacji za pośrednictwem swojego sklepu internetowego. Pierwotnie zostały one zbudowane na platformie open-source o nazwie Spree, która ma wielu zwolenników i zwolenników ze względu na sam fakt, że jest to platforma open source.

Spree, podobnie jak inne platformy open-source, takie jak Magento, jest niezwykle konfigurowalny. Można go również zintegrować z bardzo dużą liczbą wtyczek i aplikacji innych firm, jest wysoce skalowalny i wykazuje poziom intuicji interfejsu użytkownika, który ułatwia tworzenie interfejsu przyjaznego dla urządzeń mobilnych.

Chociaż jest to tylko krótka migawka różnych funkcji funkcjonalnych Spree, niektóre z nich są tak samo wysokie, jak inne platformy open source. Ich funkcjonalność może być prawie nieograniczona, ale ich wykonanie wymaga dużo czasu i jeszcze większego doświadczenia. Bez dużego doświadczenia w kodowaniu lub doświadczenia w programowaniu platformy takie jak Spree mogą szybko wyczerpać zasoby.

Paravel potrzebował tego jedynego w swoim rodzaju doświadczenia zakupowego, ale potrzebował także nieszablonowego rozwiązania, które oferowało wiele swoim sprzedawcom handlu elektronicznego. Kłopot polegał na tym, jak mogli przenieść swój już skrupulatnie zaprojektowany i opracowany sklep eCommerce ze Spree na bardziej wydajną platformę?

Dokładny proces migracji

Po komunikacji z naszym zespołem sprzedaży Paravel zdecydował, że przejście na Shopify Plus jest odpowiedzią – z kilkoma zastrzeżeniami. Między innymi Paravel nie chciał doświadczyć żadnych negatywnych skutków migracji i chciał, aby ich nowy sklep oferował wszystkie funkcjonalności ich sklepu Spree, a nawet trochę. Aby to zrobić, firma Paravel potrzebowała czegoś więcej niż partnera Shopify Plus – potrzebowali eksperta Shopify Plus.

Podczas gdy Spree oferował niemal nieograniczone opcje dostosowywania, Shopify Plus, jako hostowana platforma eCommerce SaaS, może zaoferować im o wiele więcej. Z pomocą zespołu programistów, takiego jak ^{1Digital Ⓡ} , Shopify Plus może zaoferować im wszystkie dostosowania oferowane przez Spree i nie tylko. Shopify Plus oferował również podwyższone funkcje bezpieczeństwa, gwarantowany czas pracy bez przestojów, dużą szybkość witryny, podobną kompatybilność z aplikacjami i wtyczkami innych firm, akceptację wielu opcji płatności, ogromną skalowalność i wiele więcej. Paravel miał w tym momencie zadanie przeniesienia istniejącego sklepu Spree, jego projektu i funkcjonalności, do Shopify Plus.

Dla niektórych proces migracji strony internetowej jest wstrząsający, ale wiedzieliśmy inaczej. Dzięki setkom udanych migracji w widoku wstecznym i zespołowi programistów, którzy wspierali nasze wysiłki, wiedzieliśmy, że można to zrobić bez żadnych problemów. Wymagałoby to tylko dokładnego procesu.

Proces był intensywny, ale nic ^{1Digital Ⓡ} Agency nie mogło wykonać śpiewająco. Projekt wymagał migracji 32 pól produktów (w tym nazw, opisów, zdjęć, cen i nie tylko) oraz ponad 4000 kont klientów i zamówień. Aby to zrobić, skonfigurowaliśmy tymczasowy serwer Linux i napisaliśmy niestandardowy skrypt, który rysował i kategoryzował te informacje z inwentarza Spree ich oryginalnej witryny.

Aby to przenieść, stworzyliśmy kolejny niestandardowy skrypt, aby połączyć się z Shopify API przed prawidłowym zaimportowaniem wszystkich odpowiednich pól. W trakcie procesu i po nim dane były sprawdzane, aby upewnić się, że trafiają prawidłowo do nowego sklepu, tak aby nie tylko nic nie zostało utracone, ale wszystkie zapełniły się tam, gdzie miały trafić.

Nasz dokładny proces zapobiegł utracie danych, ale co z utratą ruchu? Jeśli jest coś, co odstrasza klientów eCommerce przed perspektywą zmiany platformy (nawet jeśli przyniesie to ogromne korzyści), to strach przed utratą ruchu lub autorytetu domeny.

Na szczęście nasz proces migracji zapobiega uszkodzeniom SEO równie skrupulatnie, jak zapobiega utracie danych. W przypadku Paravel, tak jak robiliśmy to w przypadku każdego projektu migracji, zebraliśmy wszystkie adresy URL powiązane z ich witryną, a następnie skonfigurowaliśmy przekierowania 301 do powiązanych adresów URL w nowej witrynie Shopify. Nic dziwnego, że po zakończeniu migracji Paravel nie odnotował żadnych strat w ruchu ani wahań w rankingu.

Wsparcie – na wszelki wypadek

Migracja do Shopify przebiegła bez żadnych problemów, a Paravel był na dobrej drodze do nowego sklepu Shopify Plus z ulepszoną funkcjonalnością i lepszym doświadczeniem użytkownika, ale dla pewności dołączyliśmy bezpłatny 30-dniowy okres wsparcia do projektu migracji . Każda agencja migracji Shopify ze sprawdzonym procesem powinna to zrobić; to po prostu nieodłączna część skutecznej strategii migracji.

Długość bezpłatnych okresów wsparcia różni się w zależności od zakresu projektu, ale w przypadku migracji Paravela przeznaczyliśmy 30 dni. To dało im cały miesiąc czasu na zbadanie swojej nowej strony internetowej i naprawienie wszelkich błędów związanych z migracją, które mogą się pojawić – które naprawilibyśmy bezpłatnie.

Nawet później pozwoliliśmy im pozostać na rachunkach, nie żądając od nich depozytu; po prostu naliczanie opłat za wszelkie zmiany, które zarejestrowaliby po zakończeniu bezpłatnego okresu wsparcia witryny. Takie małe rzeczy mają długą drogę do zapewnienia dobrej obsługi klienta, a my dążymy do tego, aby migracje przebiegały sprawnie, nawet gdy wszystko jest sprawdzane, dwukrotnie sprawdzane i sprawdzane ponownie.

Nowo opracowana strona internetowa

Ale to nie koniec migracji. Paravel określił kryteria przeprowadzki związane z doświadczeniem klienta, które oferowałaby nowa witryna, i aby to zapewnić, musieliśmy dla nich opracować zupełnie nową witrynę Shopify Plus.

W ramach projektu deweloperzy agencji ^{1Digital Ⓡ} stworzyli dla nich zupełnie nową stronę główną, która była lepiej zintegrowana z marką i pomagała pozycjonować ich produkty w bardziej pożądanym świetle. Zawierała zaktualizowane zdjęcia produktów i tła, które lepiej pasowały do ​​zainteresowań i postrzegania ich rynku docelowego. Pomyśl o eleganckim, wyrafinowanym wyglądzie nowej strony głównej poniżej, z kadrem ze starej strony głównej poniżej.

Dla odwiedzających ich stronę główną nowy układ jest natychmiast uderzający nie tylko ze względu na doskonałą estetykę obrazów, ale także ze względu na najbardziej skoordynowany wysiłek, jaki wkłada w umieszczenie wartości produktów firmy Paravel na pierwszym planie. Zauważysz również, że u góry nowego układu strony głównej znajduje się menu, którego brakowało w poprzednim projekcie; wcześniej sposobem na dostęp do ich produktów było przewinięcie strony do miejsca, w którym znajdował się przycisk oznaczony „sklep z kolekcją”. Nowa strona oferuje znacznie lepsze funkcje nawigacji po witrynie, jak widać powyżej.

Przewijając stronę główną, odwiedzający mogą zobaczyć recenzje za pomocą przesuwanego banera, dowiedzieć się więcej o popularnych kategoriach produktów, a nawet zobaczyć, jak klienci korzystają z produktów za pośrednictwem mediów społecznościowych, jak widać na niektórych zrzutach ekranu poniżej.

Oprócz strony głównej, ^{1Digital Ⓡ} stworzył nowy szablon strony kategorii wraz ze stroną „Nasza historia” dla Paravela, oprócz kilku innych stron systemowych. Wśród tych stron, które zostały opracowane, znalazły się strony koszyka i kasy, strony logowania, strony bonów upominkowych i strony z podziękowaniami. Na koniec dostosowaliśmy wiele stron z treścią, w tym ich strony „FAQ” i „Warunki”.

Znaczenie wysokiej jakości responsywnej strony internetowej ma obecnie kluczowe znaczenie dla handlu elektronicznego, a programiści ^{1Digital Ⓡ} starannie przygotowali zaktualizowaną responsywną stronę internetową dla firmy Paravel w ramach projektu. W trosce o wygodę użytkownika Paravela, nowy responsywny projekt ^{1Digital Ⓡ} automatycznie dostosowuje się do mniejszych ekranów, odpowiednio zmieniając rozmiar i formatowanie tekstu.

Zaawansowany rozwój – funkcjonalność strony kategorii

Kiedy programiści ^{1Digital Ⓡ} przenieśli wszystkie informacje związane z kategoriami produktów firmy Paravel, dodaliśmy również kilka nowych funkcji, które mogli przekazać swoim klientom, poprawiając w ten sposób wrażenia klientów.

Zainstalowaliśmy edytor metapola w szablonie strony kategorii, aby Paravel mógł wprowadzać szybkie zmiany w niektórych odznakach, które pojawiały się na ich stronie kategorii. Dzięki temu mogli edytować pola niestandardowe, aby promocje związane z „nowymi”, „bestsellerami” lub „polecanymi” produktami były bardziej widoczne.

Ta pozornie prosta funkcja daje administratorom Paravela dużą moc, pozwalającą na szybkie i łatwe wprowadzanie zmian w wyświetlaniu ich witryny bez współpracy z programistą. Człowiekowi można dać rybę lub nauczyć sztuki, a Paravelowi przekazaliśmy szczegółowe instrukcje dotyczące korzystania z aplikacji i zarządzania nią, aby mógł łatwo wprowadzać zmiany nawet po zamknięciu projektu.

Podobnie programiści ^{1Digital Ⓡ} stworzyli próbki produktów i funkcję szybkiego podglądu na stronach kolekcji firmy Paravel. Stworzyliśmy niestandardowy skrypt dla ich strony kolekcji Shopify Plus, który był w stanie pobrać i wyświetlić żądane informacje.

Skrypt dla tych próbek zapewniał również, że gdy klient kliknie próbkę powiązaną z interesującym kolorem, obraz produktu zostanie wyświetlony w tym kolorze. Ponadto wyświetlałby obowiązujące ceny związane ze zmianą, a także wszelkie opcje „personalizacji” lub, w razie potrzeby, komunikat „brak w magazynie”.

Zaawansowany rozwój – funkcjonalność strony produktu

Paravel kładzie ogromny nacisk na doświadczenie klienta i jako taki wymagał od szablonu strony produktu dużej ilości dodatkowych funkcji, w tym dodatkowych możliwości, które pomogą spersonalizować wrażenia z zakupów.

Dlatego w ramach zaawansowanego aspektu rozwoju projektu, ^{1Digital Ⓡ} pomogło stworzyć nowy i lepszy zestaw funkcji do personalizacji doświadczeń zakupowych na ich stronie internetowej, a konkretnie na stronie produktu.

Skonfigurowaliśmy ich szablon strony produktu tak, aby wyświetlał się podobnie do ich starego sklepu Spree. Następnie utworzyliśmy pasek „dodaj do koszyka”, który pozostawałby na dole strony produktu. To była łatwa część.

Opracowaliśmy również narzędzie do szablonu strony produktu, które pozwala kupującym spersonalizować ich doświadczenie zakupowe i uczynić je bardziej realistycznymi. Oprócz oferowania swoim klientom możliwości zobaczenia, jak dana torba (lub inny produkt) wyglądałaby za pomocą opisanej powyżej funkcjonalności swatch, Paravel daje również swoim klientom możliwość personalizacji swoich produktów.

Paravel był zainteresowany funkcjami zwiększającymi konwersję realistycznego narzędzia, które pozwoliłoby klientom zobaczyć, jak będą wyglądać ich produkty po spersonalizowaniu, dlatego stworzyliśmy narzędzie, które im to umożliwi.

Narzędzie, które zbudowaliśmy dla firmy Paravel, wyświetlało wyskakujące okienko ze słowami „Personalizuj”, gdy klient odwiedzał stronę produktu. Następnie stworzyliśmy narzędzie, które umożliwiłoby klientowi personalizację produktu zgodnie ze stylem i kolorem napisu, który pojawiałby się jako monogram z ich inicjałami.

To narzędzie wyświetla się jako widżet na stronie produktu po kliknięciu przez klienta „Personalizuj” i jest bardzo łatwe do manipulowania i dostosowywania zgodnie z jego preferencjami. Aby upewnić się, że produkt będzie poprawnie wyświetlał personalizację, musieliśmy stworzyć niestandardowy skrypt, który będzie dokładnie wyświetlał wpisane przez klienta litery, w wybranym przez niego stylu, we właściwym obszarze produktu, jak widać na obrazku poniżej. Jako końcowy poziom funkcjonalności stworzyliśmy „Szablon nylonowy”, który umożliwiłby klientom firmy Paravel dostosowanie ich produktów za pomocą haftowanych liter zamiast ręcznie malowanych liter lub aplikacji.

Stworzyliśmy jeszcze kilka dostosowań dla stron produktów firmy Paravel, w tym implementację czterech zakładek ze stron produktów w ich starym sklepie Spree za pomocą kodowania HTML. Odtworzyliśmy również funkcję „Choose Your Own Adventure” ze sklepu Paravel's Spree, która umożliwia klientom dalszą personalizację produktów Paravel za pomocą aplikacji i ręcznie malowanych projektów, a także kilku innych dostosowań, aby zachować integralność oryginalnej funkcjonalności, która pojawiła się na ich sklep Spree.

Integracja z aplikacjami krytycznymi

Aby zabezpieczyć funkcjonalność swojego nowego sklepu Shopify Plus i zapewnić płynną, przyjemną obsługę, agencja ^{1Digital Ⓡ} musiała zintegrować nowy sklep Paravel ze swoimi krytycznymi dla biznesu aplikacjami.

Klienci Paravela polegali między innymi na recenzjach i referencjach, które Paravel był w stanie narysować i wyświetlić za pośrednictwem YotPo, co zapewniliśmy, że jest dla nich bezproblemowo zintegrowany. Paravel w dużym stopniu polegał również na wykorzystaniu Zaiusa do angażowania klientów i CRM, więc przeprowadziliśmy tę integrację, jak również wyżej wymienione.

Oprócz tego Paravel korzysta z funkcjonalności zapewnianej nie tylko przez RJ Metrics, ale także przez Talkable. Te aplikacje dostarczają cennych danych administratorom firmy Paravel i umożliwiają bezpieczne programy marketingowe z poleceniami.

Agencja ^{1Digital Ⓡ} zintegrowała wszystkie te aplikacje z nowym sklepem Paravel, oprócz kodowania i rozwijania nowej witryny Shopify Plus. Zakończyliśmy ten projekt, kompleksowy w zakresie, obejmujący migrację i zaawansowany rozwój niestandardowy, bez zawieszeń. Oznacza to, że klient nie doświadczył zbędnych przerw w działalności, żadnych strat w ruchu i przeniósł się do nowo opracowanego sklepu z zaawansowaną, niestandardową funkcjonalnością bez najmniejszej czkawki. Aby to zrobić, potrzebne jest doświadczenie i dokładne procesy, które ^{1Digital Ⓡ} integruje z naszym przepływem pracy.

Kompletne rozwiązanie

Niektórzy dostawcy dostrajają swoje usługi do jednej lub dwóch wysoce wyspecjalizowanych usług, ale wiemy, że problemy, z jakimi borykają się sprzedawcy eCommerce, są różnorodne. Gdybyśmy byli w stanie oferować tylko usługi programistyczne, nie bylibyśmy w stanie przeprowadzić migracji Paravel ze Spree do Shopify Plus, która jest jedną z wiodących platform eCommerce dla sprzedawców internetowych. Podobnie, gdybyśmy ograniczyli się do przeprowadzania migracji, nie bylibyśmy w stanie dostosować ich nowego sklepu tak, jak chcieli.

Usługi projektowania i rozwoju Shopify Plus, nawet w połączeniu z naszymi usługami migracji, to tylko niewielka migawka tego, co oferuje ^{1Digital Ⓡ} Agency. Oprócz naszych usług niestandardowego projektowania Shopify oferujemy również kompleksowe cyfrowe kampanie marketingowe, w tym wysoce konkurencyjne, dokładnie zbadane i ukierunkowane kampanie SEO i PPC.

Ta historia sukcesu opiera się na fakcie, że udało nam się przenieść Paravel ze Spree do nowo opracowanego sklepu Shopify Plus z zaawansowaną funkcjonalnością. Wiele z naszych innych studiów przypadku eCommerce koncentruje się na innych platformach eCommerce, takich jak projektowanie i rozwój BigCommerce, podobne usługi Magento i cyfrowe kampanie marketingowe. Zapoznaj się z naszym repertuarem, a jeśli chcesz zobaczyć, jak możemy rozwiązać problemy, z którymi boryka się Twój biznes online, zadzwoń do nas pod numer 888-982-8269.

ściągnij PDF