Wygląd sklepu

Wsparcie techniczne

Na każdym etapie budowy Twojego sklepu staramy się Ci pomóc.

Niniejsze Centrum Pomocy odpowie na większość Twoich pytań związanych z budową sklepu. Możesz również do nas napisać lub zadzwonić* 

W tym artykule:

*wsparcie telefoniczne dostępne od plany ADV.


Wsparcie szablonów i aplikacji

Shoplo udziela pomocy technicznej przy szablonach i aplikacjach, których jesteśmy autorem. Jeśli masz problem z aplikacją lub szablonem innego autora - powinieneś się z nim skontaktować. 


Edycja szablonów

W sklepie Shoplo masz dostęp do edytora HTML. Pamiętaj, że jeśli samodzielnie wprowadzisz zmiany w kodzie szablonu, to traci on gwarancję oraz nasze wsparcie. 

Jeśli chcesz dodać nowe funkcjonalności,, możesz do nas napisać. W zależności od stopnia skomplikowania, wycenimy taką usługę. Po Twojej akceptacji i dokonaniu wpłaty wprowadzimy modyfikacje, a Ty nadal zachowasz wsparcie oraz gwarancję na szablon. 

Favicon

Favicon (ang. favorites icon: ikona ulubionych) to ikona wyświetlana obok Twojej nazwy sklepu, na karcie przeglądarki lub w pasku adresu.

shoplo-favicon-przyklad.png

Pojawi się również w zakładce ulubionych stron.

shoplo-favicon-w-ulubionych2.png

1. Przygotuj plik o wymiarach 16x16 lub 32x32 pikseli w formacie PNG o nazwie favicon.png

2. Przejdź do Wygląd sklepu > Edytor HTML

shoplo-edytor-html2.png

3. Przejdź do sekcji Pozostałe pliki

4. Użyj przycisku Dodaj plik, który jest na samym dole listy i wgraj swój plik przygotowany w kroku pierwszym.

shoplo-favicon-dodaj-plik.png

 

Własna czcionka w szablonie

W sklepie na Shoplo możesz wykorzystać własną czcionkę.

Jeśli potrafisz, możesz ją zainstalować samodzielnie lub zlecić to nam. W tym celu skontaktuj się z nami pod adresem: help@shoplo.com

Jeśli chcesz zmienić czcionkę lub kolor napisów przeczytaj ten artykuł.

Nawigacja w stopce

Wyświetlenie nawigacji w stopce to dwa proste kroki:


Stworzenie nawigacji

Przejdź do Wygląd sklepu > Nawigacja

Możesz skorzystać z już istniejącej nawigacji Stopka. Dodaj do niej odpowiednie linki.

Jeśli wybrany przez Ciebie szablon pozwala na dodanie kilku nawigacji w stopce - dodaj kolejną nawigację.


Podlinkowanie odpowiedniej nawigacji w ustawieniach szablonu

Przejdź do zakładki Wygląd sklepu > Dostosuj szablon

shoplo-dostosuj-szablon.png

Z menu po prawej wybierz Stopka

Upewnij się, że jest zaznaczona opcja Pokaż menu i z rozwijanej listy wybierz, która nawigacja ma zostać wyświetlona.

shoplo-ustawienia-stopki.png

 

Nawigacja / menu główne

Menu główne to linki, które prowadzą do innych, utworzonych wcześniej stron sklepu.

Menu możesz dowolnie edytować, umieszczając w nim linki prowadzące do stron produktów, kategorii, stron informacyjnych czy innych stron internetowych.


Jak wygląda nawigacja po założeniu sklepu?

W każdym nowym sklepie domyślnie znajduje się menu z następującymi elementami:

shoplo-menu-glowne.png

  • Home - prowadzi do strony głównej sklepu
  • Kategorie - prowadzi do strony z listą kategorii, które zostały dodane w sklepie
  • O nas - strona z notką o sklepie
  • Kontakt - strona z formularzem kontaktowym dla klientów

Edycja menu głównego

Zaloguj się do panelu administracyjnego, kliknij Wygląd sklepu > Nawigacja

shoplo-nawigacja.png

Menu główne zmienisz w pierwszej sekcji od góry - Menu główne.

