E-commerce
3 godz. 52 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectZ pomocą Webflow, stworzysz gotowe, zaawansowane rozwiązanie e-commerce, z pomocą wizualnego interfejsu. Pod spodem działa rozwiązanie bazodanowe, które w gui pozwala Ci łatwo definiować i edytować produkty, kraje wysyłki, ceny a także spiąć całość z jednym z najnowocześniejszych systemów płatności - Stripe. Aby stworzyć sklep, nie potrzebujesz jednak wiedzy programistycznej, wszystko wykonasz wewnątrz kreatora Webflow.
Webflow pozwala na przygotowanie wyglądu Twojego sklepu, który jest w pełni dostosowany do Twoich (lub Twojego klienta) potrzeb. Możesz wdrożyć dowolny projekt, stworzyć i zaprojektować stronę produktu, koszyka, a także pozostałe podstrony sklepu. Dodatkowo, możesz łatwo rozbudować go nie tylko o statyczne, ale i dynamiczne podstrony, wykorzystując CMS. W ten sposób dodasz do swojego sklepu np. bloga.
O ile sklepy, które sprzedają lokalnie wysyłkowe produkty mogą na ten moment nie być najlepszym wyborem pod Webflow, głównie z uwagi na system wysyłek i płatności, to jeśli rozważasz sprzedaż na cały świat, Webflow posiada kilka naprawdę ciekawych rozwiązań. Kolejne ciekawe zastosowanie e-commerce w Webflow to możliwość sprzedaży produktów cyfrowych - jak e-booki, kursy wideo i inne. To obecnie jeden z najlepszych systemów dla twórców, którzy chcą sprzedawać w sieci, również na cały świat.
W kursie skupimy się na przygotowaniu bardzo praktycznego rozwiązania. Pokażę Ci jak wdrożyć w Webflow kompletny system e-commerce, który odwzorowuje dokładnie istniejący sklep zaprzyjaźnionej marki MKTP (polecamy!). Dzięki temu na rzeczywistych danych postaram się pokazać Ci jak może wyglądać wdrożenie projektu w Webflow.
Choć Webflow nie posiada tysięcy wtyczek, jak WooCommerce, ma też w stosunku do innych systemów dość istotne przewagi - możliwość hostowania i skalowania Twojej strony niezależnie od ruchu, profesjonalny system do tworzenia customowych szablonów i wiele więcej. Tam, gdzie brakuje funkcjonalności, możemy jednak wspierać się automatyzacjami. W kursie dowiesz się jak połączyć Webflow z Zapier czy Integromat, aby stworzyć rozmaite procesy wokół zakupów. Dodatkowo, możesz rozszerzyć jego możliwości o lepszy koszyk np. z pomocąć Foxy Cart i innych rozwiązań, które dają wiele możliwości!
Webflow oferuje szereg narzędzi ułatwiających modyfikację sklepu jak i zarządzanie stanem magazynowym i przyjmowanymi zamówieniami z pomocą przeglądarki - obsługa sklepu może w ten sposób łatwo dokonywać zmian i monitorować zamówienia. Dodatkowo, do sklepu można dorobić szereg automatyzacji. Jeśli zarządzasz wieloma sklepami dla klientów, możesz uruchomić opcję billing - ciekawy wariant w którym klienci opłacają wszystkie usługi a także Twoje usługi utrzymania serwisu.
Kurs został przygotowany z myślą o tych z Was, którzy znają już Webflow i chcą zacząć budować sklepy internetowe dla siebie, lub oferować taką usługę swoim klientom. Webflow to także jedno z najlepszych narzędzi pozwalających sprzedawać na cały świat cyfrowe produkty - będzie więc świetnym rozwiązaniem dla twórców, którzy myślą o takich przedsięwzięciach. Zdecydowanie polecamy jednak wcześniej zapoznać się z pozostałymi kursami Webflow, a także kursem HTML od Podstaw. Web Developerzy mogą także wykorzystać platformę e-commerce w Webflow do szybszych wdrożeń a także rozbudowania swojego portfolio o modną, rosnącą w siłę usługę.
Cześć zgodnie z obietnicą z jednej z
poprzednich lekcji chciałbym pokazać ci teraz jak możesz wysyłać swoje własne
maile zastępując te modyfikacje które ułatwią albo w całości albo w części.
Tak jak wspomniałem w sekcji ustawień
e-commerce modyfikacji rzęs możesz wybrać sobie powiadomienia czyli np.
potwierdzenie zamówienia albo informacja o
tym że zamówienie zostało wysłane i możesz wyłączyć wysyłanie takiego maila do
klienta czy nie będzie on wysyłany domyślnie z.
No i co teraz.
Co teraz jeśli wyłączy ten e-mail użytkownik nie dostanie żadnego maila
potwierdzenia złożenia zamówienia w naszym sklepie.
Nie do końca możemy sobie z tym poradzić z pomocą automatyzacji.
Ja będę chciał pokazać Ci jak to działa na przykładzie zabiera aczkolwiek papier jest
tylko jednym z narzędzi które umożliwia właśnie obsługę tego typu rzeczy papier
jest dość intuicyjny i dlatego chciałbym Ci go pokazać ale jeżeli chcesz możesz
skorzystać z innych kursów w tym z kursu Integer ma tu na przykład
żeby stworzyć trochę bardziej zaawansowane automatyzacji.
Wybieram tutaj polecenie make up czyli tworzę tzw.
zapas jest automatyzacja która pozwoli mi
zrobić jakąś akcję w momencie gdy moje zamówienie zostanie złożone lub gdy się
zmienię zapier ma specjalny moduł który teraz powinniśmy wyszukać i
skorzystać właśnie z tego modułu i zobacz że możemy teraz zareagować na zdarzenia
związane z zamówieniem dwie opcje które tutaj mamy to odebranie informacji o nowo
złożonym zamówieniu a także o zaktualizowany zamówieniu więc my na razie
koncentrujemy się na odbieraniu danych nowego zamówienia.
New Order wybieram polecenie continuum
i teraz wskazuje moje konto małe plus które mam tutaj już połączone.
Jeżeli nie to trzeba się z nim połączyć z autoryzowanego.
Wybieram teraz konkretny sklep.
W moim przypadku MK TP pod warunkiem że ta strona jest wpłata do autoryzowanego konta
pojawi się na liście a następnie wybieram polecenie continuum.
I przechodzę do zakładki Find data.
Tutaj muszę kliknąć na test String r po to
żeby sprawdzić zamówienia które znajdują się w sklepie.
Ponieważ w jednej z poprzednich lekcji
zrobiliśmy już testowe zamówienie to w tym momencie zapier potrafi takie zamówienie
odnaleźć i na bazie danych tego zamówienia będziemy mogli coś wykonać.
Teraz bardzo ważne jest to jakie są dane
tego zamówienia mamy informacje o tym kiedy zamówienie zostało przyjęte
kiedy zostało wykonane full Field mamy ewentualnie dysputy i rewanże także jeżeli
byśmy mieli jakąś reklamację i zwroty to też mielibyśmy informację o tym date np.
tutaj co prawda patrzymy na nowe
zamówienie aczkolwiek drugą akcją którą możemy odczytywać i wykonać na jej
podstawie jakieś polecenia jest modyfikacja zamówienia czyli możemy
stworzyć kolejnego zapach który właśnie informował nas o tym że zostało takie
zamówienie wysłane albo refundowane i za każdym razem automatycznie by się to
uruchamiał kolejne mamy informację o cenie mamy Shipping Provident nawet wszystkie te
dane które wprowadziliśmy jeśli chodzi o wysyłkę URL gdyby był.
No i w końcu Customer info czyli wszystkie
dane klienta które wpisał również adresy adres bilingi i adres do wysyłki.
Gdyby był osobny no i w końcu informacja o
kupionych ziemiach okupowanych produktach w naszym sklepie.
Czyli ile i jaki produkt jaka nazwa.
I wszystkie te informacje rzeczywiście tutaj są.
Poniżej mamy jeszcze
również informacje osobno link adres Shipping adres o informacja o kwocie oraz
o eks trasach jakiejś czyli przykładowo o tym ile kosztuje wysyłka.
Jaki kod został rabatowe użyte więc OK.
Wszystko tutaj jest naprawdę wszystkie
dane tego zakupu więc my możemy reagować na taki nowy zakup albo aktualizację
dowolnych tych danych i możemy na nich pracować po to żeby
zrobić coś w następnej aplikacji w tej lekcji chciałbym zrobić bardzo podstawową.
Automatyzacja a później będziemy robili trochę bardziej zaawansowane rzeczy.
Ale chcę żebyś dobrze zrozumiał ten schemat jeśli jeszcze wcześniej nie
pracowałeś za automatyzacja czy za prl możesz tutaj np.
wpisać mail i skorzystać z Mail b.
Albo nawet ze swojej skrzynki mailu.
Po to żeby wysyłać jakieś maile jeśli wybierzemy e-mail możemy stworzyć draft
możemy wysłać e-mail możemy odpowiedzieć na e-mail.
W każdym razie my chcemy wysłać e-mail wybieram polecenie Continuum a następnie
wskazujemy jaki e-mail ma być wysłany w momencie złożenia nowego zamówienia.
Mamy tutaj możliwość wysłania do mamy Customer info e-mail który na który chcemy
wysłać ten mail na który ktoś składa zamówienie możemy wysłać też do siebie na
kopię czy też na ukrytej kopii wpisać tutaj nazwę nadawcy.
Inaczej będzie wyświetlany na maila możemy wpisać MC TP Shop.
Możemy dodać adres odpowiedzi jeśli ma być inny niż adres nadawcy wpisać tytuł np.
komplet kolejny możemy wpisać w treści
plan tekst albo sformułować naszego maila HTML em.
Możemy sobie taki tekst bardzo prosty dziękuję za zakup.
Twój order ID jest i teraz możemy wziąć
sobie dynamiczne dane z tych wszystkich danych które do nas przyszły więc mamy
bardzo dużo opcji które możemy wybrać wybieramy tylko order ID.
Mam tutaj numer zamówienia.
W razie gdyby klient chciał odpowiedzieć i powołać się na ten numer abyśmy mogli
łatwo takie zamówienie odnaleźć i skontaktuje się z Tobą w momencie gdy
wyślemy taki system czyli takie zamówienia i schemat takiej prostej automatyzacji
mógłby właśnie w ten sposób powiązać wybiera polecenie continuum.
Następnie mamy możliwość przetestowania tego scenariusza czyli wybieram polecenie
Test and continuum i sprawdzam moją skrzynkę e-mail
mail został wysłany i jeśli wszystko jest w porządku to mogę
wyłączyć z tego zapachy i wybrać polecenie od zap.
Po to żeby działał on dla wszystkich nowych zamówień.
W momencie gdy jest włączone ma on to wtedy automatycznie w momencie gdy nowe
zamówienie przyjdzie na słabszą wyślemy do osoby która je złożyła.
E-mail ewentualnie do nas na kopii i
będzie to Custom owy e-mail w którym możemy wykorzystać dane z zamówienia więc
nie musimy korzystać z tych domyślny e-mail które są przygotowane w łeb.
Co więcej możemy przygotować sobie np.
szablon takiego maila
i zapisać go czy to w miarę Get Response Active kampanię czy w jakimkolwiek innym
narzędziu i korzystać już z takiego szablonu i go wysyłać.
Możliwości są tutaj dość duże ale ja
chciałem w tej lekcji pokazać ci naprawdę absolutne podstawy tego jak moglibyśmy
taką automatyzacja skonstruować i tym samym przejąć wysyłanie maili z Flow.
Oczywiście musielibyśmy też wyłączyć modyfikacje mailowe w
Apple o to żeby MEN nie wysyłał się dwa razy i w momencie gdy mamy to już robione
możemy zastanowić się nad tym jak zrobić trochę bardziej złożona
automatyzacja ponieważ tutaj rzeczy z pomocą internetu mamy dostęp do wszystkich
tych danych zamówienia i możemy na nich pracować pokaże trochę później.
Teraz to wszystko dziękuję bardzo za uwagę w tej lekcji.
Ile usłyszę.