Ta strona ma rozszerzoną wersję zawierającą więcej szczegółów.

Aby uzyskać do niej dostęp

Zaloguj się

Sam zmień wygląd lub template swojego sklepu internetowego

W IAI-Shop.com stawiamy na swobodę wyboru. Dlatego zapewniliśmy nie tylko możliwość zamówienia pakietu wdrożeniowego i poprowadzenie wdrożenia pod klucz, ale dla klientów ceniących sobie możliwość wpływania w pełni na template czy sklep, albo chcących samodzielnie decydować o momencie zmian i każdym elemencie, zapewniamy możliwość samodzielnego wprowadzania zmian do swojego sklepu internetowego.

Poniżej scharakteryzowaliśmy 3 sposoby wpływania na wygląd Twojego sklepu, które możesz wykonać. Pominęliśmy kwestię edycji treści poprzez dedykowane moduły do zarządzania podstronami, blogiem, opisami i zdjęciami towarów itp. Niniejsze zmiany dotyczą tylko ogólnej budowy template (reguł wyświetlania) dla sklepu internetowego.

Edycja kodu HTML template w języku Smarty

Język Smarty, jest jednym z najpopularniejszych języków tworzenia template, czyli ogólnego układu strony. Umożliwiamy samodzielne pobranie template sklepu stworzonego przez Webdeveloperów IAI-Shop.com i dowolną modyfikację tych template. Wszystkie treści zwracane są jako tzw. zmienne. Masz możliwość zmiany każdego bajta kodu HTML, dodania własnych plików graficznych i zmian w CSS. Jeżeli nie przeraża Cię edytowanie ogromnych template i kontroli HTML, potrafiąc zapewnić poprawną obsługę responsywności, usability a przy tym generując poprawny kod, ta opcja może być dla Ciebie. Template nie musisz tworzyć od zera. Możesz pobrać isteniejący template i zacząć od niego.

Jeżeli chcesz poprawiać template samodzielnie pod własny projekt, pamiętaj, że możesz zlecić zakodowanie template przez Webdeveloperów IAI na bazie własnego projektu, a po uzyskaniu wstępnie efektu o jaki Ci chodziło, nawet bez proszenia o udostępnienie template, możesz w dowolnym momencie przejąć jego dalszy rozwój.

Pamiętaj jednak, że Webdeveloperzy IAI nie będą poprawiali w razie problemów Twojego template. Opcję tą dedykujemy więc bardzo doświadczonym wdrożeniowcom, którzy znają szczegóły działania IAI-Shop.com, potrafią korzystać z bramek AJAX. Odradzamy ten rodzaj wdrożenia lub modyfikacji klientom, którzy nigdy wcześniej nie zbudowali żadnego sklepu IAI-Shop.com i mają bardzo napięty harmonogram wdrożenia. Zazwyczaj wdrożenie samodzielne, trwa paro-krotnie dłużej niż zlecając pakiet wdrożeniowy lub wdrożenie pod klucz.

Prosty edytor do poprawiania CSS, Tekstów i Grafik

Dla klientów, którzy chcieliby samodzielnie poprawiać drobne elementy tj. style CSS (najczęściej klienci zmieniają kolory, pogrubiają jakiś tekst), teksty zawarte w template, czy podmieniać grafiki, przygotowaliśmy prosty edytor template, nie wymagający biegłej znajomości bramek i nie ingerujący w kod HTML, więc względnie bezpieczny. Jego możliwości są bardzo ograniczone. Zaletą jest to, że zmiany wprowadzone przez Ciebie, są nanoszone na bazę danych zmian i podczas kolejnych zmian kodu HTML wykonywanych przez Webdeveloperów IAI-Shop.com będą uwzglednione. Wszystkie funkcje edycji template są umieszczone w panelu administracyjnym sklepu. Utrzymane są w tej samej konwencji co inne moduły. Dzięki temu praca nad wyglądem sklepu nie wymaga instalacji dodatkowych narzędzi na komputerze i może ją wykonać każda osoba, której przydzielisz konto w panelu administracyjnym.