Jeżeli chcesz edytować istniejącą zakładkę, kliknij w symbol edycji:
 shoplo-edycja-nawigacji2.png

W oknie, które się pojawi, możesz zmienić nazwę linka/zakładki oraz wybrać, do jakiej strony ma prowadzić:

shoplo-nawigacja-edycja-linku.png 

W przypadku wyboru produktu, kategorii, kolekcji, producenta lub strony własnej - w kolejnym kroku będziesz mógł wybrać ten element z już dodanych w panelu.

Jeśli chcesz przekierować klienta na inną stronę/ domenę - wybierz Adres URL.

Po wybraniu Lista kategorii - przekierujesz osobę na stronę z listą wszystkich kategorii w Twoim sklepie. 

Zapisz zmiany i gotowe!

Jak dodać link do menu? 

Przejdź do zakładki Wygląd sklepu > Nawigacja i przy odpowiedniej nawigacji kliknij Dodaj link

shoplo-dodawanie-linku.png

Wpisz nazwę linka i zdecyduj, do jakiej strony ma prowadzić:

shoplo-nawigacja-wybor-url.png

Możesz wybrać: 

  • Strona główna - Po kliknięciu w link zostanie wyświetlona strona główna sklepu
  • Produkt - wybierz produkt, który ma zostać wyświetlony
  • Kategoria - wybierz kategorię, która ma być wyświetlona
  • Kolekcja - wybierz kolekcję, która ma być wyświetlona
  • Własne strony - wybierz stronę własną np. kontakt, regulamin, polityka prywatności itd... 
  • Adres url - możesz podać dowolny adres URL. Wykorzystaj jeśli potrzebujesz linkować do innego miejsca niż Twój sklep. Możesz również wpisać # - wtedy taki link będzie nieaktywny.
  • Producent - wybierz producenta, którego produkty mają być wyświetlone
  • Wyszukiwarka 
  • Lista kategorii - wyświetli listę wszystkich kategorii
  • Blog - wybierz Blog, który ma zostać wyświetlony

Zapisz zmiany.


Jak zmienić kolejność linków

Zmień kolejność linków, poprzez ich chwycenie i przeniesienie w odpowiednie miejsce. 

shoplo-kolejnosc-linkow.png

 

 

Edytor HTML

Jeśli znasz HTML, CSS, JS, Smarty i chcesz wprowadzić bardziej zaawansowane zmiany w szablonie, możesz to zrobić poprzez edytor HTML. Znajdziesz go w zakładce Wygląd sklepu.

shoplo-edytor-html2.png

Po lewej stronie są wszystkie pliki. Wybierz ten, który chcesz edytować, wprowadź modyfikacje i zapisz zmiany.

shoplo-edycja-html.png

Pamiętaj, że jeśli samodzielnie modyfikujesz szablon to traci on gwarancję i nasze wsparcie.

Zobacz również naszą dokumentację techniczną

Jak dostosować wygląd szablonu?

Każdy szablon możesz dostosować do potrzeb Twojej marki, nadając mu indywidualny charakter. Możesz zmieniać kolory, czcionki, dodać logo, banery i wprowadzić inne zmiany dotyczące wyglądu. 

Aby dokonać zmian:

Zaloguj się do swojego panelu administracyjnego i wejdź w zakładkę Wygląd sklepu, a następnie kliknij w Dostosuj szablon.

shoplo-dostosuj-szablon.png

Zostaniesz przeniesiony na stronę z podglądem Twojego sklepu. Po prawej stronie znajdziesz pasek ustawień wyglądu sklepu. Zmiany, które wprowadzisz, będą od razu widoczne na podglądzie: 

shoplo-pasek-boczny-w-dostosuj-szablon.png

Klikając w poszczególne ikonki, możesz mi.in. dokonać wyboru kolorów, czcionek, wgrać logo i tło sklepu oraz wprowadzić ustawienia dla stopki, strony i listy produktów.

Na koniec kliknij powrót i zapisz zmiany. 

Edycja nieaktywnego szablonu

Każdy nieaktywny szablon możesz edytować.

Przejdź do Wygląd sklepu > przy szablonie, który chcesz edytować, kliknij trzy kropki i wybierz odpowiednią akcję.

