Netgraf CMS
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 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.

    3 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.



    4 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.



    5 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.

    6 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.

    7 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?

    8 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.


    Zobacz cennik ⇨

    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.

Dołącz do Newslettera

Bądź na bieżąco

zapisz sie do newslettera

Zdobywaj informacje o nowościach i bądź na bieżąco z naszymi promocjami! Nasz newsletter jest zupełnie bezpłatny i informujemy w nim jedynie o najważniejszych sprawach dot. sprzedaży internetowej.

Kontakt
  • telefon: 799 355 450
facebook youtube status webinar