Pharmasophy Candles&More

Case study: Budowa sklepu dla Pharmasophy Candles & More przy użyciu Webflow oraz konwersja kodu za pomocą Udesly do szablonu Shopify.

W tym wpisie chciałbym podzielić się z Wami ciekawym casem dotyczącym budowy sklepu e-commerce za pomocą Webflow, a raczej budowy szablonu Shopify w Webflow i późniejsze przekonwertowanie go do Shopify za pomocą narzędzia Udesly. Ale zacznijmy od początku. 

1. Klient

Moja klienta zgłosiła się do mnie z zapytaniem o możliwość zbudowania dla niej sklepu e-commerce, w którym sprzedawane byłyby ręcznie robione, ekologiczne świece sojowe, a w niedalekiej przyszłości także inne produkt związane z szeroko pojętym hand made, zapachami i akcesoriami. 

Projekt był o tyle ciekawy i dość rozbudowany, ponieważ na początku miała być to tylko strona przedstawiająca ofertę produktów z możliwością zamówienia przez formularz bez wpiętego modułu płatności, a dopiero później miało być dobudowane do strony e-commerce. Klientka istniała już na rynku i bardzo dobrze prosperowała, ale w tej branży sklep wydawał się must have. Jednym z wymogów było też nie korzystanie z żadnych szablonów oraz nie budowanie tego na Wordpress co od razu ucieszyło mnie bardzo :) 

2. Propozycja wykonania

Widząc w tym bardzo ciekawy case do pierwszego etapu zaproponowałem zbudowanie strony na Webflow przedstawiającej ofertę wszystkich produktów, a zarządzanie całością było oparte na CMS Webflow, natomiast drugim etapem było dobudowanie modułu e-commerce. Jak wiemy Webflow nie ma dość mocno rozbudowanego tego modułu, więc od razu zaproponowałem platformę Shopify do docelowej już obsługi całej strony. Po rozmowie z klientką i przedstawieniu możliwości była akceptacja, więc zabrałem się do roboty. 

3. Etap pierwszy - Projekt strony i sklepu

Projektowanie strony zacząłem od dogłębnej analizy całej struktury i potrzeb klientki. Strona wymagała, żeby były na niej odpowiednie sekcje dotyczące produktów jak nowości, najlepiej sprzedawane, promocję jak i strony dotyczące samej firmy, czyli strony O mnie, strony związane z blogiem, czy opisem procesu twórczego produktów jak i samego przedstawienia produktów. Strona miała mieć konkretną kolorystykę, którą miała odzwierciedlać barwy firmowe. Miałą mieć ona nowoczesną strukturę i layout, ale miał być on zarazem prosty i zrozumiały i prowadzić od góry do dołu odwiedzającego po ofercie oraz przedstawiać firmę jako godną zaufania i to, że produkty wykonywane są z pasji, a strona główna miała być skrótem całej oferty i informacji o firmie. Po akceptacji projektu i zaprojektowaniu wszystkich potrzebnych podstron od strony głównej po karty prezentowe i strony z logowaniem można było przejść do kolejnego etapu jakim było wdrożenie strony na Webflow.

4. Etap drugi - Wdrożenie strony Webflow

Kolejnym etapem było zbudowanie strony w Webflow na podstawie wcześniej wykonanego projektu. Przy budowaniu strony na tym etapie, należało pamiętać, że wszystkich stron na tą chwilę nie potrzebujemy, które zostały zaprojektowane, ponieważ cała oferta miała być obsługiwana za pomocą CMSa, a nie typowego modułu e-commerce. Na tym etapie zostały m.in stworzonę takie strony jak:

• strona główna
• o nas
• proces twórcy
• strona kontaktowa z formularzem 
• strona ofertowa wszystkich produktów z modułem filtrowania 
• strona kategorii produktów z modułem filtrowania
• strona produktowa z opisem, zdjęciami, ceną, wariantami oraz dynamicznym formularzem do zamawiania i zadawania pytań do konkretnego produktu
• strona z blogiem
• strony artykułów blogowych

Proces ten był standardowy, natomiast wykorzystano w nim parę niestandardowych rozwiązań m.in

1. Moduł filtrowania produktów - działający za pomocą atrybutów Finsweet z paroma dodatkami dotyczącymi m.in paginacji produktów, żeby przy filtrowaniu były brane pod uwagę wszystkie produkty w bazie CMS, a nie tylko te co są aktualnie wyświetlane na liście, 
2. Wprowadzenie paru opcji do renderowania listy, wyświetlania tagów filtrujących i usuwania danego filtra. 
3. Filtry działające na wszystkich urządzeniach. 
4. Dodatkową opcją było wykorzystanie paru linijek custom codu w celu wprowadzenia działania polegającego na nie wyświetlaniu sekcji zawierającej dynamiczne listy produktów, czy różnych kolekcji jeśli ta lista byłaby pusta. Przykładowo: klientka usuwa produkty z kolekcji “Promocja” - wtedy sekcja, która odpowiada za wyświetlanie produktów z kolekcji “Promocja” nie będzie się wyświetlać np. na stronie głównej jeśli dana kolekcja będzie pusta.
5. Custom code w celu naprzemiennego (raz po prawej, raz po lewej) wyświetlania produktu w siatce w kolekcji produktów.