Zapraszamy do zapoznania się z ilustrowaną instrukcją edycji wyglądu sklepu (dostępna tylko dla zalogowanych):

  • 1 - Obecny wygląd sklepu - przyjmijmy, że Twoim zamiarem jest wyróżnienie listy kategorii oraz formularza kontaktu.
  • 2 - Zaloguj się do swojego panelu administracyjnego sklepu i przejdź do działu <b>MODERACJA > Zmiana, aktualizacja, edycja i tłumaczenie maski</b>.
  • 3 - Dalej znajdziesz sekcję <b>Edycja maski</b> - kliknij link [wybierz].
  • 4 - Spośród dostępnych masek graficznych wybierz tę, którą chcesz zmienić i kliknij <b>[stwórz wersję do edycji]</b>.
  • 5 - Na liście pojawiła się nowa maska. Każda maska możliwa do edycji jest odpowiednio oznaczona. Kliknij na <b>[edytuj]</b>, aby rozpocząć zmiany.
  • 6 - W nowej karcie przeglądarki otworzy się strona Twojego sklepu. W lewym górnym rogu znajdują się opcje związane z nanoszeniem zmian. Jeżeli chcesz zmienić coś na obecnie oglądanej stronie, upewnij się, że edycja jest włączona. Jeżeli chcesz przejść na inną podstronę - wyłącz edycję.
  • 7 - Zmiana wyglądu elementu odbywa się poprzez kliknięcie na niego kursorem przy włączonym trybie edycji. W przykładzie kliknięto na jedną z kategorii w menu.
  • 8 - Otworzy się dodatkowe okno zawierające listę klas CSS i odpowiadających im stylów. Lista obejmuje wszystkie klasy występujące w całym komponencie, czyli w tym przypadku w całym boksie bocznego menu kategorii. Dla ułatwienia style dotyczące klikniętego przed chwilą elementu zostały wyróżnione zielonym tłem. Jeżeli element składa się z zagnieżdżonych znaczników, na przykład A jest wewnątrz DIV, wtedy wyróżnione zostaną style obu elementów.
  • 9 - W naszym przykładzie chcesz zmienić kolor czcionki. Wprowadź nowy kolor w dowolnej notacji dopuszczalnej dla CSS.
  • 10 - Po wpisaniu wszystkich zmian zatwierdź je klikając na <b>Zapisz zmiany</b>. Zmiany w stylach będą widoczne od razu.
  • 11 - Niektóre przeglądarki inaczej interpretują te same style. W zakładce <b>Wyjątki CSS</b> znajdziesz możliwość wprowadzenia odmiennych ustawień przeznaczonych dla niektórych przeglądarek.
  • 12 - Masz dostęp nie tylko do CSS. Możesz zmienić również teksty zaszyte w masce sklepu. W tym celu przejdź do zakładki <b>Literały</b> i wprowadź zmiany. Jeżeli brakuje którejś z zakładek u góry okna, oznacza to, że w tym komponencie nie występują teksty lub grafiki. Zauważ, że masz dostęp do tekstów i grafik w każdej z wersji językowych włączonych w tej masce.
  • 13 - Zmiany w tekstach widoczne są w podglądzie strony od razu po zapisaniu.
  • 14 - Oprócz tekstów i kolorów można oczywiscie wymieniać użyte przy budowie maski pliki graficzne. Dla przyciągnięcia większej uwagi klienta wymień szary przycisk na niebieski. Tak jak wcześniej, zacznij od kliknięcia na zmienianym przycisku.
  • 15 - Kliknięcie na przycisk wywołało znane Ci już okienko ze stylami. Oprócz automatycznego wyróżnienia klikniętego elementu możesz sprawdzić czego dotyczą inne klasy najeżdżając na nie kursorem i obserwując podgląd strony w tle. Przy klasie dotyczącej Twojego przycisku pojawił się nowy element - grupa CSS. Niektóre elementy mają wspólnie ustalone style po to, aby można było jedną operacją zmienić wiele powtarzających się w wielu miejscach sklepu elementów. Przycisk nie ma zdefiniowanych żadnych stylów w swojej klasie, a więc wszystkie ustawienia są zebrane w grupie. Kliknij <b>[edytuj grupę CSS]</b>.
  • 16 - W nowym okienku dotyczącym grupy CSS znajdziesz style i w drugiej zakładce plik graficzny przycisku. Grafika zawiera dwie wersje przycisku - podstawowy wygląd i wygląd po najechaniu kursorem. Zapisz grafikę i przygotuj własną jej wersję.
  • 17 - Wgraj własną grafikę do formularza i zapisz zmiany. Ponieważ przeglądarka zachowała poprzedni wygląd grafiki w pamięci podręcznej, prawdopodobnie nie zobaczysz zmiany od razu w podglądzie strony. Odśwież stronę Ctrl+F5, aby załadować nową wersję grafiki.
  • 18 - Zmiany stylów zebranych w grupy są możliwe nie tylko z poziomu pojedynczego komponentu. Opcja ta widnieje również w boksie w rogu strony. Użyj tej metody jeżeli planujesz masowe zmiany w wyglądzie strony. Dzięki temu z jednego miejsca zmienisz wiele elementów obecnych na różnych podstronach jedną operacją. Możesz w ten sposób szybko zmienić na przykład kolor cen w całym sklepie lub kolor i wyrównanie wszystkich nagłówków podstron sklepu.
  • 19 - Edycja grup CSS to rownież szybki dostęp do większości grafik użytych w masce. W ten sposób łatwo pobierzesz i wymienisz wszystkie przyciski we wszystkich wersjach językowych.
  • 20 - Oprócz zmian w poszczególnych wskazanych przez kliknięcie komponentach, które stanowią fragmenty całego kodu danej podstrony, masz też dostęp do ogólnych stylów związanych z układem całej strony, tłem oraz domyślnymi stylami dla elementów takich jak listy, formularze, tabele, linki.
  • 21 - Po zakończeniu zmian <b>[opuść tryb edycji]</b>. Strona przeładuje się i zobaczysz aktualną maskę swojego sklepu, taką jaką obecnie widzą klienci. Pamiętaj, że wprowadzone przez Ciebie zmiany trzeba jeszcze świadomie opublikować.
  • 22 - Żeby opublikować zmienioną przez siebie maskę w sklepie przejdź z powrotem do swojego panelu i <b>Powróć do listy operacji</b>.
  • 23 - W głównym menu tego działu wybierz <b>Zmiana i aktualizacja maski</b>.
  • 24 - Oznacz na liście nową wersję maski i opublikuj ją przyciskiem. Sprawdź nowy wygląd otwierając stronę swojego sklepu. </br>Uwaga: Raz opublikowana w sklepie maska nie może być dalej zmieniana. Wprowadzenie dalszych zmian wymaga stworzenia kolejnej wersji do edycji.
  • 25 - Gratulujemy! Możesz cieszyć się nowym, samodzielnie zmienionym wyglądem sklepu!

