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ść Witaj w kolejnej lekcji.
Wygląda to wszystko całkiem dobrze.
Mamy stronę główną mamy stronę produktów
mamy stronę kategorii mamy dynamiczne dane wszystko co zrobiliśmy w oparciu o moduł
e-commerce no i świetnie to co teraz co teraz zostało nam do zrobienia.
Przejdźmy do sekcji e-commerce i zobaczmy Nasz set.
Mamy wszystkie opcje etapu wypełnione
następnie Disney Store też mamy większość rzeczy zrobionych.
Czyli mamy dodanie designu do naszego koszyka czyli stabilizacja koszyka a to co
zrobiliśmy mamy również dodane strony produktowe.
Również mamy czeka otwarte stronę
zakończenia transakcji przygotowaną zostało nam tutaj do zrobienia e-commerce.
M.S. Mamy możliwość zdefiniowania tego jakie maile i jakie
treści będą wysyłane dla użytkownika i są to tak zwane maile transakcyjne.
Ogólnie mamy do czynienia z różnymi typami
maili maile transakcyjny to takie które są bardzo ważne dla użytkownika.
Pozwalają one np.
odzyskać hasło informują o tym że transakcja została zakończona.
Wysyłają podsumowanie koszyka podsumowanie transakcji faktury itd.
To są wszystko maile transakcyjne
oprócz maili transakcyjnych naturalnie mamy maile marketingowe takie które np.
informują użytkownika o tym że jakiś nowy
produkt pojawił się na naszej stronie web Flo Out Of The Box nie oferuje nam
takiej możliwości ale jeśli chodzi o maile transakcyjne mamy możliwości ustawić
przejdźmy w związku z tym do email things I zobaczmy co się tutaj znajduje.
Jest to okienko ustawień Things a następnie e-mail.
Pamiętasz pewnie że większość ustawień już ustaliliśmy w zakładce e-commerce.
Teraz przenosimy się do zakładki e-mail
gdzie mamy możliwość podejrzenia rozmaitych maili które mogą być wysyłane
tutaj jest sekcja e-commerce e-mail gdzie możemy zobaczyć szablony wszystkich
wysłanych maili i pewnie tych maili będzie przybywać.
Na razie mamy informacje które wysyłane są do menedżera sklepu.
O tym że zamówienie zostało zrealizowane czyli że ktoś zamówił na naszym
naszym sklep jakiś produkt jest to ten szablon order Eris.
Następnie mamy order konferencji czyli
taki szablon który jest wysyłany mailem do klienta który złożył zamówienie.
Order Ship jest wysyłany w momencie kiedy wyślemy nasz produkt do klienta.
W momencie gdy mamy oznaczony produkt że wymaga on wysyłki
mamy możliwość później wskazania że ta wysyłka została zrealizowana i wówczas ten
e-mail automatycznie do naszego klienta się wyśle.
Order tandety czyli email który potwierdzi
klientowi że jego zakup został refundowany jeśli o to wnioskował.
Mamy też jeszcze jeden szablon czyli order
dał moc w momencie kiedy nasz produkt ma oznaczone plik do pobrania czyli
sprzedajemy jakieś dobra cyfrowe przykładowo prezentację plik PDF albo np.
kurs wideo który można pobrać.
To wtedy po zakończeniu takiego zamówienia
jest wysyłany osobny e-mail który posiada linki do tych plików które są
dołączone do produktu i pozwala na ich pobranie.
Jak widzisz te szablony są bardzo podobne jeśli chodzi o grafikę.
Posiadają szare tło posiadają tutaj jakiś tytuł no i również produkty.
Jedyne opcje które możemy na razie dostosować to przeciągnąć je opuścić logo
albo wybrać je z dysku która pojawi się na górze.
Mamy też dwa kolory do wyboru Ground Color czy możemy zmienić główny kolor.
Możemy też zmienić akcent kolor który jest używany dla linków i przycisków np.
przyciski to jest właśnie akcent kolor który możemy zmienić np.
na ten nasz brand kolor albo jakiś kolor w
tym przypadku może zielone zobacz że gdy używamy jakiegoś koloru ciemnego wtedy
tekst staje się kontrastem i zmienia się na białe.
Jeśli chodzi o olej Out to w zasadzie tyle możliwości zmiany ale możemy w takich
mailach zmieniać treści przede wszystkim w miejscach gdzie znajdują się nawiasem
klarowne zostaną podstawione odpowiednie dane.
Czyli przykładowo imię i nazwisko naszego klienta możemy jednak dostosować również
wszystkie teksty które się pokazują no może większość i mamy zrobioną najpierw
taką ogólną zakładkę na treści gdzie będziemy mogli przetłumaczyć sobie np.
na polski albo zmienić z angielskiego.
Te treści które są użyte w wielu mailach np.
Shipping po polsku wpisali byśmy dostawa
wpisali byśmy podatek albo podatki Shipping Info informacja o przesyłce itd.
Więc można to przetłumaczyć albo jeżeli
chcemy zmienić angielską frazę na coś innego to możemy
też to zmienić to we wszystkich mailach wtedy zmieni się właśnie adekwatnie.
Następnie mamy poszczególne wiadomości e-mail czyli np.
wiadomość dla naszego menadżera sklepu że zamówienie zostało złożone
i teraz domyślny temat tego maila to jest New Order from Store name.
Czyli mamy możliwość dynamicznie podjęcia tutaj informacji o tym z jakiego sklepu
jest zamówienie ale nie tylko że znajdują się tutaj dynamiczne pola i
możemy spośród nich wybrać Customer name czyli imię nazwisko klienta nazwa sklep.
URL sklepu i nazwa właściciela sklepu i te
wszystkie dane możemy dynamicznie tutaj wstawić np.
store url
S New Order from możemy wstawić Customer nam przykładowo
i to będzie pojawiał się w temacie jeszcze dodatkowo mamy możliwość zmiany tej
wiadomości ale i tu też możemy wprowadzić dynamiczne dane które mamy
jeżeli sobie taki e-mail z formatu jemy możemy zawsze wybrać polecenie Send to
jest e-mail i wysłać go na adres który został zapisany jako adres naszego
administratora sklepu żeby go przetestować.
W związku z tym mamy tutaj trochę opcji Custom.
Może nie tak dużo jak w samym Edyta łatwą ale możemy trochę tych maili poprawić i
zakładam również że w miarę łatwo będzie wydawały różne funkcje.
Kolejne nowe maile będą się pojawiać.
Poza tym na samym dole maila znajduje się
informacja że jest to mail wysłany przez łatwo i po to żeby te informację usunąć
należy kliknąć w Baton aczkolwiek żeby to zrobić potrzebujemy planu e-commerce plus
albo A-2 czyli potrzebujemy wykupić hosting.
Jak widzisz na razie możliwości wysyłki maili przez łeb są dosyć ograniczone.
Nie mamy możliwości dostosowania wyglądu do naszych potrzeb tak jak to że łatwo
ale też niestety nie mamy możliwości dostosowania czy wysyłania np.
maili w większej ilości w zależności od
jakichś innych zdarzeń które występują w naszym sklepie.
Być może taka opcja wkrótce się pojawi.
Na razie niestety nie możemy tego zrobić.
Jedyną opcją którą mamy dostępną w momencie gdy otrzymamy zamówienie w
wariancie edytora czyli na naszej stronie w tej sekcji edytor będziemy mogli przy
edycji takiego zamówienia wysłać e-mail raz jeszcze.
Czyli jeśli klient zgłosi się do nas i np.
powie że nie otrzymał maila zwłaszcza
przykładowo w takich produktach które są produktami cyfrowymi gdzie w mailu jest
link do ich pobrania wtedy przy zamówieniu możemy zawsze kliknąć.
Możliwość wysłania takiego maila raz jeszcze powinien on zostać wysłany w
zasadzie jeśli chodzi o tę opcję wbudowanych maili.
To wszystko.
Natomiast warto wiedzieć że możemy w pewien sposób stworzyć i wysyłać swoje
własne szablony maili pokażę ci to jeszcze w jednej z kolejnych lekcji.
Tymczasem jeżeli przeniesiemy się do
ustawień e-commerce zapisze się ustawienia z Mail masz tutaj taką sekcję notyfikacji.
I tutaj właśnie znajdują się wszystkie
powiadomienia czyli mamy zamówienie Otrzymane
zamówienie potwierdzone zamówienie wysłane i może wejść w taki taką modyfikację
a następnie zobaczyć kto otrzymuje te modyfikacje.
Mamy tutaj Customer czyli osoba która
kupuje produkt i możemy to wyłączyć w ten sposób mail nie będzie wysyłany.
I w przypadku różnych maile np.
maile z które dostaję Project toner i coś
co Laboratories ewentualnie możemy włączyć i wyłączyć to do kogo są one wysyłane.
W każdej sytuacji mamy też w sekcji
notyfikacji możliwość dodania jeszcze jakiegoś dodatkowego adresu np.
adresu ogólnego powiadomień w naszej
firmie gdzie będą wysyłane wszystkie maile.
To jest zresztą dobra praktyka.
Zwykle tak robię czyli w zasadzie do wszystkich maili maile z notyfikacji.
Tam gdzie trzeba można je wyłączyć czy włączyć do wszystkich maili i tak naprawdę
można dodać dodatkowy 1 mail ogólny z modyfikacjami.
W ten sposób np.
jeżeli klient się do nas zgłosi i mówi że nie otrzymała jakiegoś maila a
my możemy sprawdzić na tej naszej ogólnej skrzynce czy ten mail został wysłany.
Jeżeli my go mamy na skrzynce to znaczy że klient pewnie ma go gdzieś
wyspami albo musi w innym w inny sposób go odnaleźć.
Ale że ten mail został wysłany więc warto
mieć taką opcję i warto mieć jakiś backup tych wszystkich maili które są wysyłane.
Dodając ten adres tutaj tak jak wspomniałem pokażę ci jak można jeszcze po
wyłączać te wszystkie domyślne maile i skonfigurować jakiś swój Flow mailowe.
Zrobimy to w jednej z kolejnych lekcji a w następnej zajmiemy się podatkami.
Do usłyszenia.