Tutaj proces ten był zakończony i został już uruchomiony, żeby klientka mogła już pokazywać oferty swoich produktów. A przede mną był kolejny etap wykonania szablonu Shopify przy użyciu Udesly i języka szablonów Shopify Liquid. Co zostanie opisane w kolejnym etapie. 

5. Etap trzeci - Webflow to Shopify (Udesly)

Kolejnym etapem było przygotowanie i przerobienie istniejącej strony Webflow pod szablon wykorzystywany w Shopify za pomocą narzędzia Udesly, który konwertuje wcześniej przygotowaną stronę w Webflow na szablon sklepu, który można wgrać i używać w Shopify. Jednak nie jest to tak oczywiste i proste jak to zazwyczaj pokazują w narzędziu Udesly, ponieważ jest do tego potrzeba chcąc, czy nie chcąc wiedza na temat tego jak działa Shopify, jak działa i jak wykorzystywany jest język Liquid. 

Pierwszy etap

Pierwszym etapem potrzebnym do całego procesu jest utworzenie w Webflow modułu e-commerce. Webflow dodaje, wtedy elementy charakterstyczne dla ecommerca jak kolekcje produktów i kategorie jak i możliwość dodawania elementów typowych dla e-commerca jak koszyki, checkout itp. 

Drugi etap

Drugim etapem było przygotowanie wszystkich podstron, które wymagane są przez Shopify, aby szablon był w pełni wykorzystany m.in od stron koszyka, stron logowania, tworzenia użytkowników, stron aktywacji kont, kart prezentowych i wiele innych. Stąd odsyłam do Dokumentacji Udesly gdy jest to wszystko dokładnie opisane. 

Strony te musiały mieć nadane odpowiednie nazwy i slugi, zgodnie z dokumentacją.

Trzeci etap

Trzecim etapem było dodanie do określonych elementów na stronach odpowiednich atrybutów, które będą zawijać dane elementy w zmienne, tagi lub logikę liquid. Tutaj przydaje się wiedza jak w ogóle działa język liquid shopify. Wymaga to, żeby backend Shopify w szablonie działał prawidłowo. Dodatkowo całą strukturę sklepu przygotowałem tak, żeby każda sekcja mogła być edytowana przez klienta w panelu Shopify. Wymagało to określenia, które elementy mają być edytowalne, następnie dodanie do nich odpowiednich atrybutów oraz stworzenie z każdej takiej sekcji komponentu Webflow. Po tych operacjach było można włączyć aplikację Udesly i stworzyć szablon Shopify. Konieczne było przepuszczenia strony przez rozszerzenie Udesly, które nadaje automatycznie pozostałe atrybuty dla modułów e-commerce, następnie wyeksportownie kodu i wgranie plików do aplikację Udesly Nexus w celu konwersji kodu na pełnoprawny szablon Shopify. 

Czwarty etap

Czwartym etapem było wgranie szablonu do Shopify i tak skonfigurowanie sklepu, dodanie produktów i kolekcji lub przekonwertowanie kolekcji w Webflow do bazy Shopify oczywiście pod warunkiem, że metapola utworzone w Webflow są spójne z tymi w Shopify. 

Piąty etap - wyzwania

Do tego momentu może wydawać się to w miarę proste, ale niestety rzeczywistość jest inna i to co pokazuje Udesly tyczy się tak naprawdę bardzo prostych sklepów. Dla prostego sklepu myślę, że na tym etapie by mogło się skończyć i pozostałoby konfigurowanie już w Shopify wszelkich ustawień sklepowych. Natomiast jak to zwykle bywa trafiamy na tym etapie na ograniczenia, które trzeba rozwiązywać dodając dodatkowe atrybuty do elementów w Webflow lub dodawać samemu kod liquid lub javascript, żeby funkcjonalności, które mają działać na stronie działały prawidłowo. Wymaga to zasięgnięcia już do dokumentacji Shopify, dodając logikę, obiekty liquid, czy dodając customowe metapola i meta obiekty i spięcie ich z elementami na stronie, aby były dobrze wyświetlane. 

Typowe problemy na które trafiłem budując szablon: 

