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

Chcesz mieć pełną kontrolę nad tym, jak wyglądają twoje odznaki zaufania? 🎨

Podczas gdy zakładka Design zapewnia obszerne opcje dostosowania, Niestandardowe CSS daje elastyczność do dokonywania zaawansowanych zmian stylizacji, które wykraczają poza standardowe ustawienia.

Niezależnie od tego, czy rafinacja odstępów, dopasowanie ścisłych wytycznych marki, dodanie własnych efektów wizualnych, czy rozwiązanie specyficznych stylizacji konfliktów, CSS Custom zapewnia pełną kontrolę twórczą nad projektem Odznaki zaufania.

⚠️ Zanim zaczniesz

Przed użyciem CSS:

• Upewnij się, że już stworzyłeś Odznakę zaufania.
• Podstawowe zrozumienie CSS lub dostęp do dewelopera.
• Zrozum, że CSS Custom może obejść standardowe ustawienia Design.

💡 Jeśli jeszcze nie stworzyłeś Odznaki Zaufania, zrób ją przed przystąpieniem do tego przewodnika.

🛠️ Krok 1 - Otwórz kartę projektu

Otwórz Hoppy Trust Badges aplikacja i nawigacja do Odznaki zaufania chcesz dostosować.

Następnie:

➡️ Kliknij Projekt Tab.

Przewiń w dół, aż zlokalizujesz Niestandardowe CSS sekcja.

Ta sekcja zawiera wszystkie narzędzia potrzebne do dodawania stylizacji i zarządzania nią.

🎨 Krok 2 - Otwarcie sekcji CSS

Wewnątrz Niestandardowe CSS sekcja znajdziesz:

• Edytor CSS
• A Przewodnik widoku przycisk
• An Zastosuj przycisk
• Wzór CSS dla startera

Szablon startowy zawiera dostępne selektory, które mogą być dostosowane do Twojej Odznaki zaufania.

Ułatwia to rozpoczęcie stylizacji bez konieczności ręcznego sprawdzania elementów sklepowych.

✍️ Krok 3 - Dodaj swój własny CSS

Edytor zawiera kilka wstępnie skonfigurowanych selektorów, które mają na celu specyficzne elementy Odznaki zaufania.

Dostępne Selektory

Pojemnik

Wybór

Opis

.futureblink-trust-badge

Cały pojemnik Odznaka zaufania

Tytuł

Wybór

Opis

.futureblink-trust-badge .fb-title

Główny tekst tytułu

.futureblink-trust-badge.mobile .fb-title

Stylizacja tytułu mobilnego

💡 Do pływania znaczników, selektor tytułu używa .title zamiast .fb-title.

Podpozycja

Wybór

Opis

.futureblink-trust-badge .subheading

Opis

.futureblink-trust-badge.mobile .subheading

Opis mobilny stylizacja

Ikony

Wybór

Opis

.futureblink-trust-badge .icon

Ikony znaczników

.futureblink-trust-badge.mobile .icon

Mobilna stylizacja ikon

Przycisk Call- To- Action

Wybór

Opis

.futureblink-trust-badge .cta-button

Przycisk CTA

.futureblink-trust-badge.mobile .cta-button

Mobilna stylizacja przycisku CTA

Przykład CSS

Aby dodać wyściełanie do pojemnika na odznakę i dostosować tytuł:

.futureblink-trust-badge {
padding: 20px;
}

.futureblink-trust-badge .fb-title {
color: #2c3e50;
font-size: 18px;
}

💡 Możesz dodać dodatkowe selekcje CSS, zapytania medialne, animacje i zasady stylizacji w razie potrzeby.

📱 Krok 4 - Dodanie stylizacji specyficznej dla mobilności

Aby celować w urządzenia mobilne, należy użyć .mobile zmiany wyboru.

Przykład:

.futureblink-trust-badge.mobile .fb-title {
font-size: 14px;
}

Aplikacja automatycznie owija .mobile selektory wewnątrz mobilnego zapytania medialnego podczas renderowania ich na Twoim sklepie.

