Jak mogę dostosować sposób prezentacji Trustbadge® na urządzeniu mobilnym?

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

custom-tb.pngMobile_custom_device_TB.png

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

trustbadge-mobile-topbar_PL.jpg

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.


Czy ten artykuł był pomocny?

Liczba użytkowników, którzy uważają ten artykuł za przydatny: 4 z 5