1. Dodawanie niestandardowych pól potrzebnych (custom metafield, custom metaobject) do opisu produktów, czy kolekcji, które uzupełniane są w panelu Shopify i wyświetlane na stronie. - wymagało to dodania atrybutów Shopify do elementów w Webflow odpowiedzialnych za ich wyświetlanie. 
2. Dodanie atrybutów liguid w celu sterowania logiką pojawiania się różnych elementów i ich działania-tutaj warto przeczytać w całości dokumentacje Udesly dostępną tutaj.
3. Problem z filtrowaniem po cenie od-do - wymagało to custom codu w JavaScript - rozwiązanie Finsweet nie działało dobrze po konwersji na szablon Shopify.
4. Dodanie JavaScript do logiki wyświetlania ceny porównawczej i dostosowanie to do logiki Shopify przy np. zmiennych cenach porównawczych wariantów produktów.  
5. Dodanie odpowiedniej logiki, która współgrała z tym co klientka zaznaczy lub odznaczy w customowych metafield. 
6. Dla planów Shopify Basic dodatkowym problemem było uruchomienie paczkomatów - prawie każda aplikacja wymagała wyższego planu lub uruchomienia. Klientce zależało na tą chwilę na planie Basic. Do działania aplikacji paczkomatów niezbędna jest funkcja Carrier Calculated Shipping (CCS). CCS umożliwia wyświetlanie paczkomatów do wyboru podczas składania zamówienia. Rozwiązałem to na tą chwilę aplikacją i InPost Paczkomaty Orlen Paczka  od CODIE. Jest to aplikacja, która pozwala na używanie paczkomatów i mapy na planie Basic Shopify z tą różnicą, że wyboru paczkomatu dokonujemy na stronie podsumowania/podzienkowań, a nie w samych checkoucie.
7. Kolejnym problemem było to że na plane Basic nie można dodać do checkoutu, checkboxa o “akceptacji warunków usług” i wymagało to dodania tego pola ręcznie do strony koszyka, gdzie znajdował się formularz kierujący do checkoutu.
8. Dodanie pola z poprzedniego punktu spowodowało kolejny problem, polegający na tym, że na stronie koszyka mamy formularz z dwoma guzikami ‘Submit” - jeden odpowiedzialny za przejście do checkout, a drugi odpowiedzialny za aktualizacje koszyka w Shopify np. poprzez dodanie większej liczby produktów lub ich usuwanie z koszyka. Dodając pole akceptacji warunków usług jako pole wymagane w formularzu powodowało to problem polegający na tym, że nie był rozróżniany przycisk “Submit” odpowiedzialny za edycję ilości produktów od przycisku “Submit” przenoszącego do checkoutu. Rozwiązaniem był dodanie customu codu, który rozróżniał, który przycisk w formularzu jest naciskany przez użytkownika i w stosunku do tego usuwał lub dodawał wymaganie zaznaczenia checkoutu. Niby proste, a jednak wymagało to dodania custom codu. 

Po rozwiązaniu wszystkich tych nieprzewidzianych problemów sklep po testach działa prawidłowo. 

Podsumowanie

Podsumowując, nie wszystko złoto co się świeci. Rozwiązanie Udesly i budowa sklepu lub szablonu w Webflow i jego konwersja jest naprawdę super rozwiązaniem pod warunkiem umiejętności wykorzystania języka liquid i połączenia tego z Webflow oraz znajomości w podstawowym stopniu JavaScript. Z takim stackiem można zrobić naprawde dużo i zbudować szablon, który będzie naprawdę dobrze działający. Tak naprawdę moim zdaniem nawet z prostym sklepem trafi się na moment gdzie będzie trzeba poszperać w dokumentacji Shopify i dodać coś w liquid, ale ostatecznie wychodzi to naprawdę dobrze, i można z tym stworzyć niestandardowe sklepy obsługiwane tylko za pomocą Shopify. Każdy taki szablon można tak przygotować, żeby był w pełni edytowalny przez klienta, a jeśli dojdzie do potrzeby dobudowania czegoś robimy to w 100% w Webflow nie ingerując już w kolekcje produktów. Także nie jest dokońca tak łatwo jak to jest przedstawiane w Udesly, ale znając liquid, JS jest to godne polecenia. Ja jako Webflow developer oraz partner Shopify wprowadzam na stałe taką usługę budowy niestandardowego szablonu, czy sklepu. Jeśli potrzebujesz takiego rozwiązania napisz i skontaktuj się, a znajdziemy odpowiednie rozwiązanie. 

‍

Być może nie opisałem w tym przypadku wszystkiego, ale pisałem to po pewnym czasie, więc mogło mi coś umknąć. Jeśli miałbyś/miałabyś pytania co do całego procesu budowy takiego sklepu i związanymi z tym wyzwaniami napisz do mnie ;) tutaj

‍