> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Odznaki zaufania i ikony - Design & Styling > ℹ️ **Note:** Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia. W **Odznaki zaufania i ikony** sekcja pomaga handlowcom wizualnie zwiększyć ich wiarygodność sklepu za pomocą spersonalizowalnych wskaźników zaufania, takich jak bezpieczne ikony płatności, gwarantowane odznaki, główne punkty dostawy i więcej. Ta sekcja umożliwia pełną kontrolę nad: * Wygląd odznaki * Zachowanie układu * Typografia * Animacje * Stylizacja tła * Reakcja mobilna * Zaawansowane dostosowanie CSS --- # **🎨 Szablon** ## **Co to robi?** Zmienia ogólny motyw wizualny i paletę kolorów swoich odznak. ## **Jak stosować lek** Kliknij kroplę, aby wybrać z presetów takich jak: * **Czarny piątek** * **Minimalne** * **Mięta** * **Zmierzch** Te szablony natychmiast pomóc dopasować markę sklepu i styl wizualny. --- # **👀 Widoczność** ## **Co to robi?** Steruje urządzeniami, które mogą zobaczyć twoje odznaki zaufania. ## **Dostępne opcje** * **Komputer stacjonarny i mobilny** → Pokazuje wszędzie odznaki * **Tylko pulpit** → Ukryte na urządzeniach mobilnych * **Tylko mobilne** → Ukryte na pulpicie urządzenia Pomaga to kupcom tworzyć specyficzne doświadczenia. --- # **Wolna orientacja układu (Desktop & Mobile)** ## **Co to robi?** Określa sposób układania poszczególnych odznak. ## **Dostępne opcje** ### **Poziome** Odznaki pojawiają się bocznie w jednym rzędzie. ### **Pionowe** Odznaki stos jeden poniżej drugiego w układzie kolumny. Oddzielne urządzenia sterujące mogą być dostępne dla układów stacjonarnych i ruchomych. --- # **📱 Zachowanie wyświetlania odznak (tylko mobilne)** ## **Co to robi?** Kontroluje zachowanie odznak na mniejszych ekranach mobilnych, gdy przestrzeń staje się ograniczona. ## **Dostępne opcje** ### **Przewijanie** Klienci mogą poruszać się poziomo, aby zobaczyć wszystkie odznaki w jednym rzędzie. ### **Zawiń** Odznaki automatycznie przenoszą się do następnej linii, aby wszystkie były widoczne razem. --- # **✨ Animacja** ## **Co to robi?** Dodaje animacje wejścia, gdy znaczniki ładują się na stronie. ## **Jak stosować lek** Wybierz styl animacji z zrzutu. Opcje animacji obejmują: * Wsuń się * Pop * Znikaj * I więcej Animacje pomagają przyciągnąć uwagę klientów bez konieczności dodatkowych prac projektowych. --- # **🖼️ Styl tła** ## **Co to robi?** Kontroluje wygląd tła za odcinkiem odznaki. ## **Dostępne opcje** * Pojedynczy kolor * Gradient * Tricolor Gradient * Wzory ## **Dodatkowe dostosowanie** Kupcy mogą również dostosować: * Stopień nachylenia gradientu * Poszczególne kolory * Kody kolorów szesnastkowych * Wygląd wzoru Pomaga to wizualnie wtopić się w projekt sklepu. --- # **📐 Granice i narożniki** ## **Promień rogówki (px)** Steruje jak zaokrąglone narożniki zewnętrzne pojawiają się. * Wyższe wartości → Więcej zaokrąglonych narożników * `0` → Ostre narożniki kwadratowe ## **Rozmiar graniczny (px)** Dostosuje grubość zewnętrznej granicy. ## **Kolor granic** Zmienia kolor linii granicznej. ## **Styl graniczny** Dostępne style mogą obejmować: * Stałe * Dotted * Pokryte * Brak --- # **📏 Odstęp (pulpit vs Mobile)** Odstęp można dostosować oddzielnie dla urządzeń Desktop i Mobile. Dzięki temu układ odznaki pozostaje zrównoważony i reagujący na wszystkie rozmiary ekranu. ## **Odstęp wewnętrzny (wyściełanie)** Kontrola odstępów wewnątrz pojemnika z odznaką. Dostępne wskazówki: * Góra * Dół * Lewo * Racja. Tworzy to przestrzeń pomiędzy treścią a granicami. ## **Odstęp zewnętrzny (margines)** Dodaje odstępy poza blokadą odznaki. Dostępne kontrole: * Najwyższa marża * Margines dolny Przydatne do oddzielania odznak od okolicznych części sklepowych. ## **Odstęp między ikonami** Kontroluje odległość pomiędzy poszczególnymi odznakami / ikonami. --- # **🔷 Ikona Styling** ## **Odznaka / Kształt ikon** ### **Co to robi?** Dodaje dekoracyjne tła za poszczególnymi ikonami. ### **Dostępne opcje** * Brak * Tarcza * Emblem * Koło * Kwadrat --- # **📏 Rozmiar i dostosowanie** ## **Desktop / Mobile Size (px)** Rozmiar ikon sterujących niezależnie dla: * Desktop * Mobile ## **Kolor tła** Zmienia kolor tła za kształtem ikony. ## **Promień rogu** Dostosuje jak zaokrąglone staje się tło ikon. --- # **🚀 Pro Styling (Advanced)** ## **Animacja ikon** Dodaje ciągłe efekty ruchu do ikon. Przykłady mogą obejmować: * Wstrząśnij * Puls * Odbić ## **Animacja ikon Hover** Podrywa animacje, gdy klienci unoszą się nad ikonami. Przykłady mogą obejmować: * Płyń * Wobble * Holograficzny ## **Cień ikony** Dodaje głębokość i efekty warstwowe za pomocą cieni. Przykłady mogą obejmować: * Miękki błysk * Subtelny cień --- # **➖ Separator ikon** ## **Co to robi?** Dodaje linie rozdzielające pomiędzy ikonami poszczególnych identyfikatorów. ## **Jak stosować lek** Włącz **Dodaj separator ikon** Pudełko. Pomaga to stworzyć czystsze odstępy i wizualną separację. --- # **✍️ Typografia (tekst i czcionki)** ## **Wybór czcionki** ### **Co to robi?** Kontroluje styl typograficzny używany do tytułów i podpozycji odznaki. ### **Dostępne opcje** * Użyj swojego Shopify czcionka motywu * Wybierz niestandardowe czcionki * Obsługa czcionek Google Korzystanie z czcionki motywu pomaga utrzymać konsystencję sklepu. --- # **📝 Tytuł i podpozycja Styling** ## **Wielkość (px)** Kontroluje rozmiar tekstu. ## **Kolor** Zmienia kolor tekstu używając: * Wybór koloru * Kod szesnastkowy --- # **📐 Odstęp tekstowy** ## **Co to robi?** Regulacja odstępów pomiędzy wierszami tekstowymi dla lepszej czytelności. Rosnący odstęp może sprawić, że treść będzie czystsza i bardziej premia. --- # **💻 CSS (dla deweloperów)** ## **Zaawansowana funkcja** Jeśli ustawienia built- in nie wystarczą, kupcy mogą dodać w pełni niestandardową stylizację CSS. ## **Dostępne klasy docelowe** ### **Cały pojemnik na odznaki** .futureblink- trust- odznaka ### **Tekst tytułu** .fb- title ### **Tekst podpozycji** .podpozycja ### **Przycisk CTA** Przycisk .cta- --- # **⚡ Zastosowanie CSS** ## **Jak stosować lek** 1. Wklej swój własny CSS do edytora 2. Kliknij **Zastosuj** 3. Podgląd zmian natychmiast --- # **❗ Przekroczenie Shopify Style tematyczne** Czasami Shopify motywy mogą obejść twój styl. Jeśli zmiany CSS nie są prawidłowe, użyj: Ważne! To zmusza twój styl do priorytetu nad stylami tematycznymi. Przykład: Tytuł kolor: czerwony! ważny; ¶ --- # **✅ Wynik końcowy** Po skonfigurowaniu z powodzeniem, Odznaki zaufania i ikony pomagają stworzyć bardziej profesjonalne, wiarygodne i zorientowane na konwersję doświadczenie storefrontu. Z odpowiednim stylizowaniem na miejscu: * ✅ Poprawia wiarygodność sklepu * ✅ Ważniejsze gwarancje stają się bardziej widoczne * ✅ Zwiększenie zaufania klientów * ✅ Znakowanie sklepu jest bardziej polerowane * ✅ Reakcja mobilna poprawia się * ✅ Układy odznaki stają się czystsze i bardziej zorganizowane * ✅ Konsystencja wizualna w sklepach staje się silniejsza Dobrze zaprojektowane identyfikatory zaufania mogą mieć znaczenie