shoplo-edycja-nieaktywnego-szablonu.png

Do wyboru masz:

  • Dostosuj szablon
  • Edytor HTML
  • Pobierz szablon
  • Sklonuj szablon
  • Podgląd
  • Usuń
  • Tłumaczenia

Na nieaktywnych szablonach, możesz wprowadzać takie same zmiany, jak na aktywnym. 

Dzięki temu stworzysz nowy wygląd swojego sklepu, nie przerywając jego działania. 

Podczas pierwszej konfiguracji możesz wykorzystać np. szablon Cover i rozpocząć budowę listy mailingowej jeszcze przed otwarciem sklepu.

 

Jak dodać własny szablon?

W Shoplo dajemy dostęp do kodu HTML.

Oznacza to, że możesz stworzyć całkowicie włąsny szablon. 
Upewnij się, że tworzysz go zgodnie z naszą dokumentacją techniczną: https://docs.shoplo.com/designers

Gotowy szablon wgraj do panelu poprzez wybranie Wygląd sklepu > Wgraj szablon. Następnie go aktywuj, aby stał się widoczny na sklepie. 

Kreator szablonów

Kreator szablonów to narzędzie umożliwiające Ci proste i szybkie stworzenie własnego, idealnie dostosowanego do Twoich potrzeb, szablonu sklepu internetowego.

Poniżej znajdziesz odpowiedzi na najistotniejsze pytania oraz film instruktażowy, dzięki któremu dowiesz się, jak korzystać z kreatora. 

W tym artykule:


Czy kreator jest płatny?

Nie. Kreator udostępniamy naszym klientom bez dodatkowych opłat. Możesz z niego skorzystać zarówno w okresie testowym, jak i po opłaceniu abonamentu. 


Czy mogę wygenerowany przez siebie szablon wykorzystać w innym sklepie niż na Shoplo?

Szablon z kreatora jest objęty prawami autorskimi Shoplo, tym samym nie można wykorzystywać go na innych platformach e-commercowych. Nie można również sprzedawać go, jako własnego.  


Czy mogę stworzyć szablon inspirując się już istniejącym?

Kreator umożliwia odtworzenie wielu konfiguracji - od Ciebie zależy, jakie elementy wykorzystasz  w szablonie. Możesz inspirować się wyglądem innych szablonów lub też polegać tylko na własnej wyobraźni.


Czy Shoplo wspiera wygenerowany szablon?

Oczywiście - szablon wygenerowany poprzez kreator jest przez nas traktowany tak, jak inne szablony naszego autorstwa - wspieramy go poprawiając ewentualne błędy. Na życzenie klienta nasi programiści mogą też wprowadzać w nim modyfikacje (koszt zmian jest określany indywidualnie).


Czy mogę edytować stworzony już szablon?

Gotowy, wygenerowany już szablon nie może zostać ponownie umieszczony w kreatorze i edytowany.

Jednak kreator pamięta nasz ostatni projekt - po ponownym wejściu do kreatora będziesz mógł wybrać, czy powrócić do ostatniego projektu, czy zacząć nowy. Po zapisaniu zmian utworzy się nowy szablon z domyślnymi ustawieniami w zakładce Dostosuj szablon.


Czy mogę robić podgląd na żywo?

Budując szablon w kreatorze możesz zobaczyć jego “podgląd” z przykładowymi zdjęciami. Podgląd na Twoim sklepie, z Twoimi produktami jest możliwy dopiero po zakończeniu prac nad szablonem i zainstalowaniu go w sklepie.


Czy jest limit elementów na stronie?

Nie określiliśmy limitu, musisz jednak pamiętać, że im więcej elementów tym strona będzie się dłużej wczytywać.


Które elementy są obowiązkowe?

W swoim szablonie musisz umieścić nagłówek i stopkę oraz dowolny element z kontenera body


Dlaczego nie mogę edytować stopki i nagłówka na pozostałych stronach?

Są to elementy stałe dla wszystkich stron - są przenoszone ze strony głównej, którą wcześniej zbudowałeś.


Na home i product list jest taka sama nazwa: "grid" - czym różni się ten element na poszczególnych stronach?

