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.
Chciałbym w tej lekcji dokończyć taki wstępny etap naszej strony i powiedzieć ci
co na co jeszcze warto zwrócić uwagę w momencie publikowania takiego sklepu.
Wiele z tych opcji umówiłem w kursie
zaawansowanym łeb więc jeżeli interesuje Cię jak dokładnie ustawiać albo np.
jak lepiej skonfigurować SEO dla Twojej
witryny odsyłam Cię do kursu zaawansowanego.
Tymczasem kilka rzeczy które moim zdaniem zdecydowanie warto zrobić to po pierwsze
przejść się po właściwościach stron czyli przy każdej ze stron tutaj panelu.
Teraz mamy małą ikonkę
things I to właśnie w tym miejscu znajdują się informacje dotyczące SEO które warto
uzupełnić takie jak tytuł opis meta który będzie pojawiał się w
wynikach wyszukiwania Open gra Things czyli obrazek który będzie wyświetlany a
także tytuł i możemy te rzeczy zrobić takie same jak w ustawieniach SEO.
Kolejno mamy said serwis Things.
Gdybyśmy korzystali z wyszukiwarki którą umowę omawiamy w kursie zaawansowanym
i Custom Court gdybyśmy chcieli dodać jakieś własne skrypty albo jakiś własny
kawałek kodu poszczególne strony warto tymi rzeczami się zająć.
Ale przede wszystkim uzupełnić zakładkę SEO Other Things oraz Open Things
czyli te ustawienia na potrzeby social media i wyświetlania naszych linków a
także na potrzeby wyświetlania naszej strony w Google.
Tu zresztą jest taka projekcja jak to będzie się wyświetlać w wynikach.
W ten sposób zadbamy o podstawowe SEO i
ustawienia w takich stronach jak strony produktowe czyli stronach fioletowe.
Będziemy mieli możliwość dodania do tytułu np.
też pól które znajdują się w kolekcji.
Czyli powinniśmy np.
tytuł skonstruować w ten sposób że będzie tutaj nazwa produktu i np.
nazwa naszego sklepu albo coś innego jakaś inna ostateczna nazwa.
W każdym razie możemy w tych wszystkich
polach mieć dostęp i korzystać z pól które znajdują się w kolekcji czyli w dynamiczny
sposób stworzyć właśnie te dostosować te ustawienia.
To jest pierwsza rzecz na którą powinniśmy zwrócić uwagę kilka ważnych rzeczy
znajdują się jeszcze w samych ustawieniach projektu.
Jeśli przejdziemy do Project Celtics to
przeniesiemy się stąd do sekcji integracja.
I to jest bardzo fajna rzecz ponieważ pozwala nam automatycznie podpiąć Google
Analytics Optima które pozwala prowadzić testy Google Maps Facebook Pixel.
W zasadzie to co zdecydowanie polecam włączyć w przypadku strony e-commerce.
No to na pewno jest Google Analytics także tłumaczyłem to w kursie zaawansowanym ale
pokaże to jeszcze raz bo jest to jedna z najważniejszych rzeczy.
Wybieramy sobie nowe konto albo wchodzimy
w administrację na naszym istniejącym koncie i tworzymy nowe Property.
Będziemy mierzyć aplikacje łączyć stronę
internetową Continuum nadajemy jej nazwę np.
Mk TP podajemy adres pod którym to będzie
w internecie a następnie wybieramy sobie strefę czasową wybieram polecenie Create.
Oczywiście te wszystkie opcje można łatwo ustawić i nowe Properties zostało
stworzone to co nas interesuje to taking it czyli ten identyfikator śledzenia który
musimy pobrać stąd i po prostu Kliczko w to miejsce.
I teraz uwaga ważna sprawa w przypadku
e-commerce zaznaczam że opcję koniecznie Just Global City.
Dlaczego. Dlatego że automatycznie będzie wtedy to
traktować dane ze sprzedaży w tak zwanym module e-commerce Analytics a to jest
super fajna rzecz że mamy to skonfigurować że tak powiem out of the box ponieważ
teraz w ramach naszej witryny będziemy mogli przejść do sekcji konwersję.
I tutaj mamy wszystkie informacje o
tym jak nasze produkty się zachowują w sklepie.
żeby jednak ta cała sekcja działała jak widzisz tutaj niestety nie jest ona
dostępna dlatego że musimy przejść jeszcze raz do Amina i musimy wejść w ustawienia.
Następnie mamy tutaj coś takiego jak
ustawienia e-commerce e-commerce z Celtics.
I w tym miejscu możemy włączyć e-commerce
powinniśmy to zrobić i tak samo włączymy Enhanced e-commerce Recording.
Wybieram polecenie save.
I teraz już dane zbierane i wysyłane do Google Analytics przez Apple będą widoczne
w tych sekcjach konwersji i e-commerce będziemy m.in. mieli tam dane o
zamówieniach ale będziemy także mieli dane o tym ile osób dodało coś do koszyka na
jakie kwoty były zamówienia i całe to podsumowanie będzie dla nas dostępne.
Więc to jest bardzo ważna rzecz którą
należy włączyć nawet jeżeli na początku nie korzystamy z tych danych ale będziemy
chcieli z nich oczywiście skorzystać później.
Warto żeby te dane już zbierały więc warto po prostu przekazać tutaj Analytics.
Jak widzisz to zajmuje dosłownie minutę.
Co jeszcze warto zrobić w sklepie Google.
Optima jest świetnym serwisem
co do którego pewnie trzeba było zrobić osobne kursy ale polecam Ci było
testowanie tego ponieważ testy w sklepach są dosyć istotne.
To znaczy będziemy wybierać z dwóch wersji strony które przygotujemy w łeb.
Taki wariant który nam lepiej koncertuje
i świetną sprawą jest to że w łeb możemy bardzo łatwo utworzyć klon jakiejś strony.
Wystarczy że sobie publikujemy taką stronę np.
stronę główną i zmienimy coś na niej np.
zmienimy Górny baner będziemy mogli dzięki temu zapełnić testy na obie strony i
Google Optymista powie nam po jakimś czasie jak.
Jest po prostu lepsza i tą stroną sobie zostawiamy więc polecam te eksperymenty
Google Maps nie jest nam koniecznie potrzebne.
Facebook pixel czyli w naszym menadżer
na Facebooku po prostu pobieramy kod piksela i zdecydowanie warto to zrobić.
Polecam ponieważ podobnie jak analityk z
Google Pixel będzie zbierał dane z naszej witryny i nawet jeśli nie zdecydujemy się
ich od razu wykorzystać to te dane po prostu tam będą.
Będziemy mogli sprawdzać analityka również
na facebooku ale oczywiście te dane mogą przydać się nam później do remake ratingu
czyli do traktowania osób które były wcześniej na naszej stronie albo np.
dodały coś do koszyka ale nie kupiły.
Może dzięki temu że mamy zainstalowany
Pixel dla takich osób i tylko takich osób wyświetlić reklamy na Facebooku więc
Facebook Pixel IT zdecydowanie warto tutaj również dodać no i tyle stąd z
zakładki integracja ale wejdziemy jeszcze na chwilę do lidera ponieważ znajduje się
tutaj jeszcze jedna opcja na którą chciałbym zwrócić Twoją uwagę.
Mianowicie jeśli przejdziemy do ustawień
e-commerce a następnie przejdźmy do serii X a następnie e-commerce i tutaj wejdziemy
do sekcji integracja to mamy integrację które możemy włączyć.
Jest to Facebook oraz Google.
To jest tak zwany inwestor zarówno
Facebook jak i Google posiadają taki moduł który pozwala synchronizacji.
Nasz katalog produktów z katalogiem właśnie na Google oraz na Facebooku.
Dzięki temu będziemy mogli prowadzić ciekawe kampanie produktowe przykładowo
reklamować w karuzeli zdjęcia naszych produktów na google czy na Facebooku.
Będziemy mogli też marketingową osobę czy
Target osoby które oglądały konkretny produkt np.
jakąś sukienkę i będziemy mogli wyświetlać reklamy z katalogu produktów w sposób
zautomatyzowany dzięki czemu jak ta osoba wejdzie na Facebooka.
Zakładamy że np.
nie kupiła naszego produktu to dostanie jego reklamę pojawi się zdjęcie sukienki i
my tej reklamy nie musimy ustawiać w żaden sposób.
Tylko musimy mieć skonfigurować katalog produktów na Facebooku i na Google.
Więc zdecydowanie polecam wybieramy serwis
Facebook i po prostu włączamy synchronizację katalogu dostajemy teraz
data Fit URL który trzeba sobie po prostu stąd wziąć.
A następnie pójść do Facebooka zalogować
się do naszego Business Managera a następnie z poziomu Business menedżera
wybrać te rozwijane menu polecenie katalog menadżer.
To się bardzo często zmienia i w ogóle interfejs wygląda co chwilę inaczej więc
po prostu musisz przejść do zarządzania katalogiem.
Ja tutaj mam już jakiś katalog stworzone ale my po prostu musimy stworzyć sobie
nowy katalog czyli katalog teraz będziemy chcieli wybrać jedną z
opcji w zależności od tego co sprzedaje nasza strona.
W moim przypadku będę sprzedawał po prostu produkty on line e-commerce.
Kolejny krok to metoda Apple.
Możemy albo Apple hodować dane manualne
czyli używając jakiegoś pliku co eksportowane go złapią albo Fidel zaraz
pokażę ci jak to zrobić albo połączyć to automatycznie.
Niestety w tym momencie Apple nie jest tutaj wspierane jako platforma możemy
automatycznie się przykładowo połączyć z szopki i zaciągać stamtąd dane produktowe.
My będziemy jednak musieli wybrać opcję
Apple od product info ale zaraz pokażę ci co zrobić dalej.
Teraz nadajemy odpowiednią nazwę do katalogu np.
katalog http: web Suite opcjonalne więc warto uzupełnić na razie nie będę tego
robił i teraz musimy przejść do przejrzenia tego katalogu.
Ten katalog teraz się tworzy ale
najważniejsze jest to żeby zasilić ten katalog danymi.
To znaczy że muszę w pewien sposób grać
moje produkty wybieram polecenie ADD product.
I tutaj mamy kilka opcji możemy ewentualnie dodać produkty czyli
zaplanować jakiś plik albo po prostu wpisać dane produktów.
Możemy też użyć takiego back Apple czyli właśnie w sposób zautomatyzowany dodać
produkty albo użyć piksela po to żeby automatycznie wykrywa rzeczy które są na
naszej stronie w tym przypadku my użyjemy tego back Apple out a następnie wybierzmy
Next i zamiast tutaj tworzyć pliki Apple ładować plik.
Wybierzemy opcję
fit to informuję Facebooka że mamy taki plik w którym będą na bieżąco
aktualizowane dane do katalogu i te dane do katalogu będzie stamtąd pobierał po
prostu co jakiś czas kolejno ląduje na stronie ESET App fit.
No i to jest właśnie to miejsce w którym w
które mamy ten link do filmu wygenerowane go złapią.
Dzięki temu wybieram polecenie Next Web Lock będzie automatycznie w momencie
dodania nowych produktów sobie taki film zapisywał.
My możemy wskazać co ile te produkty się aktualizuje.
Możemy wybrać na przykład liczyć co godzinę.
Facebook ma zaglądać do tego pliku i
sprawdzać czy nie ma przypadkiem tam żadnych nowych produktów i to jest
najczęściej jak to jest możliwe na Facebooku więc zostawiamy tę opcję tutaj
jeszcze wybieramy domyślną walutę u nas w sklepie jest to euro jak również
możemy nazwać to data Source tak żebyśmy po prostu mogli odnaleźć się w panelu
wszystko jedno jaką nazwę posiadamy ale żeby nam się kojarzyła właśnie z tym
filmem który stworzyliśmy wybieram polecenie Apple.
Teraz produkty są planowane czyli
teoretycznie Facebook weryfikuje teraz ten plik czy jest zgodny z jego standardem i
buduje sobie wszystkie produkty do katalogu.
Aha jedna ważna rzecz w trakcie tego blogu
pamiętaj żeby zapisać wcześniej te zmiany które wprowadziła.
łeb i opublikować swoją stronę dopiero wtedy kiedy napiszemy zmianę.
Wygenerowane linkiem i opublikujemy te
dane będą dostępne dla Google'a czy dla Facebooka.
Jak widzisz już mamy 17 produktów dodanych do filmu.
Dlaczego 17.
Bo każdy wariant naszego produktu jest oczywiście traktowany jako osobny produkt.
Możemy teraz przejść już do sekcji Home.
W zasadzie może do produkcji i zobaczyć
nasze produkty i zobacz że mamy produkty i również część
z nich jest oznaczona jako opcje czyli produkty będą to te warianty kolorystyczne
oraz warianty rozmiaru więc mamy cztery główne produkty ale w
każdym z nich opcje zostały wprowadzone jako osobny produkt.
Szczerze mówiąc jeżeli wcześniej robiłeś jakieś e-commerce i np.
chciałbyś się zająć tymi rzeczami czyli
wdrożyć manualną obsługę tych rzeczy które pokazałem się tylko w tej lekcji czyli
obsługę Google Analytics oraz rozszerzonego e-commerce które w Google
Analytics pokazuje nam dane o produktach sprzedaży dodaniu do koszyka itd.
Jak również zrobić produkt na Facebooka i na Googla to wiesz że kosztuje to kilka
tysięcy złotych Development i kilkadziesiąt godzin pracy programisty.
I to jest właśnie ta ogromna przewaga.
Oczywiście nie mówię że inne systemy nam tego nie dają ale Web Lock daje nam
pełną kontrolę od samego procesu projektowania strony przez edytor i CMS aż
do takich rzeczy jak marketing i analityka.
W związku z tym jest to naprawdę bardzo
potężne narzędzie zwłaszcza jeżeli chcemy bardzo szybko postawić stronę.
Zwróć uwagę na to że my mamy niepełne 4
godziny kursu a już mamy całą stronę postawioną i dodatkowo ja masę jeszcze
rzeczy dookoła tłumaczyłem w związku z tym taką stronę można po prostu postawić sobie
w godzinę i działa razem z wszystkimi integracja mi także z analitykiem jak
również katalogiem produktów zarówno na Google jak i na Facebooku.
W tej sekcji integracji jeśli spojrzeć na Facebook ma teraz status włączone.
Natomiast jeśli spojrzeć na Google to możesz też na dokładnie tej samej zasadzie
to włączyć będziesz musiał tylko zarejestrować się w serwisach Googla
i tam po prostu też stworzyć katalog jest to procedura prawie
identyczna jak przerabialiśmy przed chwilą więc nie będę już jej dodatkowo pokazywał
a jeszcze jedną rzecz którą możemy automatycznie wygenerować w Project Things
co ci polecam to w sekcji SEO możemy oczywiście włączyć indeksowane w naszej
stronie w momencie gdy już domenę na właściwą.
Ale chodzi mi tutaj o mapę oraz Google hardware Fiction.
Włączamy automatyczne generowanie Suite Mapy i zapisujemy tę zmianę.
W tym momencie mapa dla Google z wszystkimi linkami do naszych produktów
zostanie automatycznie wygenerowane i też nie musimy się tym przejmować.
A taką gotową mapę będziemy jeszcze musieli zgłosić czyli link do tej mapy.
Czyli twoja domena pod jaką postawił sklep a następnie Suite map XML będziemy musieli
wstawić do narzędzi deweloperskich Google więc kolejną rzeczą którą robisz jest
przejście do Google Search konsol zarejestrowanie się w Google Search konsol
i wpisanie tutaj weryfikacji na ile pokazywały to w kursie zaawansowanym.
Czy na tym etapie już nie będziesz miał problemu z tym żeby
właśnie takie konto Google założyć i znaleźć tam Every Fiction ID.
Bo tutaj zapisujemy a dodatkowo w
ustawieniach konsol w sekcji Suite Mapy wklej link do Twoja domena Sigma XML i
wtedy masz też automatycznie skonfigurować indeksowane w Google oraz Sigma.
Więc to też jest kolejna znaczna oszczędność czasu wybieram polecenie
zapisuje tę zmianę i tak jak wspomniałem
też w tej sekcji hosting konieczne jest dodanie twojej własnej domeny.
Tutaj znajduje się sekcja Custom Domain.
Pokazałem to w kursie zaawansowanym
natomiast dodanie tej domeny sprowadza się do tego że wybierasz dodanie
istniejącej domeny najczęściej czyli masz już ją wykupione u jakiegoś dostawcy
jakiegoś jakiegoś idea wprowadza jej dane przykładowo wprowadza domenę Google z
którą mógłbym tutaj dodać a następnie będę miał za zadanie dodać rekordy do tej
domeny czyli będę musiał wejść do ustawień mojego lidera tej domeny a następnie
skopiować rekordy i wpisać je dodać je do domeny dodać w sekcji przekierowanie DNS
Record a przekierowanie na konkretny adres IP.
Będę mógł sprawdzić sobie status i dodać
jeden rekord w przypadku przekierowania z adresu WWW na bazę WWW.
W zasadzie jest to naprawdę proste i też
powinieneś już na tym poziomie spokojnie to zrobić.
Następnie oznaczane tą domenę jako główną czyli wybieramy przy niej tę sekcję Magdę
i wtedy możemy nawet mieć tą domenę testową.
Ona nie będzie indeksowane i domenę naszą główną pod którą stoi nasz sklep.
Gdybyśmy potrzebowali zrobić jakieś
przekierowania 301 czyli przepisać niektóre z np.
starych adresów które zaktualizowany do
produktów na jakieś inne produkty możemy zrobić to tutaj w sekcji 301 Direct.
No i jeszcze jeśli chodzi o zaawansowane
opcje publikowania to polecam w wersji produkcyjnej mini firmować także pliki CSS
po to żeby nasza strona ładowania się jeszcze szybciej.
Ogólnie lepszą jest bardzo wydajne jeśli chodzi o nasz sklep który np.
dostępny jest z całego świata.
Będzie on działał szybko ponieważ.
Oferuje dostęp do serwerów CDN czyli takich serwerów które dystrybucją treści
tak aby była ona jak najbliżej użytkownika na całym świecie.
I dodatkowo jeszcze te wszystkie opcje
pozwalają Wam zoptymalizować jej działanie.
Więc to wszystko co chciałem pokazać i wytłumaczyć w tej lekcji.
Ja nie będę tutaj dodawał nowej domeny
więc po prostu usuną te rekordy i dziękuję Ci za uwagę.
Teraz do usłyszenia.