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

Aktualizowane na: 10/09/2026