Shoper edycja szablonu. Powinieneś to wiedzieć zanim zaczniesz prace z szablonem Shoper

shoper edycja szablonu
Jak edytować szablon, żeby dostosować go do Twojej marki? Jak wypełnić szablon swoimi grafikami?

Po co edytować szablon Shoper?

Szablony Shoper po wdrożeniu wymagają edycji, żeby dostosować je do Twojej marki.

Szablon musisz wypełnić swoimi grafikami, linkami i informacjami.  

Jak więc będzie wyglądała w Shoper edycja szablonu? 

Możesz zorganizować prace z Twoim nowiuteńkim szablonem, tak żeby:
– niczego nie popsuć,
– osiągnąć cudowne efekty, i przy tym,
– nie zamęczyć się na śmierć (tak, śmierć przez frustrację to prawdziwe zjawisko ;).

Poniżej opowiem Ci jak.

Stary edytor

W panelu masz do wyboru stary edytor i nowy Visual Editor. Aktualnie nadal jeszcze zalecamy edycję w starym edytorze – na razie w Visual Edytorze jeszcze pojawiają się błędy i Shoper cały czas nad tym pracuje

shoper visual editor

Kopia do pracy

Zacznij od stworzenia kopii szablonu (duplikuj szablon) – prace przeprowadzaj na tej nieaktywnej kopii, wtedy nie ma obaw, że coś się popsuje i już tego nie naprawisz.

duplikowanie szablonu shoper

Wygodna praca

Prace najwygodniej jest zorganizować sobie w dwóch kartach przeglądarki – w jednej masz otwarty panel i nanosisz zmiany, a w drugiej karcie masz otwarty podgląd szablonu, i sprawdzasz czy wszystko dobrze wygląda.

Za każdym razem po zapisaniu zmian, musisz odświeżyć kartę z podglądem.

karta z panelem szablonu shoper i karta podglądu

Masowa podmiana grafik

Jeśli przygotowałeś wszystkie grafiki do podmiany, możesz je łatwo podmienić korzystając z menadżera plików:

Dostaniesz się do niego w każdym miejscu, w którym znajdziesz opcję “wstaw”, a następnie ikonkę folderu z lupką:

Najprościej znaleźć tę opcję w karcie “stopka” albo wchodząc w edycję któregoś z modułów.

Pamiętaj, że Twoje pliki muszą mieć takie same nazwy i wymiary, jak pliki, które podmieniasz.

Edycja modułów

Moduły znajdziesz w formie „cegiełek” (w starym edytorze), które łatwo złapiesz i przeciągniesz w różne miejsca w sklepie (w poszczególnych widokach): na stronie głównej, na liście produktów, w szczegółach produktu, koszyku i na blogu.

Łapiąc i przeciągając możesz wybrać miejsce wyświetlania modułu. Na mobilu, znikają boczne kolumny, zostaje tylko środkowe pole. Zwróć więc uwagę, że moduły dodane w tych kolumnach nie wyświetlą się na mobilu.

Żeby edytować moduł, najedź na cegiełkę i wybierz „edytuj”.

Możesz teraz zmieniać teksty, grafiki i linki w każdym z modułów.

Wbudowany slider

Jeśli Twój szablon korzysta z wbudowanego slidera Shoper, to pamiętaj żeby slajdy dodawać zawsze w takich samych wymiarach. Wymiary mogą być dowolne, byleby każdy slajd miał je identyczne.

Inaczej slider automatycznie dostosuje swoją wielkość do największego slajdu. Jak? Doda puste, nieestetyczne, białe przestrzenie na mniejszych slajdach. Dla wielu klientów, to wygląda na jakiś błąd, ale to standardowe działanie slidera.

Jeśli tak się zdarzy, a chciałbyś to poprawić, wystarczy, że dodasz slider od początku, jeszcze raz. Łatwo rozwiążesz ten problem samodzielnie, nie musisz prosić o pomoc twórcy szablonu.

Podgląd

Korzystaj z podglądu szablonu, który możesz włączyć w tych dwóch miejscach: 

zobacz podgląd szablonu shoper
Włączanie podglądu szablonu z opcji

Jeśli będziesz zamiast tego, korzystał z podglądu w tym nowym Visual edytorze, to nie zobaczysz jak naprawdę wyglądają Twoje zmiany, np. dla zmian zależnych od dodatkowego kodu js szablonu najprawdopodobniej wszystko w tym podglądzie będzie porozjeżdżane.

Nie przejmuj się tym, to kwestia Visual edytora.
Klienci zobaczą wszystko tak, jak pokazuje podgląd w starym edytorze.

Podgląd na mobilu

Żeby wygodnie sprawdzić jak Twoje zmiany wyglądają na telefonie, wystarczy, że skorzystasz z opcji w Twojej przeglądarce.

Otwórz podgląd sklepu w karcie przeglądarki. Kliknij prawym przyciskiem myszy, żeby rozwinąć systemowe menu. Wybierz “zbadaj”.

Teraz wystarczy, że znajdziesz opcję przełączania na widok mobilny. 

Włączanie widoku mobilnego szablonu Shoper w przeglądarce

Odświeżanie

Jeśli naniosłeś zmiany, a w podglądzie coś nadal nie wygląda tak jak powinno, to możesz:

1. odświeżyć kartę, w której otwarty jest podgląd (zmiany mogły się nie odświeżyć);

2. sprawdzić, czy na pewno jest to podgląd (podgląd poznasz po tym, że wyświetla się gdzieś cały czas przycisk umożliwiający zamknięcie podglądu: zamknij-poglad-shoper ), a nie strona sklepu (podgląd mógł się zamknąć lub mogłeś pomylić karty);

3. zastosować “twarde odświeżanie” (przytrzymaj klawisz ctrl i kliknij w ikonę odświeżania w przeglądarce, dla Maca: command i odświeżanie). Czasem cache przeglądarki jest tak silne, że tylko twarde odświeżanie, faktycznie odświeża;

4. zamknąć i włączyć podgląd ponownie – czasem przy pracy w kilku kartach, po pewnym czasie podgląd może oszaleć. Wystarczy go wtedy zamknąć i otworzyć ponownie. 

Aktywacja szablonu

Po sprawdzeniu swoich zmian w podglądzie, możesz aktywować szablon. Dopiero teraz zmiany będą widoczne dla klientów. 

aktywacja szablonu shoper

Podobne wpisy