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ść witam w kolejnej lekcji której
chciałbym krótko przedstawić ci panel edytor co prawda robiłem to w kursie
zaawansowanym cieplo ale chciałem również żeby tutaj ten kurs był kompletny i
chciałem powiedzieć ci co nieco o tym jak można zarządzać treścią Twojej strony z
poziomu edytora czyli to jest panel który na ogół otrzyma twój klient albo osoba
która zajmuje się zamówieniami która wysyła zamówienia Pokazałem Ci już jak
można zmieniać ich statusu i zaznaczać i eksportować itd.
Jednak poza samą sekcją orderów mamy tutaj
sekcję PGS gdzie dostępne są wszystkie strony.
Przykładowo strony produktowe i stronę kategorii oraz stron blog postów tego nie
robiliśmy ale strony produktowej kategorii zobacz że są automatycznie wygenerowane w
ten sposób że zawierają już te poszczególne produkty które są w naszym
sklepie więc trochę inaczej niż zajmie że nie mamy takiego szablonu projektowego
tylko strony poszczególnych produktów więc możemy wejść w ustawienia dowolnej takiej
strony czy wejść w dowolną taką stronę i zobaczyć jak ten produkt wygląda.
Co więcej możemy zmienić
treści które się wyświetlają i teraz spróbujmy dokonać dwóch zmian np.
zrobimy sobie adres datę Mi 2
i ta zmiana została zachowana ale też zrobimy sobie zmianę Shipping i Shipping
też piszemy 2 i teraz mamy dwie nie opublikowane zmiany
jeżeli opublikuje te zmianę wybieram polecam polecenie to zostaną one
w tym momencie już na tej stronie naszej docelowej na stronie produkcyjnej.
Te dane są aktualizowane.
Co to znaczy zostanie zaktualizowany adres
date 2 w całym mieście czyli w momencie gdy teraz byśmy weszli w Designer.
Czyli wejdziemy z komendą klikamy na to żeby otworzyć sobie okno wicelidera
to zobaczysz że w sekcji e-commerce w produktach
mamy już adres date 2
ale poza tym że zmieniliśmy to właśnie w bazie danych to możemy teraz
jeszcze przełączyć się na chwilę e-commerce i przejdę do stron do strony
produktowej produkt tablet i okaże się że również strona produktową się zmieniła.
Czyli mamy tutaj wyświetlone Shipping 2 jak wiesz na tego typu stronie mamy
mieszane dane z CMS a czyli właśnie te zwracane tutaj na przykład.
I tak samo opcje rozmiaru itd.
Oraz dane w pewnym sensie statyczne one nie są w pełni statyczne bo są oczywiście
dynamiczne dla wszystkich stron produktowych ale np.
ten tekst Six Color Shipping to są
wszystko takie statyczne rzeczy które będą na każdej stronie produktu.
No i wiele rzeczy można też zmienić z poziomu edytora więc żeby zapobiec
możliwości zmian przez klienta na przykład właśnie tylko w tych rzeczach które są
tutaj statyczne dla strony produktowej czyli mógłby sobie zmieniać np.
nazwę sytemu CRM ale nie chcemy pozwolić mu zmienić np.
tego tekst Shipping.
Wtedy przechodzimy do takiego elementu
teraz przechodzimy do ustawień i odznacza tą opcję kolaboracji.
W ten sposób zablokuje dla innych
współpracowników laboratoriów możliwość edycji np.
właśnie tego tekstu.
Możemy go oczywiście też zmienić tutaj
możemy teraz opublikować zmianę naszej strony wybieram polecenie public domain.
I w momencie gdy zmiana się publikują jeszcze wejdę do ustawień projektu Project
Things a następnie pokażę ci jak wyglądają ustawienia edytora tutaj.
Jeśli przejdziemy do zakładki edytor po prostu dodajemy laboratoria w tym miejscu.
Co prawda ma on jakiś swój status natomiast niestety na razie nie możemy
zarządzać tymi uprawnieniami do edycji naszej strony.
W związku z tym taki edytor będzie mógł
edytować wszystkie wasze kolekcje i wszystkie treści które nie zostały
wyłączone spod edycji właśnie w ten sposób co przed chwilą Ci pokazałem.
Nie mamy jakoś jakiejś szczególnej kontroli myślę że wkrótce to Doda.
Natomiast na razie wygląda to tak że jeśli
nasza strona jest opublikowana i przejdziemy do edycji.
Co prawda teraz nie będę mógł jako edytor już edytować
tego pola Shipping gdyż jest zablokowany ale wszystkie inne pola są możliwe do
edycji jeśli chodzi o Polsce MS a mogę je edytować w ten sposób czyli mogę tutaj
wykonać taką zmianę ale mogę też wybrać sobie polecenie e-commerce.
I stąd mam dostęp do wszystkich kategorii produktów itd.
Jeśli wybiorę produkt przy tej sukience
mam informację że zmiany są zaplanowane bo właśnie dokonałem zmiany nazwy.
Gdy wejdę w jakikolwiek inny produkt mogę
edytować wszystkie jego elementy takie jak bym to robił z poziomu designer a więc
taka osoba która zarządza stroną może tutaj zmienić opcje które są dostępne
warianty zmienić ilość tych elementów które znajdują się na magazynie itd.
Jest to bardzo wygodne.
Nie musimy oczywiście dawać dostępu do lidera tylko nasz klient czy jego
pracownicy będą zarządzać taką stroną właśnie z tego poziomu
możemy zapisać te zmiany i wtedy jeszcze one nie będą widoczne na finalnej stronie.
Czyli jeżeli byśmy zapisali tę stronę to
znowu będziemy mieli dwie nie opublikowane zmiany.
Czy one teraz są za kolejki.
Ale nie są opublikowane
jeszcze jeden sposób w jaki można to zrobić to można zamiast zapisywać zmian to
po prostu zapisać to jako draft czyli zapisać taki.
Będziemy to robili wtedy kiedy dodajemy nowe elementy do kolekcji.
Czy to jest nowy produkt czy również w sekcji e-commerce możemy dodawać kategorię
dyskonty więc będziemy mogli zapisać sobie te elementy przy nowych jako draft jako
szkic i w tym momencie taki draft nie będzie się pojawiał ani w
tej wersji zaplanowanej do opublikowania ani w opublikowanej po kliknięciu PAP
możemy przejrzeć sobie takie zmiany i dopiero kiedy są one OK.
Zapisać i opublikować więc mamy taki 3
stopniowy podział mniej więcej tworzenia treści i dodawania treści.
Mamy też możliwość zarządzania tutaj
akurat kolekcje to blog posty których nie robiliśmy.
Możesz zajrzeć do kursu zaawansowanego jak to jest zrobione.
Są tutaj też dane z formularzy w momencie
gdybyśmy otrzymywali jakieś informacje z formularzy np.
naszego formularza zapisu do zera.
Tutaj te wszystkie wpisy by się pokazywały
aczkolwiek ja pokażę ci jak trochę inaczej można obsłużyć ten formularz.
W końcu mamy sekcję ustawień no i zobaczy
że mamy dostęp do naszego konta czyli do konta obecnego laboratoria który jest
zalogowaniu się ale też do całej sekcji e-commerce.
W związku z tym możemy zmieniać tutaj
wszystkie informacje biznesowe informacje o wypłatach czyli mamy połączonego z lipa
zobacz że status wszystkich form płatności również jest wyłączony.
Stąd możemy włączyć payment czyli Apple Pay i płacenie za pomocą przeglądarki
Dash Border Strip a więc bardzo dużo opcji
zarządzania jest tutaj też dostępne w zasadzie wszystko co mieliśmy w dużej
mierze również definicje podatków krajów do których wysyłamy opcji Shipping itd.
Więc wszystko dosłownie można jeśli chodzi o kolekcję i cały e-commerce
ustawić sobie z edytora jak również można przejść do sekcji Page i każdą z tych
stron można edytować w zakresie w którym zdecydujemy się na to designer.
Więc jeżeli chcemy edytować teraz nagłówek
zmienić tutaj to ten główny element czyli jakąś mamy nową kolekcję.
To również można to zrobić właśnie w ten
sposób edytować nazwę można także edytować zdjęcie klikając na tę ikonkę będziemy
mieli możliwość dodania tutaj nowego zdjęcia.
Tak wygląda panel edytora i to wszystko co
chciałem pokazać ci z tych opcji możesz dodać do kilku laboratoriów w dowolnym
planie możesz sprawdzić jakie plany oferują konkretne opcje.
Jeśli chodzi o ilość współpracowników którzy mogą razem z tobą edytować stronę.
I w zasadzie na ten moment to tyle
dziękuję Ci za uwagę w tej lekcji i do usłyszenia.