Loader image

Jak stworzyć sklep internetowy na wzór Modimo.sellingo.pl

  • Jak stworzyć sklep internetowy na wzór Modimo.sellingo.pl
    Szablon graficzny Modimo

    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.


    Zobacz demo: https://modimo.sellingo.pl/

    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.

    Pobierz paczkę edytowalnych banerów ⇨

    Znajdziesz w niej następujące banery o podanych niżej wymiarach:

    Baner 1, 1340x550
    Baner 2-1, 425x96
    Baner 2-2, 425x96
    Baner 2-3, 425x96
    Baner 3-1, 425x765
    Baner 3-2, 425x765
    Baner 3-3, 425x765
    Baner 5, 1340x806
    Baner 6-1, 645x435
    Baner 6-2, 645x435
    Baner 7-1, 645x435
    Baner 7-2, 645x435
    Baner 8-1, 645x138
    Baner 8-2, 645x138

    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:

    .m-menu-1 .m-menu-1__list {
    display: flex;
    justify-content: center;
    }


    Zapisz zmiany.

    8 Zmień kolejność innych elementów

    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.
    Zobacz jak dodasz kategorie ⇨ Jak dodać nową kategorię w sklepie?




    Nowości
    Jako 4 element na stronie Modimo.sellingo.pl pojawiają się nowości, czyli niedawno dodane produkty do sklepu. Zobacz, jak oznaczyć produkt jako nowość ⇨

    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.



      








    POWIĄZANE ARTYKUŁY:

    Zobacz jak skonfigurujesz wygląd sklepu
    Jak skonfigurować wygląd sklepu Sellingo?

    Zobacz jak stworzysz sklep internetowy na skórce Harmony
    Jak stworzyć sklep internetowy na wzór Harmony.sellingo.pl

    Zobacz jak stworzysz sklep internetowy na skórce Rustical
    Jak stworzyć sklep internetowy na wzór Rustical.sellingo.pl?

    Zobacz jak stworzysz sklep internetowy na skórce Patio
    Jak stworzyć sklep internetowy na wzór Patio.sellingo.pl

    Oceń tę informację:

    - +

Nie znalazłeś odpowiedzi na swoje pytanie?

skontaktuj się z nami

Biuro obsługi Klienta jest czynne od poniedziałku do piątku w godzinach od 8 do 16.


Zaznacz wymagane pole
Administratorem Twoich danych osobowych jest Grupa eSprzedaż Łukasz Sadłowski, Netgraf [rozwiń] z siedzibą w Warszawie 04-607, ul. Trawiasta 58. Twoje dane osobowe będą przetwarzane w celu wykonania umowy zawartej z Tobą, w tym do umożliwienia świadczenia usług drogą elektroniczną oraz pełnego korzystania z usług eSprzedaż. Gwarantujemy spełnienie wszystkich Twoich praw wynikających z ogólnego rozporządzenia o ochronie danych, tj. prawo dostępu, sprostowania oraz usunięcia Twoich danych, ograniczenia ich przetwarzania, prawo do ich przenoszenia, niepodlegania zautomatyzowanemu podejmowaniu decyzji, w tym profilowaniu, a także prawo wyrażenia sprzeciwu wobec przetwarzania Twoich danych osobowych. Sprzeciw możesz wnieść począwszy od 25 maja 2018 roku (więcej na temat przetwarzania Twoich danych osobowych znajdziesz tutaj - https://esprzedaz.com/dane-osobowe).