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.
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.
Wariant custom
Wariant custom_reviews (ze znakiem jakości i bez niego)
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.
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'},
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 = {