> ## 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). # 🎨 Jak ustawić CSS użytkownika dla populatorów > ℹ️ **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, żeby twoje dzieci idealnie pasowały do marki twojego sklepu? 🎨 Podczas Hoppy Popups zawiera obszerne opcje dostosowania projektu, **Niestandardowe CSS** daje pełną kontrolę nad zaawansowanymi regulacjami stylizacji, które wykraczają poza standardowe ustawienia. Niezależnie od tego, czy rafinujesz typografię, dostosowujesz odstępy, tworzysz unikalne efekty wizualne, czy rozwiązujesz specyficzne konflikty stylowe, CSS Custom pozwala dostosować swoje wyskakiwania dokładnie tak, jak chcesz. --- # **⚠️ Zanim zaczniesz** Przed użyciem CSS: * Upewnij się, że twój program już został stworzony i zapisany. * Podstawowe zrozumienie CSS lub dostęp do dewelopera. * Zrozum, że CSS Custom może obejść standardowe ustawienia Design. 💡 Standardowe opcje stylizacji, takie jak kolory, czcionki i odstępy są już dostępne w zakładce Design. CSS Custom jest przeznaczony do bardziej zaawansowanych wymagań stylizacji. --- # **🛠️ Krok 1 - Otwórz konfigurację popup** Otwórz **Hoppy Popups** aplikacja z Shopify Admin. Następnie: ➡️ Otwórz istniejący program. ➡️ Albo stworzyć nowy program, jeśli jeszcze tego nie zrobiłeś. Przejdź do **Projekt** Tab. Przewiń w dół, aż zlokalizujesz **Niestandardowe CSS** sekcja. --- # **🎨 Krok 2 - Otwarcie sekcji CSS** Wewnątrz **Niestandardowe CSS** sekcja znajdziesz: * Edytor CSS * An **Zastosuj** przycisk * A **Reset** przycisk * Wzór CSS dla startera Szablon zawiera powszechnie używane wyskakujące selekcje, co ułatwia rozpoczęcie dostosowywania wyskakującego bez konieczności ręcznej identyfikacji nazw klas. --- # **✍️ Krok 3 - Dodaj swój własny CSS** Edytor zapewnia kilka gotowych do użycia selektorów do stylizacji wyskakujących elementów. ### **Dostępne Selektory** Wybór Opis `.futureblink-popup` Cały pojemnik wyskakujący `.futureblink-popup .title` Tytuł populacyjny `.futureblink-popup .description` Tekst opisu popupu `.futureblink-popup .cta-button` Przycisk Call- to- action `.futureblink-popup .close-btn` Zamknij przycisk --- ### **Selektory mobilne** W przypadku stylizacji specyficznej dla komórek należy stosować `.mobile` zmienność. Wybór Opis `.futureblink-popup.mobile` Przenośny pojemnik wyskakujący `.futureblink-popup.mobile .title` Tytuł mobilny `.futureblink-popup.mobile .description` Opis mobilny `.futureblink-popup.mobile .cta-button` Przycisk Mobile CTA `.futureblink-popup.mobile .close-btn` mobilny przycisk zamykania --- ### **Przykład CSS** Aby dostosować tytuł i przycisk CTA: `.futureblink-popup .title {` `color: #ff6b6b;` `font-size: 24px;` `}` `.futureblink-popup .cta-button {` `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` `border-radius: 8px;` `}` 💡 Można również dodać dodatkowe selekcje, animacje, zapytania medialne oraz inne obowiązujące zasady CSS w razie potrzeby. --- # **📱 Krok 4 - Dodanie stylizacji specyficznej dla mobilności** Aby stosować style tylko na urządzeniach mobilnych, należy użyć `.mobile` selektory. Przykład: `.futureblink-popup.mobile .title {` `font-size: 18px;` `}` Aplikacja automatycznie owija `.mobile` selektory wewnątrz mobilnego zapytania medialnego podczas renderowania ich na Twoim sklepie. Oznacza to, że nie trzeba ręcznie tworzyć mobilnych punktów granicznych dla tych selektorów. --- # **✅ Krok 5 - Zastosuj CSS** Po dodaniu CSS: ➡️ Kliknij **Zastosuj**. Podgląd aktualizuje się automatycznie, dzięki czemu można natychmiast przeglądać zmiany stylu. ⚠️ Po prostu wklejanie CSS do edytora nie aktywuje go. Musisz kliknąć **Zastosuj** zanim style staną się aktywne. Jeśli chcesz usunąć swój własny styl: ➡️ Kliknij **Reset**. Przywraca domyślny szablon i wyłącza CSS. --- # **👀 Krok 6 - Przegląd podglądu** Po zastosowaniu CSS: ➡️ Przegląd podglądu pulpitu. ➡️ Przejrzyj podgląd Mobile. Sprawdzić, czy: * Tekst wyświetla się poprawnie. * Guziki pozostają wyrównane. * Odstęp wydaje się zgodny. * Efekty wizualne zachowują się zgodnie z oczekiwaniami. Jeżeli konieczne są zmiany: ➡️ Uaktualnij CSS. ➡️ Kliknij **Zastosuj** Znowu. Podgląd odświeża się automatycznie po każdej aktualizacji. --- # **💾 Krok 7 - Zapisz i opublikuj** Kiedy będziesz zadowolony z projektu: ➡️ Kliknij **Zapisz**. ➡️ Kliknij **Publikuj**. ⚠️ Saving alone nie aktualizuje swojego sklepu. Popup musi być również opublikowane, zanim klienci mogą zobaczyć zmiany. --- # **⚠️ Ważne uwagi** ### **Własne ustawienia projektowania CSS** Własny CSS ma pierwszeństwo przed większością standardowych ustawień Design. Jeśli ustawienie projektowe wydaje się być ignorowane, prawdopodobnie jest ono przekraczane przez CSS. --- ### **Obsługa mobilna jest automatyczna** Aplikacja automatycznie konwertuje `.mobile` selektory w reagujące style mobilne. Ułatwia to utrzymanie oddzielnego pulpitu i wzorów mobilnych bez zapisywania niestandardowych zapytań medialnych. --- ### **Styling łuskany** Własny CSS jest automatycznie skanowany do konkretnego wyskakiwania edytowanego. Pomaga to zapobiegać konfliktom stylizacji z: * Inne populacje * Elementy motywu * Pozostała zawartość w sklepach --- ### **Opcja resetu** Kliknięcie **Reset** usuwa tylko CSS. Nie wpływa na: * Ustawienia populacji * Ustawienia projektu * Szablony * Konfiguracja zawartości --- ### **Walidacja CSS** Edytor nie sprawdza składni CSS. Jeśli styl nie pojawia się poprawnie: ➡️ 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 wyskakiwania została **Uratowana** oraz **Opublikowane**. ➡️ Sprawdź, czy selekcja dokładnie pasuje do dostarczonego szablonu. ➡️ Test w oknie przeglądarki Incognito lub Private. ➡️ Odśwież sklep do jasnych stylów cached. --- # **🎉 Wynik końcowy** ✅ Popup można dostosować ponad standardowe ustawienia Design. ✅ Doświadczenia pulpitu i mobilne mogą być stylizowane niezależnie. ✅ Możliwe są zaawansowane efekty wizualne i stylizacja specyficzna dla marki. ✅ Niestandardowe style pozostają odizolowane do wybranego popupu. CSS Custom zapewnia elastyczność do tworzenia bardziej polerowane i brand- konsekwentne wyskakujące doświadczenie przy zachowaniu prostoty budowania aplikacji w narzędziach projektowych. ✨