ℹ️ 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

Aktualizowane na: 10/09/2026