Predefiniowane schematy kolorystyczne standardowych template sklepu i domyślnych szablonów wiadomości e-mail oraz szablów aukcji

Dla klientów, których chcieliby w szybki sposób zmienić wiodący kolor wybranego standardowego template sklepu i jego domyślnych szablonów wiadomości e-mail oraz szablonów aukcji bez konieczności modyfikacji ich kodu przygotowaliśmy dedykowany mechanizm predefiniowanych schematów kolorystycznych sklepu i domyślnych szablonów wiadomości.

Wybrane przykłady gotowych do ustawienia schematów kolorystycznych:

  • Schemat kolorystyczny maski STANDARD sklepu IAI-Shop.com: kolor jasny zielony
  • Schemat kolorystyczny maski STANDARD sklepu IAI-Shop.com: kolor fioletowy
  • Schemat kolorystyczny maski STANDARD sklepu IAI-Shop.com: kolor ciemnoszaro-pomarańczowy
  • Schemat kolorystyczny maski STANDARD sklepu IAI-Shop.com: kolor granatowo-niebieski
  • Schemat kolorystyczny maski STANDARD sklepu IAI-Shop.com: kolor granatowo-żółty

Dodatki HTML lub JavaScript

Część zmian, doświadczeni webmasterzy, mogą uzyskiwać dodając wstawki JavaScript, czyli tzw. Snippets ingerujące w drzewo dom stron. W ten sposób, nie ingerując w template, można uzyskać nawet bardzo zaawansowane rezultaty. Zaletą tego rozwiązania są duże możliwości, przy jednocześnie prostej kontroli rezultatów. Stawiając na takie modyfikacje, musisz wiedzieć, że nie mamy możliwości przetestowania zmian, zwłaszcza do masek STANDARD pod kątem zgodności ich z Twoimi snippetami. Nie odpowiadamy za ewentualne błędy spowodowane takim ich zastosowaniem. Jeżeli coś zmieni się na stronie, możliwe że będziesz musiał wykonać część pracy od nowa.