Skórka zaprojektowana z myślą o branży modowej i beauty, a także grupie docelowej - czyli użytkownikach mobilnych. Wyróżnia ją estetyczna prezentacja produktów, tak aby jak najlepiej wyeksponować ubrania, buty czy dodatki oraz umożliwić prosty wybór opcji i wariantów. W tym celu z lewej strony dodaliśmy miniaturki zdjęć, aby umożliwić zaprezentowanie wszystkich cech produktu na zdjęciu. Również do wariantów, takich jak inny kolor wstawisz zdjęcia. Opis i dane techniczne zostały przeniesione na prawą stronę. Z kolei moduł z opiniami wyróżniliśmy na dole. Sklep stworzony na skórce Modimo działa szybko intuicyjnie również na urządzeniach mobilnych, strony produktowe oraz kroki koszyka są przystosowane do wygodnego przeglądania na smartfonach.
Jak stworzyć sklep internetowy jak Modimo.sellingo.pl?
Skórkę możesz zmienić w każdej chwili, pamiętaj jednak, że podczas aktywacji nowej skórki utracisz zapisane w konfiguratorze wyglądu sklepu dane — takie jak kolor przycisków czy układ menu. Możesz je zachować, edytując zainstalowaną skórkę. Po zmianie skórki banery pokazane na demo mogą zostać zaciągnięte do Twojego sklepu. Pamiętaj, jednak że nowy układ banerów zastąpi Twój dotychczasowy. Jeśli nie chcesz utracić wprowadzonych wcześniej danych, podczas aktywacji skórki zaznacz „Nie”.
W tej instrukcji przedstawiamy Ci krok po kroku, jak stworzyć stronę główną sklepu na wzór Modimo.sellingo.pl.
1 Stwórz własne banery
W tym celu przygotowaliśmy dla Ciebie gotowe banery, które możesz dowolnie edytować w aplikacji Figma. Figma to bezpłatny, prosty w obsłudze edytor grafik, konto zarejestrujesz pod tym linkiem: https://www.figma.com/. Pobierz paczkę z banerami, a następnie przetransportuj go do swojej Figmy, aby móc edytować grafiki.
W poniższym filmie przedstawiamy Ci jak edytować banery zgodnie z Twoimi potrzebami. Po ich zapisaniu i pobraniu możesz przystąpić do dodawania ich w Sellingo.
→ Zobacz, jak edytować grafiki
2 Dodaj Twoje własne logo
logotyp możesz wstawić w dowolnym rozmiarze, ale zostanie on skompresowany do poniższych wymiarów:
max-width: 180px;
max-height: 64px;
3 Aktywuj skórkę
Aby aktywować skórkę, najpierw należy ją zainstalować. Zrobisz to w panelu administracyjnym Sellingo, w zakładce Administracja → Wygląd sklepu. Na dole karty znajdziesz dostępne skórki, wybierz Modimo. Proces instalacji skórki powinien trwać maksymalnie kilka minut, po jego zakończeniu należy aktywować skórkę, klikając w zaznaczony na screenie przycisk.
W tym momencie możesz zdecydować, czy wgrać przygotowane przez nas w Modimo.sellingo.pl banery i układ strony głównej, czy zachować dotychczasowe zmiany.
Jeśli wybierzesz TAK, przejdź od razu do punktu 4. Jeśli nie chcesz tracić aktualnych banerów, wybierz NIE i skonfiguruj ręcznie wygląd strony głównej. 4 Ustaw wygląd strony głównej
W pierwszej kolejności skonfiguruj układ strony głównej, aby umożliwić dodawanie banerów. Edytuj skórkę, a następnie w ustawieniach skórki przejdź do Wyglądu strony głównej.
Za pomocą myszki przesuniesz elementy do sekcji Aktywne, aby wskazać kolejność wyświetlania banerów, grup produktowych i kategorii. Układ banerów wybierzesz, edytując dany element. Z kolei do grup produktowych przypiszesz liczbę wyświetlanych produktów.
Wzorując się na sklepie Modimo.sellingo.pl, powinieneś uzyskać taki kształt strony głównej. Oczywiście elementy możesz dowolnie zmieniać.
Wyłącz separator sekcji elementów strony głównej, aby pozbyć się linii pomiędzy banerami na stronie głównej Twojego sklepu.
Po zbudowaniu właściwego układu strony - zapisz zmiany.
Możesz również skorzystać z wczytania całego układu strony głównej razem ze stworzonymi na Modimo.sellingo.pl banerami, klikając guzik na niebieskim tle.
5 Zmień czcionkę
W edycji skórki możesz zmienić również czcionkę na tę zastosowaną w sklepie Modimo.sellingo.pl. Wybierz z listy Josefin Sans. Możesz zostawić domyślnie ustawioną czcionkę lub wybrać dowolną inną - pamiętaj jedynie, żeby obsługiwała polskie znaki. Zapisz zmiany.
6 Zmień kolory
W tym samym miejscu ustawisz kolorystykę sklepu. Modimo ma czarne akcenty, więc w zaznaczonych na poniższym screenshocie miejscach musisz zmienić kolor na czarny. Kolorystykę najlepiej dopasować do barw marki i logo sklepu, aby zachować spójność.
Zapisz zmiany. 7 Wypośrodkuj menu
W sklepie Modimo.sellingo.pl menu jest wypośrodkowane. Możesz w ten sam sposób zmienić układ menu w swoim sklepie, wklejając w polu CSS poniższy kod:
Pamiętaj, że jeśli chcesz, dowolnie możesz zmieniać układ elementów na stronie, np. w stopce. Więcej na temat konfiguracji ⇨Jak skonfigurować wygląd sklepu Sellingo?
9 Wgraj banery
Po ustawieniu wyglądu strony głównej możesz przystąpić do wgrywania banerów. Przejdź na kartę Reklama → Bannery. Utworzona liczba linii odpowiada liczbie banerów w aktywnych elementach. Większość grafik ma zmienione rozmiary, więc oprócz wgrania nowych zdjęć, musisz dostosować też ich wysokość. Jeśli skorzystałeś z automatycznego wczytania układu strony wysokości zostały automatycznie dopasowane do użytych banerów - pomiń więc ich zmianę. Edycję zaczniemy od początku:
Strona główna. Linia 1, wymiar 1340x480
Kliknij ołówek w elemencie Linia 1, a następnie usuń automatycznie wgrany obrazek w slajdach. Stworzony w szablonie Figmy przez nas baner ma wymiary 1340x550. Musisz więc zmienić wysokość baneru na 550 pikseli. Zapisz zmiany. Kliknij Dodaj zdjęcia i wgraj baner 1. Koniecznie zachowaj taką kolejność wykonywanych działań. Możesz wstawić dowolny link, kierujący np. w odpowiednie miejsce w Twoim sklepie.
Możesz również dodać więcej banerów, wtedy będą się przewijały, zgodnie z czasem ustalonym w polu Opóźnienie (w sekundach). Po zapisaniu danych (przycisk Zapisz), wyczyść bufor, aby zobaczyć zmianę od razu na Twoim sklepie.
Strona główna. Linia 2, wymiar 425x330
Wgraj banery w każdym z trzech miejsc na wzór Baneru 1. Tym razem ustaw wysokość baneru na 96 pikseli. Te banery możesz podlinkować do stron informacyjnych w Twoim sklepie. Zobacz jak dodasz stronę ⇨Jak dodać nową Stronę informacyjną?
Strona główna. Linia 3, wymiar 425x330
W tym przypadku ustaw wysokość każdego z trzech banerów na 765 pikseli. Te banery możesz podlinkować do kategorii produktowych w Twoim sklepie.
Możesz również stworzyć kategorie Nowości, do której ręcznie przypiszesz istniejące już produkty. W tym celu w edycji skórki sklepu zamiast elementu Nowości przeciągnij Wybrana kategoria i z listingu wybierz właściwą kategorię.
Kolor etykiety „nowość” zmienisz w konfiguratorze wyglądu sklepu, czyli w edycji skórki.
Strona główna. Linia 5, wymiar 1340x480
Dodaj zdjęcie na wzór Baneru 1. Wysokość tego baneru w projekcie powinna mieć 806 pikseli.
Strona główna. Linia 6, wymiar 645x365
Dodaj dwa zdjęcia w takiej kolejności jak na poniższym przykładzie. Każde ma wysokość 435 pikseli.
Strona główna. Linia 7, wymiar 645x365
Dodaj dwa zdjęcia w takiej kolejności jak na poniższym przykładzie. Każde ma wysokość 435 pikseli.
Strona główna. Linia 8, wymiar 645x365
Dodaj dwa zdjęcia w takiej kolejności jak na poniższym przykładzie. Każde ma wysokość 168 pikseli.
Aktualności
Aktualności w Sellingo służą do prowadzenia bloga w Twoim sklepie internetowym. Artykuły dodasz w zakładce Treści → Aktualności.
Producenci
Ostatnim elementem strony głównej w Modimo.sellingo.pl są nazwy producentów. Element będzie widoczny w sklepie po włączeniu modułu Producenci w Ustawieniach zakładki.
Asortyment → Producenci → Ustawienia → Moduł włączony Dowiedz się więcej ⇨
Wygląd listy producentów na stronie głównej zmienisz w edycji skórki.
Skorzystaj z naszej oferty graficznej
Jeśli potrzebujesz pomocy w stworzeniu najlepszego układu strony wraz z profesjonalnymi banerami, sprawdź naszą ofertę pakietów graficznych. Na Twoje zlecenie możemy wykonać także indywidualny projekt Twojego sklepu, aby maksymalnie wyróżniał się na tle konkurencji.
Karta produktu
W skórce Modimo, gdy tworzysz produkt z różnymi wariantami, sposób wyświetlenia tych wariantów w karcie produktu będzie zależał od nazwy wariantu. Jeśli dodana opcja wariantu ma nazwę ROZMIAR lub KOLOR, w karcie produktu będą pokazywać się graficzne przyciski wyboru wariantu. Natomiast, jeśli opcja wariantu ma inną nazwę, np. MATERIAŁ, MODEL, ZAPIĘCIE, to warianty w skórce Modimo będą wyświetlane w liście rozwijanej w karcie produktu.
Zobacz demo: https://modimo.sellingo.pl/
Zapisz zmiany.
Zapisz zmiany.
