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ść tej lekcji chciałbym powiedzieć jak podpiąć płatności do naszego konta w UE.
Mamy tutaj sekcję ustawień następnie e-commerce i payment.
To tutaj trzeba przejść po to żeby skonfigurować nasze bramki płatności.
Płatności są obsługiwane za pomocą
zewnętrznych dostawców zewnętrznych liderów.
Informacja o tym jakie metody płatności są
obsługiwane znajdują się tutaj obok mamy możliwość wzięcia Strip oraz PayPal.
Na szczęście obie usługi są dostępne w Polsce.
Należy w nich wcześniej zarejestrować założyć swoje konto tego oczywiście nie
będę ci pokazywał bo trzeba przejść jakąś formalną procedurę weryfikacji tego konta
chociaż w strefie jestem naprawdę bardzo proste i zdecydowanie polecam tego
dostawcę aczkolwiek możemy połączyć jedno i drugie konto.
Dzięki temu będziemy mogli obsługiwać płatności PayPal i obsługiwać płatności za
pomocą snajpera a z kolei Strip da nam możliwość obsługi płatności kartą przez
Apple Pay a nawet przez transfery przelewy bankowe.
I choć Strip już w tym momencie obsługuje przelewy 24 czyli wszystkie polskie
rodzaje płatności to przynajmniej na razie jeszcze nie jest to zaimplementowane ale
jest to bardzo nowa rzecz i możliwe że w momencie gdy oglądasz ten kurs już
Przelewy 24 są dostępne a więc mamy dostęp do wszystkich polskich bramek płatności na
czekajcie naszego sklepu czyli w ramach koszyka i przejścia do płatności.
Na razie wybieramy polecenie Connect Strip próbujemy się do tego konta i wybieramy
sklep który chcemy obsłużyć wybieram polecenie Connect majstra account czyli
musimy mieć wcześniej założony sklep na Strip.
No i teraz konto Strip zostało poprawnie połączone.
Następnie PayPal wybieramy również polecenie Connect PayPal i także łączymy
go naszymi danymi logowania w PayPal przy czym jedna rzecz jest bardzo istotna nie
chodzi tutaj o konto prywatne PayPal musimy na PayPal posiadać konto firmowe
konto prywatne można przekształcić w konto firmowe dołączyć je do niego i można
zrobić to w panelu PayPal i pod warunkiem że takie konto firmowe masz to wtedy
loguje się na nie w tym momencie będziemy mogli wyrazić zgodę i połączyć to konto.
W ten sposób autoryzacja została zrobiona
poprawnie a ja mogę wrócić do wepchnął i mam z tego zarówno strój jak i PayPal.
No to świetnie mogę już teraz zacząć
przyjmować płatności żeby przyjmować płatności.
Muszę jeszcze przejść do sekcji czekałem i po prostu uruchomić czekał na stronie.
No i to jest krok który będzie zmuszał nas
już do przejścia na plan e-commerce czyli na plan hosting od Apple.
Czyli będziemy musieli ratować się do tej pory mogliśmy nawet korzystać z darmowego
planu łatwo ale teraz już w momencie gdy chcemy podłączyć płatności przetestować
zamówienia będziemy musieli włączyć plan hosting dla e-commerce.
Więc zanim włączy czekał przechodzę do tej sekcji at hosting.
Mogę oczywiście przejść do naszego panelu a następnie stamtąd przejść do sekcji
hosting i mamy tutaj e-commerce Suite Plants.
Mamy kilka planów do wyboru
gdzie każdy z nich oferuje trochę inne możliwości przede wszystkim mamy zniesione
opłaty transakcyjne w momencie gdy jesteśmy na koncie plus czyli nie będziemy
płacić za poszczególne transakcje poza tymi opłatami transakcyjnym które
standardowo bierze od nas Strip oraz PayPal i one są w wysokości zwykle około
trzech procent plus jakaś mała dodatkowa kwota.
Więc jeżeli byśmy korzystali z konta Standard no to tutaj niestety jeszcze 2
procent doliczył a więc musimy zdawać sobie sprawę z tego że
z każdej transakcji będziemy około pięciu procent oddawali tę kwotę właśnie do web i
do naszego operatora płatności w planie plus już mamy wzniesioną tą transakcję.
No i dodatkowo mamy coraz więcej
singli które możemy protestować tutaj jest 50 tysięcy rocznie.
Dolarów tutaj już mamy 200 tysięcy dolarów
a tutaj już mamy and Limited i dodatkową opcją planu Advanced a także
planu plus jest to że możemy mieć nie brandu przez Apple.
Maile w zasadzie na razie to są te maile transakcyjne i możemy zdjąć z nich po
prostu logo Web flow na dole musi mieć do tego plan plus albo Advanced.
Za takie plany możemy zapłacić albo
rocznie i wtedy mamy małą zniżkę albo miesięcznie.
Przykładowo plan standard który teraz
sobie wybierzemy kosztuje 42 dolary miesięcznie.
Na razie w następnym kroku potwierdzamy
płatność czyli upewnił się że mam Killing jest wybrany będą tutaj dane mojej karty
czyli dane płatności które ustawia sobie w mojej zakładce Building i tak przy okazji
posiada jeszcze dość ciekawą opcję klient Building.
Niestety ta opcja nie jest dostępna w tym
momencie dla Polski aczkolwiek jeżeli masz jakieś konto bankowe w innym kraju który
jest wspierany możesz wybrać sobie opcję salda Bing eCard i Credit link.
I to co jest ciekawe te kraje są wspierane natomiast to co jest ciekawe to
spowoduje to że podasz tutaj swoje dane czyli dane swojego kraju a następnie
informacja a także numer konta na które będą przelewane płatności za
hosting i możesz tak naprawdę określić dowolną kwotę dla twojego klienta.
Czyli nie musi to być 42 dolary tak jak
płacisz co miesiąc możesz swojego klienta np.
obciążać kwotą 50 dolarów czy 100 dolarów
miesięcznie i on będzie musiał skonfigurować sobie automatyczne.
Zostanie to przepracowane z nim przez łeb
a ty dodatkowo będziesz otrzymywała na swoje konto co miesiąc różnicę
pomiędzy stawką którą powinieneś płacić za plan a pomiędzy tym co wpłaca twój klient.
To jest dosyć fajny sposób na to jak można trochę więcej rzeczywiście czarować od
klienta ale także po to żeby było możliwe utrzymanie jego strony.
Zdarza się naturalnie że tę stronę trzeba trochę zmienić czy zmienić jakieś API i że
zmieni się jakiś dodatek coś z czego korzystasz wykonać jakiś drobny Fix i w
związku z tym możesz zaproponować swojemu klientowi jakiś plan utrzymania tej strony
który będzie oczywiście obejmował też wszystkie opłaty.
No i dzięki temu klient będzie ci płacił
również za utrzymanie strony a sama opłaty będą od niego pobierane automatycznie.
Natomiast no niestety na razie w Polsce ta
opcja jest niedostępna chyba że tak jak wspomniałem posiadasz konto w innym kraju
co też jest możliwe przez jakąś tam aplikację np.
rewolucja czy transfer jest OK.
To teraz wróćmy do tej sekcji bilingów i
potwierdzamy nasz standardowy plan na hosting wybieram polecenie ale
jak zwykle przy ustalaniu planów hosting nowego możesz wpisać swój numer telefonu
wtedy w momencie gdy coś jest nie tak z płatnością dzwoni do ciebie informuję Cię
że nie możesz protestować a wszystko po to żeby oczywiście nie zawiesić hosting
Twojej strony i żeby ona nie padła w momencie gdy np.
z karty nie da się pobrać płatności.
Tutaj mam wybrany ten plan.
Z planów mogę się przełączać czyli mogę
wybrać polecenie upgrade gdybym miał wyższy plan mogę też go z dumą realizować.
I w końcu mogę poniżej
przełączyć się także na bilingi roczne po to żeby oszczędzić trochę dolarów.
No dobra skoro już mamy plan to teraz
wróćmy do naszej strony razem z zakupienie planu odblokowane się dodatkowe zakładki
czyli możliwość dodania własnej domeny a także stworzenia przekierowanie 301 i
pokazywała ci wszystkie te opcje w kursie zaawansowanym.
W związku z tym do tego kursu chciałbym cię przekierować ale jeszcze o tych
opcjach wspomnę gdy będziemy kończyć konfigurację naszego sklepu tutaj.
Jeśli teraz przejdziemy do wicelidera
wybierzmy Executive Designer to będzie możliwe już połączenie czeka.
Czyli w zasadzie wdrożenie tej produkcyjnej wersji naszego sklepu.
Teraz przechodzimy do zakładki ze sklepem
wybieramy set up Guide i mamy 1 krok który nam pozostał czyli czekał.
Przechodzimy do innej bo czeka All Things
e-commerce czeka i włączamy czekał na stronie.
W tym momencie po za wpisaniu opcji możemy
już opublikować naszą stronę na papierze Domain.
I na tej domenie na razie przynajmniej ale nasz sklep jest już w pełni funkcjonalny.
Może przyjmować płatności może obsługiwać
zamówienia i my w celu przetestowania zamówienia otworzymy sobie specjalny kod
zniżkował czyli przejdziemy do sekcji e-commerce tutaj przejdziemy do disco.
Mamy już dodany jeden kod zniżkowały serial który obniża nam cenę
procentowo o 10 procent a my zrobimy sobie obniżenie ceny na tym samym kodzie o 100
procent więc to będzie serial wybieram polecenie Save i
musimy się jeszcze upewnić że status tego to jest nie DS a n.
Ok.
Wybieram polecenie Save Zamknij tę sekcję i przejdźmy do obejrzenia gotowej witryny.
Następnie wybrać dowolny produkt np.
stąd
wybrać rozmiar i wskazać jeszcze kolor.
Wybieram polecenie a do kart dodaję do koszyka.
Następnie przechodzę do continuum.
Tu czekałem mamy włączoną opcję PayPal możemy tutaj włączyć też opcję Apple Pay.
Jeżeli będzie dostępna na naszym koncie Strip.
Na razie przechodzimy tutaj wpisujemy
dyskonty and sell wybieramy polecenie Play i mamy do zapłacenia 0 euro.
Wprowadziłem tutaj jakieś wyeliminowane dane aczkolwiek jako Country wybrałem
Poland czyli kraj do którego wariant wysyłki mamy darmowy.
Czyli mamy Shipping metod pojawi się tutaj automatycznie po wybraniu tego kraju.
Gdybym przykładowo wybrał inny kraj np.
Portugalię która jest w Europie dla której
mamy obliczoną stawkę dla Europy mamy tutaj 15 euro.
I zauważ że jeśli mój całkowity jeśli całkowite zamówienie
wynosi więcej niż zero to będę dodatkowo musiał przekazać dane karty kredytowej
aczkolwiek jeżeli ustalimy sobie metodę płatności do kraju darmową czyli np.
tak jak my mamy w przypadku Polski
no to wtedy nie będziemy musieli nawet podawać danych karty kredytowej możemy
taką transakcję przetestować wybierając polecenie Last Order total 0 euro.
W związku z tym takie zamówienie zostanie dla nas teraz przepracowane i świetnie
udało nam się złożyć pierwsze zamówienie w naszym sklepie.
Teraz gdzie trafiają te zamówienia.
Jeśli przejdziemy do ustawień łap tutaj w
sekcji e-commerce znajdziemy coś takiego jak Order.
Jeśli nie my zostaniemy przekierowanie na
naszą stronę ale zostanie ona przeładowane w trybie edycji.
Czyli jest to nic innego jak wejście bezpośrednio do edytora gdzie zapaliła nam
się informacja o nowym zamówieniu mamy jeden nowy order I tak przy okazji też
zostały wysłane kolejne maile do klienta i do obsługi jeżeli tylko są te modyfikacje
zaznaczone mamy informację o tym że jedna transakcja została procesowi.
Dodatkowo mamy również jej status ten status to na razie Anwil film.
Dlaczego.
Dlatego że musimy wejść w tę transakcję ponieważ jest to transakcja wysyłkowej.
Musimy sprawdzić te wszystkie dane
ewentualnie możemy tutaj wysłać jeszcze raz potwierdzenie zamówienia do klienta
jeżeli jego nie dostał ale musimy teraz zapakować taką paczkę i
zlecić jej wysyłkę i dopiero wtedy kiedy to zrobimy wybierzemy opcję Full order.
Jeśli wybierzemy opcję Full film to
wpisujemy dodatkowe opcje takie jak dane przesyłki np.
dostawcę lub jakiś link Amber i
ewentualnie link URL czyli link do śledzenia tej paczki
i możemy zaznaczyć żeby wysłać tę informację właśnie do klienta.
Czyli jeśli ta opcja jest zaznaczona
zgodnie z szablonu maila który może być włączony w notyfikacji
będzie wysłane e-mail dodatkowo zawierający informacje o przesyłce.
Wybieramy teraz polecenie order
i takie zamówienie zostało pomyślnie zrealizowane.
Możemy je wyłączyć czyli możemy zmienić jego status z powrotem na nie wysłane.
Gdyby coś się wydarzyło i jeszcze raz
wysłać ale generalnie teraz w sekcji order mamy jedno kompletne zakończone zamówienie
które zostało przez nas wysłane a domyślnie nasz klient zostałby
powiadomiony mailowo zarówno o złożeniu tego zamówienia jak również o
wysyłkę w momencie gdy wybraliśmy opcję Full Field.
W tym miejscu mamy możliwość także
filtrowania tych wszystkich zamówień które do nas wpłynęły.
Po tych wypełnionych and full filtry nie wypełnione nie wysłanych.
Mamy też takie które są w trybie dysputy oraz mandat.
Akurat to nasze zamówienie było na zero
euro w związku z tym nie możemy go zwrócić ale w momencie kiedy klient zwrócił
się do nas o zwrot moglibyśmy jeżeli byłoby to płatne zamówienie w akcjach
wybrać tutaj takie zamówienie które podlega jakiejś
dyskusji czyli jest w trybie zwracania przez klienta.
Jeżeli taką reklamację klienta byśmy
patrzyli moglibyśmy również w tym zamówieniu oznaczyć ją we właściwościach
żeby dokonać tak zwanego zwrotu czyli rewanż.
Wtedy Zwrot dokonywany jest automatycznie przez naszego prawa lidera
płatności czyli za pomocą tej metody płatności którą klient wybrał czyli np.
PayPal.
Czy jest to lipa jest to zwracane i wtedy status takiej
transakcji na coś takiego zamówienia będzie zmieniony na refundację w związku z
tym tak właśnie możemy zarządzać zamówieniami.
Możemy także eksportować ich listę czyli
wybierając eksport możemy preferować sobie np.
zamówienia z tego miesiąca
zawierające jakieś dodatkowe informacje i eksportować do pliku.
Jeśli chodzi o podgląd zamówień oraz opcje zarządzania zamówieniami to to wszystko.
Natomiast sam Edytor posiada jeszcze sporo
ciekawych opcji i chciałbym go omówić w kolejnej lekcji.
Do usłyszenia.