Webflow: Strona główna
E-commerce
3 godz. 52 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Praktyczny projekt sklepu krok po kroku
- Wdrożenie autorskiego layoutu sklepu
- Struktura magazynu, cen i wysyłek
- Przyjmowanie płatności w sklepie
- Rozszerzenia i automatyzacje
- Zarządzanie sklepem przez klienta
Sklep bez kodowania
Z 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.
Autorski layout
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.
Sprzedaż produktów cyfrowych
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.
Kompletny sklep krok po kroku
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.
Rozszerzenia i automatyzacje
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!
Budowanie rozwiązań dla klientów
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.
Dla kogo jest ten kurs?
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ę.
W kolejnej lekcji w której przygotujemy stronę główną mamy po lewej stronie tekst
po prawej stronie obrazek i pierwszy element który stosujemy to jest właśnie ta
sekcja intro HDR tutaj mamy intro content i intro tekst możemy w zasadzie to
zostawić bo to są dokładnie te elementy struktury którą potrzebujemy
i weźmiemy tylko intro content a następnie wyrównany tekst do lewej strony.
Sami intro teksty jest tutaj wyrównane na auto więc od lewej strony dajmy mu po
prostu margines zero i zobacz że wit ma 80 proc.
więc jeśli zmienimy to na przykład na 35
to w zasadzie można powiedzieć że jesteśmy już bardzo blisko celu albo prawie w domu.
Tutaj jeszcze możemy zobaczyć jak prezentują się odstępy i margines czyli
przykładowo całe intro content jaką jest wyrównane i mamy po prostu 70 proc.
więc możemy ewentualnie zmieniać np. dać 80 proc.
żeby bardziej ten tekst odsunąć ale generalnie pozostawiamy to tak jak jest
intro HDR zmienimy w ten sposób że tutaj jest podłożona obrazek jako tło i świetnie
wybierzemy obrazek tylko skorzystamy z innego obrazka.
I ja przygotowałem dla ciebie mnóstwo obrazków z których możesz wykorzystać.
Znajdziesz je w folderze z plikami źródłowym.
Ja tymczasem właśnie umieszczamy jeden z takich obrazków jako tło a następnie
ustawiamy go w ten sposób że wyrównanie damy sobie na 100 proc.
jest 50 to natomiast wybieram polecenie
Custom jeśli chodzi o rozmiar i wybiorę do niego chyba 100 proc.
czyli w wysokości 100 proc. .
Trzeba dobrze wpisać jeszcze musimy wybrać opcję na brak.
Teraz jest jeszcze jedna sprytna sztuczka
a w momencie gdy mamy otwarte jeszcze ja czasem lubię sobie przejść po widełkach
Response jednak zauważ że przejście widok jest pasywne nie zamyka tego okienka a
dzięki temu możemy naprawdę bardzo szybko dokonać tej modyfikacji.
W wariancie np. tablet bowiem w dół itd.
Akurat w tym przypadku fajnie by było
zrobić sobie biegnąca cover I w ten sposób to wykonamy od tabletu w dół czyli na
telefonie jak i na małym telefonie będziemy mieli backup cover.
Będzie to wyglądać nieźle a tutaj mamy właśnie wyrównanie do prawej strony więc
szybko można ogarnąć Response właśnie w ten sposób.
Teraz tak mamy tutaj Harding bo ja odsłonę tą klasę nie będę chciał z niej korzystać.
Na dobrą sprawę możemy też usunąć całego tekst z blokadą i
wrócimy po prostu Helsinki będzie to Helsinki ale problem tutaj polega na tym
że mamy jakiś kolor tekstu który jest dziedziczone pewnie z intro tekstu.
No właśnie teraz może z resetu intro HDR
to dziedziczy więc kolor z resetu i ma do tego domyślne.
Dzięki temu będziemy mieli nasze oryginalne kolory nagłówków.
No i teraz co wrzucamy po prostu teksty.
Zrobiłem to już z pomocą magii kina a teraz weźmy kolejne elementy.
Czyli mamy taki nagłówek Weekly jej twarz i tutaj możemy wrzucić.
Nie jest nam potrzebny ten paragraf nie jest potrzebny DVD.
Ale z tego great a możemy skorzystać. Czemu nie.
Potrzebujemy jedynie trzy sekcje
i może za modę lubimy te sekcje czyli wyjdziemy z tego.
Z edycji Grid i może jeden paragraf
usunięte dodamy nagłówek czyli link i łączymy to wszystko w jeden techniczny
blok po to żeby mogło się to znaleźć w jednej komórce grid czyli tak wrócimy.
Zarówno Harding jaki paragraf do środka.
Następnie ten blog nazwiemy np.
typ tego główka to będzie link drugiego typu i cały Finger możemy sterować w ten
sposób żeby teksty w nim były wyrównane do środka.
I to już zaczyna wyglądać tak jak tutaj.
Poza tym mamy jeszcze obrazek.
Czyli tak może najpierw kopiuje tekst.
Jak już tutaj jestem przy okazji ale
dorzucił do tego Fisher jeszcze obrazek wybierzmy
i możemy go oczywiście osadzić też jako tło.
Aczkolwiek wydaje mi się że akurat w tym
przypadku lepiej gdyby to był obrazek stawiamy właśnie jako image.
Jeśli teraz na ten obrazek damy
wyświetlanie display in line blog to on odziedziczył właściwości Fletcher
wyrównania i będzie wyrównany ładnie do środka.
Teraz do tego obrazka wybieramy polecenie
i widzimy tutaj obrazki które mamy przygotowane to jest kilka ikon
które teraz dodamy w zasadzie w dowolnej kolejności np.
To będzie pierwsze mamy małe logo i jeszcze skupiłem się na.
Treść mamy w zasadzie gotowy.
Cały taki element cały kontener figur więc możemy go w klasie 2 razem automatycznie
wskoczyć w grilla a naszym zadaniem jest po prostu skorzystać z innych obrazków.
I tutaj też powinniśmy sobie szybko obrazek.
Jak już to robimy oraz innych treści które
są przygotowane tutaj kopiuj wklej same więc mamy kolejną sekcję zrobioną i
nie zajęło nam tak dużo czasu przez robienie tej istniejącej struktury w
zasadzie ja w ogóle nie wzorowali się na niej budując Little J.
Ale okazuje się że była tutaj do
wykorzystania jak najbardziej zarówno ta górna część jak i to co jest poniżej.
To co jeszcze musimy zrobić to Machine Head rap może wycen trójek po prostu tekst
i też jest w porządku więc zobaczmy wygląda dokładnie tak jak na projekcie.
Nie robię tego co prawda co do piksela ale myślę że nie jest to konieczne.
Następnie mamy Wejchert produkt i to już
jest sekcja która zawiera Collection list raper jest on podłączony do produktów i są
wyświetlane produkty jako kafelki super no to najpierw musimy po prostu wkręcić tutaj
naszą własną nazwę czyli zmienić to sobie z 2 do 32 usunąć paragraf Beger.
No i w zasadzie już jesteśmy w domu.
Teraz trzeba zmienić sterowanie obrazków zobaczmy jak to wygląda tutaj mamy taki
kawalek gdzie wysokość to 440 mamy trochę zaokrąglone krawędzie no i troszkę inaczej
wygląda ta dolna część czyli zmiany które musimy wykonać do sklepu.
W zasadzie mogłyby polegać na tym tutaj mamy absolutną moglibyśmy zmienić to na
statek i wyciągnąć to ze środka z tego meczu.
Natomiast produkt i mecz rap jest dość sensowną strukturą dlatego że mamy tutaj
link do Can't product czyli to automatycznie link do obecnego produktu.
Natomiast to są zwykłe teksty bloki więc
musielibyśmy mieć na linki link do produktu więc wydaje mi się że to jest
sensowne żeby to zostało w tym jednym linku.
W związku z tym produkt Desire możemy po prostu odsunąć.
Mamy 30 pikseli od dolnej krawędzi możemy odsunąć jeszcze niżej.
Oczywiście to determinuje też to że cała np.
kolekcja czy Collection Collection Lab powinien mieć dostać
dodatkowy margines od dołu żeby zrobić miejsce na te produkty.
Wydaje mi się że to jest właśnie spoko że to jest OK.
Moglibyśmy tak zrobić.
Weźmy teraz produkt dyscyplin zmienimy kolor tekstu na nasz kolor
i możemy jeszcze zmienić tutaj rozmiar na 16 i 24.
To jest nietypowy rozmiar dla nas więc możemy zostawić tę klasę próbach na tekst
a następnie jeszcze usunięte opcje kapitalizm.
I chyba fajnie by było gdyby projekt
ten cały wyrównał nam wszystkie treści do środka.
No i z racji tego że prawda jest krytyczny
teraz nie ma określonej szerokości to kiepsko się to cenzuruje więc moglibyśmy
tutaj jako Unity po prostu posiadać 100 proc.
czyli całą szerokość tego kontenera czyli rapu.
Natomiast wygląda na to że teraz tę pozycję musielibyśmy po prostu wyzdrowieć
tutaj moglibyśmy w zasadzie zrobić to auto wszystko jedno i teraz wygląda to dobrze.
A przy okazji jest również linkiem do produktu.
Szczerze mówiąc podobają mi się takie wysokie zdjęcia.
Te zdjęcia są robione tej takiej portrety
owej stylistyce i one rzeczywiście powinny pokazywać cały produkt.
Więc chyba nie jestem fanem tego żeby cały taki kolekcje czy
to samo to zdjęcie jakoś mocno tutaj zmniejszać ono ma 620 pikseli.
Moglibyśmy ustawić 520 nadal jest OK.
Gdybyśmy chcieli to zdjęcie jeszcze by
lepiej wyglądało bo zwykle modelki właśnie są w ten sposób prezentują się te ubrania
więc moglibyśmy to umieścić jeszcze od góry.
I jest wydaje mi się że teraz naprawdę
dobrze i moglibyśmy zrobić ostatnią rzecz czyli Border Raiders ustawić sobie na 12.
Przejdźmy teraz do samych ustawień kolekcji do things.
I tutaj mamy sort order czyli mamy
sortowanie po dacie stworzenia ale mamy najstarsze do najnowszych chcielibyśmy
najnowsze najstarsze wybieram ale już na przykład powiało
no i albo możemy wyłączyć aplikację albo możemy zrobić coś mniejszego czyli np.
wyświetlać tutaj więcej wyników czyli sześć wyników.
No problem tutaj będzie polegał na tym że my mamy tylko cztery wyniki
więc nie wygląda to jakoś czołowo ale przy okazji pozwoliła nam zdiagnozować jeszcze
jeden problem moglibyśmy na ten cały Product Image arab.
W zasadzie na całego np.
kolekcję powiększyć teraz trochę margines
tak żeby było widać nasze kolejne produkty.
No i teraz jest ok bo jeśli mielibyśmy
więcej produktów byłoby tu wyświetlanych 6.
Niestety mamy tylko 4 w ogóle w sklepie więc chyba warto ma Collection listę raper
po prostu wybrać pokazywanie trzech rytmów na razie i to jest ok możemy tak zostawić.
Teraz korzystaliśmy z tej gotowej kolekcji z kolekcji rapera i gdybyśmy chcieli
rzeczywiście użyć jakichś innych dynamicznych danych które mamy w bazie no
to tak jak w kursie zaawansowanym musielibyśmy korzystać z Collection lista.
Wróćmy do sekcji.
W ten sposób następnie połączyć to
przykładowo kategoriami kolejno mamy tutaj.
Nowości musielibyśmy do niej tylko w
filtrowanie czyli przejść do tej sekcji ustawień.
Następnie jako filtry wybrać np.
name głos New wybieram polecenie Save i
wtedy mamy tylko dane z kategorii nowości i wtedy możemy na np.
wstawić tutaj Button jeśli wstawił bym do środka przycisk moglibyśmy wybrać Get
tekstem kategorii i wybieramy nazwę ponieważ mamy tylko no to możemy
publikować to do tej karty kategorii czyli do kategorii właśnie z nowościami wtedy
możemy taki przycisk sobie jeszcze dodatkowo oscylować.
Stworzyłem
taką klasę baton 2 która ma combo klasę baton out i możemy wtedy właśnie
sobie zrobić taki przycisk który niestety nie mamy możliwości wystawienia
do tego Batmana jakichś dodatkowych rzeczy.
Przykładowo jeśli chcielibyśmy tutaj dorzucić kolejny tekst blog no to nie
jesteśmy w stanie go sparować z betonem więc gdybyśmy chcieli tutaj Custom owy
jakiś tekst wrzucić no to albo musimy to podpiąć w zasadzie możemy to zrobić.
Czyli wybrać polecenie Get Extreme
kategorii i po prostu to odznaczenie a następnie wpisać się o New.
Ewentualnie musielibyśmy zbudować sami taki baton link bloku i z bloków które
znalazłyby się w środku także po to żeby dać dynamiczne połączenie
musielibyśmy sobie wstawić kolekcję tę kolekcję możemy teraz jeszcze wewnątrz
niej elementy wycen zrobić tak żeby budzik znalazł się na środku i sam Collection
list raper mógłby dodatkowo mieć jakiś margines tutaj na dole.
W ten sposób a teraz dostał klasę może nie
jest to jakaś najszczęśliwszy klasa nazwijmy to Mor Collection.
I w ten sposób dynamicznie połączyli to z
danymi z kolekcji i kategorii tak aby do odpowiedniej kategorii dziękować.
Moglibyśmy zrobić to też w inny sposób.
Mamy na przykład tę stronę kategorii
wygenerowane automatycznie przez nasz CMS chyba że w ogóle tutaj już powstały
automatyczne takie kategorie które stworzyliśmy.
Możemy się pomiędzy nimi przełączać np.
możemy przejść do kategorii New.
Te produkty mają ustawioną tam flagę New
natomiast jest to zrobione w ten sposób że jeśli opublikowaliśmy naszą stronę to
teraz przeglądając jej adres zobacz że mamy kategorię New kategorię Jam Wschód i
Zachód i moglibyśmy to po prostu skopiować.
Linki oczywiście są tutaj generowane
dynamicznie ze sklepu z kategorii które mamy.
Zobacz że dres ma po prostu lub ustawiony na dres i w związku z tym będziemy mieli
dopisane kategorie a następnie dress to jest nazwa tej kolekcji a później mamy tę
nazwę którą ustawiamy jako szlak więc te rzeczy moglibyśmy też jakby ostatecznie
produkować ale nie widzę takiego powodu takiej potrzeby.
Jeśli możemy to zrobić dynamicznie w ten sposób zmieniając np.
nazwę tutaj nic nam się nie zepsuje bo
zmieni się link zmieni się logo ewentualnie
lokowanie ze strony głównej się nie zmieni więc wróćmy na stronę główną do strony
kategorii jeszcze przejdziemy w kolejnych lekcjach i np.
przyciskiem który mógłby być zrobione za pomocą bezpośredniego linku jestem
przycisk który znajduje się w głównym eterze gdzie możemy ewentualnie zmienić go
właśnie w ten sposób że przejdziemy do ustawień no i tutaj będziemy linki do
teraz link do strony produktów ale chcielibyśmy link do jakiejś konkretnej
kolekcji i wtedy rzeczywiście warto by było po prostu publikować albo jakiś
konkretny produkt albo konkretną kategorię stąd moglibyśmy w lać.
Nasz czytelnik on akurat jest na razie do wepchnął ale powinien prowadzić docelowo
do naszej domeny i w ten sposób rzeczywiście możemy łatwo to zrobić.
Aczkolwiek proszę pamiętać o tym że nie jest to rozwiązanie takie najbardziej
elastyczne i może spowodować pewne problemy.
Następnie mamy do zrobienia niż lider a także.
Chciałbym zrobić to w kolejnych lekcjach. Do usłyszenia.