Wygląd e-sklepu
Moduły w e-sklepie
Wygląd Twojego e-sklepu w Shopelo zbudowany jest z modułów. Proszę zerknąć na poniższy obrazek. Czerwonymi prostokątami zostały zaznaczone moduły które składają się na wygląd strony głównej sklepu.
Jak widać – strona główna tego sklepu składa się z 11 modułów które można dowolnie ustawiać, zmieniać i konfigurować. Możliwości wprost są nieograniczone i ciągle pojawiają się nowe moduły które można wykorzystać w swoim e-sklepie.
Dodanie modułu
Zarządzanie modułami dostępne jest w sekcji Konfiguracje → Konfiguracja wyglądu sklepu.
Kliknij edycja szablonu a zostanie załadowana strona umożliwiająca dodanie nowego modułu. W naszym wypadku – dodamy moduł newsletter.
1. po kliknięciu „edycja szablonu” zostanie załadowana strona umożliwiająca zarządzanie modułami
2. aby dodać moduł newsletter wybierz sekcję „Newsletter”
3. Wybierz jeden z dostępnych modułów. W naszym wypadku wybierzemy moduł drugi.
4. Kliknij raz na moduł drugi a następnie trzymając przycisk na myszce przeciągnij moduł
5. Teraz możesz skonfigurować moduł np. dodać własny tekst, zmienić kolor tła czy wielkość czcionki. W tym celu kliknij raz na przeciągnięty moduł a następnie wybierz pole edycji
6. Dokonaj zmian według własnych upodobań. Wszystkie nanoszone zmiany od razu widoczne są w module lecz nie na stronie Twojego e-sklepu.
7. Gdy jesteś zadowolony z dokonanych zmian kliknij na „Podsumowanie”
8. Kliknij „zapisz i aktywuj projekt”
9. W przeciągu 2 minut dokonane zmiany będą widoczne na stronie Twojego e-sklepu.
Konfiguracja wyglądu produktu na listach
Konfigurując wygląd swojego sklepu w Shopelo masz możliwość ustalenia jak ma wyglądać produkt oraz jakie będą zawarte informacje. Aby skonfigurować wygląd produktu kliknij na ikonę z lewej strony.
Pojawi się sekcja w której z lewej strony zostało przygotowanych kilka wyglądów do wyboru, pośrodku pokazany jest wygląd przykładowych produktów a z prawej strony możliwość konfiguracji danego wyglądu. Wybierając jeden z przygotowanych wyglądów spowodujesz, że Twój produkt może wyglądać w następujący sposób:
Konfiguracja przypisku „dodaj do koszyka”
Po skonfigurowaniu wyglądu produktu masz możliwość skonfigurowania jak ma wyglądać przycisk „dodaj do koszyka”. Aby skonfigurować wygląd przycisku „dodaj do koszyka” kliknij na ikonę z lewej strony.
Pojawi się sekcja w której z lewej strony zostało przygotowanych kilka wyglądów przycisku „dodaj ko koszyka” do wyboru, pośrodku pokazany jest wygląd przykładowych produktów z wybranym przyciskiem „dodaj do koszyka” a z prawej strony możliwość konfiguracji danego wyglądu. Wybierając jeden z przygotowanych wyglądów spowodujesz, że Twój przycisk „dodaj do koszyka” może wyglądać w następujący sposób:
Konfiguracja wyglądu e-sklepu
Sekcja o nazwie Konfiguracja wyglądu sklepu dostępna jest w zakładce Konfiguracje → Konfiguracja wyglądu sklepu. W sekcji tej można zmodyfikować wygląd sklepu, zmienić informacje znajdujące się w nagłówku oraz w stopce strony oraz zmodyfikować informacje o ciasteczkach.
sekcja: Ustawienie wyglądu
Sekcja ta odpowiada za fizyczny wygląd strony internetowej sklepu. W ramach konfiguracji wyglądu dostępne są wstępnie przygotowane wyglądy sklepu które można dowolnie modyfikować pod względem kolorów, modułów i dostępności określonych modułów. Przykład używania tej sekcji dostępny jest w na filmie dostępnym pod adresem https://www.youtube.com/watch?v=MxDJcha72d8
sekcja: Nagłówek / Stopka
Sekcja ta odpowiada za informacje oraz linki dostępne na górze oraz dole sklepu.
Góra sklepu (nagłówek)
Dół sklepu (stopka)
Nagłówek
Informacje oraz linki w nagłówku mogą pojawiać się automatycznie (na podstawie stworzonych kategorii) lub też można utworzyć je ręcznie. Metoda tworzenia linków ręcznie umożliwia pełną kontrolę nad zawartymi informacjami. W naszym przypadku skupimy się na stworzeniu linków w nagłówku strony (góra sklepu) metodą ręczną.
W chwili obecnej sekcja Nagłówek posiada następujące dane
Odpowiada to następującemu wyglądowi na stronie sklepu
Jak widać – link Polecane jest rozwijany i posiada podlink o nazwie Długie.
1. Aby utworzyć nowy link kliknij dodaj
2. W Nazwie kontenera wpisz Promocja a w sekcji link wybierz Produkt, następnie w sekcji Wybierz opcję wybieramy pierwszy produkt (w naszym wypadku: Kolorowe skarpetki || Bułka z masłem | ID: 14)
3. Zaakceptuj wybór klikając Zapisz
4. Na samym dole został stworzony nowy link zgodnie z naszymi ustawieniami.
5. Tak wygląda link na stronie internetowej sklepu.
6. Teraz zmienimy kolejność tak, aby nowo utworzony link „Promocje” był na pierwszym miejscu. W tym celu klikamy na przycisk do przeciągania
7. Ciągle trzymając przycisk zmieniamy pozycję linku „Promocję” na przykład na pierwszą pozycję.
8. Tak wygląda strona sklepu po zmianie pozycji linku.
9. Aby dodać podlink do linku Promocje klikamy na przycisk +
10. W nazwie kontenera podajemy nazwę np. Safari a w sekcji link wybierz Produkt, następnie w sekcji Wybierz opcję wybieramy produkt (w naszym wypadku: Kolorowe skarpetki || Safari | ID: 8)
11. Tak wygląda link Promocje który posiada podlink o nazwie Safari.
12. Tak wygląda cała sekcja na stronie internetowej sklepu.
13. W taki sposób można przypisać konkretny produkt, kategorię, producenta, blog czy też własną stronę np. regulamin promocji.
14. W każdej chwili stworzony link można poprawić np. zmieniając mu nazwę lub skasować.
15. Wszystkie naniesione poprawki mają natychmiastowe odwzorowanie na stronie Twojego e-sklepu.
Stopka
Tworzenie linków w stopce jest analogiczne do tworzenia linków w nagłówku z tym jednak wyjątkiem – że nie można tworzyć podlinków do danego linku. Tak stworzony podlink
nie będzie wyświetlany – pojawi się jedynie informacja z linku głównego. Podobnie jak w nagłówku – w stopce też można przypisać konkretny produkt, kategorię, producenta, blog czy też własną stronę np. regulamin promocji.
sekcja: Ciasteczka
Zgodnie z nowelizacją prawa telekomunikacyjnego – każda witryna która używa plików cookies ma obowiązek informowania o tym użytkowników przeglądających daną stronę internetową czy też e-sklep. Treść obowiązkowego komunikatu o ciasteczkach znajduje się w tej sekcji i można go dowolnie modyfikować zgodnie z własnymi preferencjami.
sekcja: Ikona
Dodając ikonę do swojego sklepu wyróżniasz się spośród konkurencji a dodatkowo – dodana ikona będzie wykorzystywana podczas tworzenia skrótu na telefonie komórkowym po zainstalowaniu aplikacji PWA Twojego sklepu na telefonie komórkowym Twojego klienta. Każdy sklep ma dodaną domyślną ikonę którą można zmienić.
1. Przygotuj obrazek w formacie .png lub .jpg w formacie kwadratu o rozmiarze nie mniejszym niż 512 px na 512 px.
2. Wybierz Konfiguracje → Konfiguracja wyglądu sklepu → Ikona
3. Kliknij Kliknij aby dodać ikonę
4. Nastąpi procedura ładowania obrazka i sprawdzanie jego parametrów.
W przypadku pojawienia się błędu Plik ma niepoprawne wymiary należy sprawdzić, czy przesyłany obrazek jest w formacie kwadratu oraz czy jego rozmiar nie jest mniejszy niż 512 px na 512 px.
5. Gdy wszystkie parametry przesyłanego obrazka będą poprawne – pojawi się on w sekcji Obecna ikona i od tej chwili będzie wykorzystywany jako ikona sklepu.
sekcja: Aplikacja e-sklepu PWA
Od kilku lat odnotowujemy coraz więcej udział procentowy ilości zakupów dokonywanych z wykorzystaniem telefonów komórkowych. Naszą odpowiedzią na ten trend jest aplikacja PWA (Progressive Web App) która jest odpowiednikiem aplikacji instalowanych na telefonie komórkowym. Dzięki oferowanej przez Shopelo aplikacji sklepu PWA klient Twojego sklepu ma możliwość korzystania ze sklepu bez konieczności wpisywania adresu – wystarczy że wybierze ikonkę Twojego sklepu bezpośrednio z poziomu swojego telefonu komórkowego.
Warunkiem uruchomienia aplikacji PWA jest dodanie ikony do e-sklepu oraz aktywnej usługi SSL.
1. Aby uruchomić aplikację PWA wybierz Konfiguracje → Konfiguracja wyglądu sklepu → Aplikacja e-sklepu PWA
2. Włącz aktywność aplikacji
3. Podaj nazwę aplikacji np. nazwa Twojego e-sklepu. Nazwa aplikacji wykorzystywana jest do tworzenia skrótu na telefonie.
4. Podaj krótką nazwę aplikacji.
5. Podaj opis Twojego e-sklepu.
6. Zdefiniuj kolor tła które wykorzystywane jest podczas ładowania aplikacji na telefonie i zaakceptuj go klikając klawisz Zamknij.
7. Zdefiniuj kolor obramowania aplikacji na telefonie komórkowym i zaakceptuj go klikając klawisz Zamknij.
8. Kliknij klawisz Zapisz. Twoja aplikacja PWA jest gotowa i czeka na instalację.
9. Otwórz swój e-sklep telefonem i na samym dole po kilku sekundach powinna pojawić się zachęta do zainstalowania aplikacji.
Slider
W sklepie internetowym ważnym elementem są bannery reklamowe. Dzięki nim można zaprezentować klientowi produkty czy też informacje które są istotne dla naszego sklepu – na przykład informacje o promocjach na dany asortyment.
Do zamieszczania bannerów reklamowych służy moduł Slider który znajduje się w sekcji Konfiguracje → Slider.
W chwili obecnej na naszej przykładowej stronie nie ma uruchomionego bannera reklamowego
My dodamy naszą reklamę informującą o darmowej dostawie przy zamówieniu powyżej 1000 zł
1. Aby dodać banner reklamowy zaloguj się do Panela Administracyjnego.
2. Wejdź w zakładkę Konfiguracje → Slider
3. Włącz opcję Pokazuj slider (okno powinno mieć kolor zielony)
4. W polu Czas wyświetlania ustal przez ile sekund mają być zmieniane bannery reklamowe. Parametr ten jest używany jedynie w przypadku gdy masz uruchomione więcej niż jeden (1) banner reklamowy.
5. Pole Adres wpisz znak /. Jeśli chcesz, aby po kliknięciu na banner reklamowy Twój klient został przeniesiony na konkretną stronę internetową – w polu wpisz adres strony.
6. W polu Zdjęcie kliknij na Wybierz i dodaj swój banner reklamowy.
7. Kliknij Dodaj aby dodać banner reklamowy.
8. Banner reklamowy został dodany.
Tak wygląda zamieszczony banner na stronie sklepu.
Jeśli chcesz wyłączyć wcześniej dodany banner kliknij na przełącznik dostępny w sekcji Status
W każdej chwili masz możliwość zmiany adresu strony na który ma kierować banner reklamowy. W tym celu naciśnij na niebieską ikonę a następnie wpisz nowy adres.
Jeśli chcesz usunąć wcześniej dodany banner reklamowy kliknij na ikonę kosza a zostanie on usunięty.