Jeśli wolisz pisać własne pytania medialne, zostaną one zachowane dokładnie tak, jak zostały wprowadzone.

✅ Krok 5 - Zastosuj CSS

Po dodaniu CSS:

➡️ Kliknij Zastosuj.

Podgląd na żywo aktualizuje się automatycznie, co pozwala na natychmiastowy przegląd stylizacji.

Jeśli chcesz usunąć swój styl użytkownika później:

➡️ Kliknij Reset.

Usuwa CSS i przywraca standardowe ustawienia Design.

👀 Krok 6 - Przegląd podglądu

Po zastosowaniu CSS:

➡️ Przegląd podglądu pulpitu.

➡️ Przejrzyj podgląd Mobile.

Sprawdzić, czy:

• Tekst pojawia się poprawnie.
• Ikony pozostają odpowiednio ustawione.
• Odstęp wygląda na zgodny.
• Przyciski wyświetlają się zgodnie z oczekiwaniami.

Jeżeli wymagane są korekty:

➡️ Uaktualnij CSS.

➡️ Kliknij Zastosuj Znowu.

Podgląd odświeża się automatycznie po każdej zmianie.

💾 Krok 7 - Zapisz i opublikuj

Kiedy będziesz zadowolony z projektu:

➡️ Kliknij Zapisz.

➡️ Kliknij Publikuj.

⚠️ Saving alone nie aktualizuje sklepu.

Odznaka zaufania musi być również opublikowana, zanim klienci zobaczą zmiany.

⚠️ Ważne uwagi

Własne ustawienia standardowe CSS

Własny CSS ma pierwszeństwo przed większością ustawień karty Design.

Jeśli kolor, odstępy lub ustawienie typograficzne wydaje się być ignorowane, prawdopodobnie jest on nadstawiany przez CSS.

Automatyczne! ważne obsługi

Aplikacja automatycznie dodaje !important pierwszeństwo deklaracji CSS przy renderowaniu stylów na stronie internetowej.

Nie musisz dodawać !important ręcznie.

Styling łuskany

Własny CSS jest automatycznie skalowany do konkretnej Odznaki zaufania, która jest edytowana.

Pomaga to zapobiegać konfliktom stylizacji z:

• Inne odznaki zaufania
• Elementy motywu
• Pozostałe elementy składowe storefrontu

Puste selektory są dozwolone

Nie musisz używać każdego selektora podanego w szablonie.

Tylko dodać style do elementów, które chcesz dostosować.

Walidacja CSS

Edytor nie sprawdza składni CSS.

Jeżeli styl nie jest prawidłowo stosowany:

➡️ Sprawdź nazwy wyboru.

➡️ Sprawdź aparat i średniki.

➡️ Przegląd CSS na błędy składni.

❓ Rozwiązywanie problemów

Jeśli style nie pojawiają się poprawnie:

➡️ Potwierdź Zastosuj został kliknięty.

➡️ Weryfikacja Odznaki zaufania została Uratowana oraz Opublikowane.

➡️ Sprawdź, czy nazwy wyboru dokładnie pasują do dostarczonego szablonu.

➡️ Test w oknie przeglądarki Incognito lub Private.

➡️ Odśwież sklep do jasnych stylów cached.

🎉 Wynik końcowy

✅ Twoja Odznaka zaufania może być dostosowana do standardowych ustawień Design.

✅ Znakowanie, odstępy, typografia i stylizacja ikon można precyzyjniej kontrolować.

✅ Desktop i ruchome układy mogą być stylizowane niezależnie.

✅ Niestandardowe style pozostają odizolowane od wybranego Odznaki zaufania.

CSS Custom zapewnia elastyczny sposób tworzenia bardziej polerowanego i brand- konsekwentnego doświadczenia Trust Badge przy jednoczesnym zachowaniu prostoty budynku aplikacji w narzędziach projektowych. ✨

Aktualizowane na: 10/09/2026