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.

Warianty niestandardowe w przypadku urządzeń mobilnych

Podobnie jak w widoku komputerowym, również w widoku dostosowanym pod kątem urządzeń mobilnych masz możliwość umieszczenia Trustbadge w dowolnym miejscu swojego sklepu. Aby to zrobić, użyj jednego z dwóch wariantów niestandardowych: custom lub custom_reviews.

helpcenter_BILD.png

Wariant custom

TB5-custom-trustmark-only_PL.pngreviews-only_PL.png

Wariant custom_reviews (ze znakiem jakości i bez niego)

Z tego artykułu dowiesz się, jak zintegrować niestandardowe warianty Trustbadge w przypadku widoku komputerowego: Jakie opcje wyświetlania Trustbadge® są dostępne i jak mogę zintegrować go z moim sklepem?

Przy pomocy parametru 'responsive' i elementu DIV możesz zintegrować jeden z dwóch wariantów niestandardowych ze sklepem w widoku dostosowanym do urządzeń mobilnych. Wystarczy wykonać poniższe instrukcje.

W ten sposób możesz też umieścić Trustbadge w innym miejscu niż w przypadku prezentacji na ekranie komputera.

Krok 1: Utwórz element DIV

Aby użyć jednego z dwóch wariantów Trustbadge — custom lub custom_reviews — najpierw musisz utworzyć element DIV. W tym celu skopiuj poniższy kod HTML do systemu sklepu i umieść go w miejscu, w którym ma być wyświetlany Trustbadge. Może to być np. nagłówek lub stopka.

<div id="myMobileCustomTrustbadge" style="width:100px;height:50px"></div>

Właściwości width (szerokość) i height (wysokość) umożliwiają dostosowanie rozmiaru Trustbadge. Aby to zrobić, po prostu zamień ich wartości zgodnie z wymaganiami. Zwróć uwagę na oryginalny stosunek szerokości do wysokości Trustbadge wynoszący 2: 1 w przypadku wariantu custom_reviews i 1: 1 dla wariantu custom.

Krok 2: Połącz element DIV z konfiguracją Trustbadge

Aby Trustbadge wyświetlał się w wyznaczonym miejscu, należy połączyć utworzony w kroku pierwszym element DIV z obecną konfiguracją Trustbadge. W tym celu przejdź do konfiguracji Trustbadge i sprawdź, czy parametr 'responsive' jest już uwzględniony w jej kodzie. Jeśli tak, znajdź w tym kodzie następujący wiersz:

'responsive': {'variant': 'floating'},

Gdy już zlokalizujesz w kodzie konfiguracyjnym Trustbadge wspomniany fragment, zastąp go tym wierszem:

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'},
Za pomocą tego fragmentu kodu aktywujesz wariant custom. Jeśli preferujesz wariant custom_reviews, zastąp wartość 'custom' we właściwości 'variant' wartością 'custom_reviews'.

Jeśli nie widzisz parametru 'responsive' w kodzie konfiguracyjnym Trustbadge, konieczne będzie utworzenie go. W tym celu dodaj poniżej nowy wiersz kodu i umieść w nim następującą treść:

_tsConfig = {

Czy ten artykuł był pomocny?

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