Jest to siatka produktów, która wygląda w zasadzie tak samo dla obu tych stron. Na product list (czyli stronie kategorii) możesz dodatkowo po lewej stronie umieścić listę kategorii, czyli menu boczne.


Zobacz film instruktażowy

Szablon sklepu

W tym artykule:


Wybór szablonu

Wybór szablonu to bardzo ważny krok podczas budowy Twojego sklepu.  

W panelu kliknij Wygląd sklepu > Więcej szablonów lub przejdź bezpośrednio do galerii szablonów

shoplo-szablony.png

Znajdziesz tutaj dziesiątki pięknych, funkcjonalnych i gotowych szablonów. Większość z nich jest darmowa. Wystarczy zainstalować na sklepie i gotowe. 

Przy każdym szablonie zobaczysz jego: nazwę, cenę oraz możliwość podglądu i sprawdzenia szczegółów na temat tego szablonu. 

shoplo-szczegoly-szablonu.png

Po kliknięciu w szczegóły zobaczysz opis szablonu, możliwość podejrzenia sklepu demo oraz informacje o autorze. Shoplo nie wspiera szablonów innych autorów.

shoplo-opis-szablonu.png

Wybór szablonu to kwestia indywidualnych upodobań. Wybierz ten, który najbardziej Ci odpowiada. Zawsze możesz zainstalować kilka i sprawdzić jak Twój sklep będzie z nimi wyglądał. 


Dodanie szablonu do Twojego sklepu

Jeśli jesteś zdecydowany na szablon, kliknij Wybieram ten szablon. W ten sposób zainstalujesz go na swoim sklepie.

shoplo-wybor-szablonu.png

Znajdziesz go w zakładce wygląd sklepu, w sekcji Zainstalowane szablony.

shoplo-zainstalowane-szablony.png


Jak aktywować szablon?

