Według badania przeprowadzonego przez Bitkom 50 procent niemieckich klientów robi zakupy za pośrednictwem urządzeń mobilnych i tendencja ta nadal rośnie. Aby optymalnie przygotować się na ten trend, Trusted Shops oferuje kilka możliwości prezentacji Trustbadge® na urządzeniach mobilnych, które spójnie dopasują się do mobilnego widoku Twojego sklepu internetowego.
W poniższym artykule przedstawiamy różne warianty prezentacji. Ponadto wyjaśniamy, w jaki sposób możesz zintegrować je ze swoim sklepem.
Wariant pływający
W przypadku mniejszych szerokości ekranu, co jest typowe na przykład dla smartfonów i tabletów, Trustbadge standardowo wyświetlany jest w wariancie pływającym. W wariancie pływającym znak jakości jest cały czas widoczny dla Twoich klientów. Nie ma to jednak wpływu na przestrzeń dostępną dla samego sklepu ani nie zajmuje zbyt wiele cennego miejsca w nagłówku. Podczas przewijania Trustbadge znika automatycznie i pojawia się ponownie dopiero wtedy, gdy użytkownik przewinie w górę. Na swoim smartfonie możesz zobaczyć, jak działa ten mobilny wariant w naszym sklepie pokazowym.
W ramach własnej konfiguracji Trustbadge możesz dopasować umiejscowienie i prezentację Trustbadge za pomocą parametru „responsive”. Poniżej wyjaśniamy, co dokładnie należy zrobić.
Dostosowanie położenia wariantu pływającego w poziomie
Wariant pływający Trustbadge będzie domyślnie wyświetlany w lewym dolnym rogu widoku mobilnego. Istnieje również możliwość umiejscowienia Trustbadge centralnie lub w prawym dolnym rogu.
W tym celu najpierw otwórz swoją obecną konfigurację Trustbadge i sprawdź czy parametr „responsive” stanowi część kodu. Jeżeli tak, w konfiguracji Trustbadge powinien znajdować się następujący wiersz kodu:
'responsive': {'variant': 'floating'},
Jeżeli w konfiguracji Trustbadge znajduje się wyżej wspomniany wiersz kodu, zamień go na następujący wiersz:
'responsive': {'variant':'floating', 'position':'right'},
Upewnij się, że do kodu został skopiowany przecinek znajdujący się na końcu wiersza kodu. W przeciwnym razie Trustbadge może się wyświetlać nieprawidłowo.
Jeżeli konfiguracja Trustbadge dotychczas nie zawierała parametru „responsive”, wprowadź go jako uzupełnienie kodu. W tym celu pod wierszem
_tsConfig = {
wprowadź nowy wiersz kodu, wpisując w jego miejsce poniższy wiersz kodu:
'responsive': {'variant':'floating', 'position':'right'},
Wpisując w wierszu kodu odpowiedzialną za umiejscowienie cechę 'right', ulokujesz Trustbadge w prawym dolnym rogu widoku mobilnego. Jeżeli chcesz ustawić Trustbadge na środku dolnego obszaru, w miejsce cechy 'right' wpisz 'center'. Jeżeli zmienisz cechę na 'left', Trustbadge ponownie pojawi się w lewym dolnym rogu.
Dostosowanie położenia wariantu pływającego w pionie
Istnieje również możliwość indywidualnego dostosowania umiejscowienia Trustbadge w pionie. W tym celu najpierw postępuj tak, jak w przypadku poziomego ustawienia, i sprawdź czy konfiguracja Trustbadge zawiera parametr „responsive”.
Następnie uzupełnij lub zamień ten parametr na następujący wiersz kodu:
'responsive': {'variant':'floating', 'position':'right', 'yOffset':'150'},
Upewnij się, że do kodu został skopiowany przecinek znajdujący się na końcu wiersza kodu. W przeciwnym razie Trustbadge może się wyświetlać nieprawidłowo.
Przy pomocy cechy 'yOffset' możesz określić, o ile pikseli w górę chcesz przesunąć Trustbadge. W powyższym wierszu kodu wstępnie ustawiona jest wartość 150 pikseli. Dostosuj tę wartość do indywidualnych potrzeb Twojego sklepu.
W powyższym wierszu kodu ustawienie poziome określone jest jako 'right'. Zatem przy zastosowaniu tego kodu Trustbadge będzie wyświetlany w prawym dolnym rogu. Jeżeli wolisz umiejscowić Trustbadge w lewym dolnym rogu lub na środku, zmień cechę 'right' na 'left' — przesunięcie w lewo — lub 'center' — przesunięcie na środek.
Wyświetlanie gwiazdek oceny w wariancie pływającym
W wariancie pływającym domyślnie wyświetlany jest wyłącznie znak jakości. W widoku mobilnym można dodatkowo wyświetlać Trustbadge razem z gwiazdkami oceny. Jeżeli interesuje Cię takie ustawienie, w parametrze „responsive” zamień wartość 'floating' na 'floating_reviews'.
Jeśli konfiguracja Trustbadge nie zawierała dotychczas parametru „responsive”, pod wierszem
_tsConfig = {
wprowadź nowy wiersz kodu, wpisując w jego miejsce poniższy wiersz kodu:
'responsive': {'variant': 'floating_reviews'},
Upewnij się, że do kodu został skopiowany przecinek znajdujący się na końcu wiersza kodu. W przeciwnym razie Trustbadge może się wyświetlać nieprawidłowo.
Jeżeli chcesz dodatkowo zmienić pozycję Trustbadge, postępuj zgodnie z wyżej podanymi informacjami dotyczącymi ustawiania wariantu pływającego w poziomie i w pionie.
Wariant z paskiem górnym
Oprócz wariantu pływającego Trustbadge może być także wyświetlany jako pasek górny. Prezentowany jest wówczas jako panel wyświetlany ponad nagłówkiem sklepu i zawiera zarówno znak jakości, jak i informacje dotyczące ocen. Taka forma prezentacji była wyświetlana domyślnie do początku marca 2020 roku.
Prezentacja Trustbadge w formie paska górnego
Jeżeli w Twoim sklepie chcesz prezentować Trustbadge w formie paska górnego, w parametrze „responsive” zamień wartość 'floating' na 'topbar'.
Jeśli konfiguracja Trustbadge nie zawierała dotychczas parametru „responsive”, pod wierszem
_tsConfig = {
wprowadź nowy wiersz kodu, wpisując w jego miejsce poniższy wiersz kodu:
'responsive': {'variant': 'topbar'},
Upewnij się, że do kodu został skopiowany przecinek znajdujący się na końcu wiersza kodu. W przeciwnym razie Trustbadge może się wyświetlać nieprawidłowo.
Jako że Trustbadge w wariancie paska górnego zawsze zajmuje całą szerokość ekranu, nie musisz samodzielnie dostosowywać jego położenia.
Pamiętaj, że wsparcie techniczne dla wariantu w formie paska górnego nie będzie w przyszłości dostępne. Wówczas można będzie korzystać jedynie z wariantu pływającego.