Każdy szablon po zainstalowaniu jest nieaktywny. Jeśli chcesz by był widoczny dla Twoich klientów kliknij Aktywny. (Wygląd sklepu > Zainstalowane szablony > Aktywny

Jeśli z jakiś powodów, nie chcesz od razu aktywować nowego szablony, a chcesz go dostosować - sprawdź nasz artykuł o edycji nieaktywnych szablonów

 

 

 

Jakie elementy wpływają na wygląd?

Na wygląd Twojego sklepu składa się kilka elementów:  


Szablon

shoplo-szablony.png

W Shoplo masz do dyspozycji dziesiątki pięknych i darmowych szablonów. Wybierz jeden i zainstaluj go na sklepie. Jeśli jednak, to jest dla Ciebie za mało z jakiś powodów, to możesz stworzyć swój własny za pomocą kreatora. Wystarczy, że przeciągniesz odpowiednie elementy. Nie musisz nic programować!

Przejdź do kreatora 


Nawigacja 

To menu główne na stronie. Dzięki niej Twoi klienci mogą z łatwością poruszać się po Twoim sklepie. 

Shoplo-nawigacja.png

Dowiedz się więcej... 


Banery 

To pojedyncze zdjęcia lub slajder ze zdjęciami. Dzięki nim pokażesz najnowszą kolekcję, poinformujesz klientów o promocjach i wyprzedażach. Każde zdjęcie w banerze może prowadzić do innego miejsca w Twoim sklepie.

shoplo-banery.png

Dowiedz się więcej...


Produkty ze zdjęciami.

Lista produktów, które nie ma zdjęć, będzie wyglądać źle. Zadbaj o ich jakość. Jeśli potrzebujesz zatrudnij profesjonalnego fotografa. Postaraj się, by zachęcały one do zakupu Twojego towaru.

shoplo-produkty.png

Rozwijane menu

W nawigacji głównej możesz stworzyć rozwijane menu. 

Przejdź do Wygląd sklepu > Nawigacja.

Wykonaj cztery proste kroki:

1. W nawigacji głównej dodaj link, który ma być rozwijany

Wpisz nazwę np. Kategorie.
Jeśli chcesz, by ten link był nieklikalny, wybierz w polu URL: "Adres URL" i wpisz "#"

shoplo-dodawanie-linka-rozwijane-menu.png

2. Stwórz drugą nawigację o dokładnej takiej samej nazwie jak link, który utworzyłeś przed chwilą. 

shoplo-dodaj-druga-nawigacje.png

3. Dodaj do utworzonej nawigacji odpowiednie linki. Będą one wyświetlane jako zawartość rozwijanego menu. 

shoplo-linki-w-menu.png

4. Sprawdź jak wygląda Twoje rozwijane menu:

shoplo-gotowe-rozwijane-menu.png

 

 

Jak zmienić mapę i zdjęcia na stronie kontaktowej?

Na stronie z kontaktem możesz zmienić mapę oraz zdjęcia. 

Mapę zmienisz w dwóch prostych krokach:

Zdjęcia:


Jak wygenerować mapę?

Przejdź do strony maps.google.pl

W lewym górnym narożniku podaj swój adres i go wyszukaj.

Następnie kliknij udostępnij. 

shoplo-mapa-adres.png

Następnie wybierz Umieść mapę i skopiuj link

shoplo-mapa-link.png

Teraz umieść ten kod np. na stronie z kontaktem.


Jak umieścić mapę np. na stronie z kontaktem?

Przejdź do Strony i blogi > Strony i wybierz stronę Kontakt. Jeśli takiej nie masz, możesz utworzyć ją zgodnie z tym artykułem.

Następnie podczas edycji treści strony wybierz Edytor HTML (<>) 

shoplo-mapa-edytor-html.png

Jeśli na tej stronie była mapa - znajdź jej kod:

shoplo-mapa-kod.png

Usuń stary kod i wklej nowy. Zapisz zmiany.


Podmiana zdjęć na stronie kontakt

Przejdź do Strony i Blogi > Strony > Kontakt

Usuń wybrane zdjęcia. Dodaj nowe, klikając w odpowiednią ikonę. 

Banery

Dzięki banerom możesz poinformować swoich klientów o nowych produktach, promocjach czy wyprzedażach oraz bezpośrednio skierować ich na odpowiednie podstrony w Twoim sklepie.

W tym artykule dowiesz się:


Jakie są rodzaje banerów?

Banerem może być:

  • pojedyncze zdjęcie
  • grupa zdjęć wyświetlanych obok siebie
  • slajder - zmieniające się zdjęcia.

Odsłona to pojedyncze zdjęcie w banerze. 


Jak dodać banery

Przejdź do Wygląd sklepu > Dostosuj szablon.

W miejscu, gdzie możesz dodać banery zobaczysz ikonę zdjęcia oraz komunikat Kliknij tutaj, aby dodać baner

shoplo-dodaj-baner.png

Kliknij. Zobaczysz następujący komunikat:

shoplo-wybierz-zdjecie.png

Następnie wybierz zdjęcia z dysku lub przeciągnij nad wyznaczony obszar. Pamiętaj, by po dodaniu zdjęć zapisać zmiany. 


Jak edytować banery 

Zaraz po dodaniu zdjęć lub jeśli wrócisz do edycji banera zobaczysz trzy zakładki:

shoplo-zakladki.png

Ogólne

Te ustawienia są dostępne tylko dla banerów, które są slajderami. Dotyczą one wszystkich odsłon (zdjęć) jednocześnie.

sgoplo-banery-zakladka-ogolne.png

Wybierz czy zdjęcia mają być automatycznie przewijane, ustaw efekt podczas zmiany na kolejne odsłony banera oraz wybierz czas, po ilu sekundach chcesz pokazać kolejne zdjęcie. 

Możesz też dodać strzałki, by ułatwić ręczne przewijanie do kolejnych odsłon.

Wygląd

W tej zakładce możesz dodać napisy na zdjęciu. Podaj tytuł, opis, określ ich kolor, rozmiar i położenie względem zdjęcia.

Pamiętaj, że dla każdego zdjęcia możesz je edytować indywidualnie.

shoplo-banery-zakladka-wyglad.png

Zawartość

Określ, gdzie klient ma być przeniesiony po kliknięciu w wybrane zdjęcie oraz opcjonalnie dodaj parametr ALT.

shoplo-banery-zakladka-zawartosc.png

Nie znalazłeś tego, co szukasz? Skontaktuj się z nami