Chcesz mieć pełną kontrolę nad wyglądem paska ogłoszeń? 🎨

Choć wbudowane ustawienia projektowania pokrywają większość potrzeb związanych z personalizacją, funkcja Custom CSS (niestandardowy CSS) pozwala dokładnie dostosować styl poza standardowymi opcjami.

Jest to przydatne dla sprzedawców, którzy chcą precyzyjnie odzwierciedlić wytyczne marki, dostosować odstępy, spersonalizować typografię lub rozwiązać konflikty stylów specyficzne dla danego szablonu.

⚠️ Zanim zaczniesz

Przed użyciem funkcji Custom CSS:

• Upewnij się, że pasek ogłoszeń został już utworzony.
• Miej podstawową znajomość CSS lub dostęp do dewelopera.
• Pamiętaj, że Custom CSS może zastępować standardowe ustawienia projektowania.

ℹ️ Większość sprzedawców nigdy nie potrzebuje Custom CSS. Używaj go tylko wtedy, gdy wbudowane opcje projektowania nie pozwalają uzyskać pożądanego wyglądu.

🛠️ Krok 1 — Otwórz kartę Design (Projektowanie)

Otwórz aplikację Hoppy Announcement Bar i przejdź do paska ogłoszeń, który chcesz dostosować.

Następnie:

➡️ Kliknij kartę Design (Projektowanie).

Przewiń w dół, aż znajdziesz sekcję Custom CSS (niestandardowy CSS).

🎨 Krok 2 — Włącz Custom CSS (niestandardowy CSS)

W sekcji Custom CSS (niestandardowy CSS):

➡️ Kliknij przycisk Apply (Zastosuj).

Po włączeniu pojawi się edytor CSS zawierający wstępnie skonfigurowany szkielet CSS.

Szkielet zawiera wszystkie obsługiwane selektory, co ułatwia kierowanie stylów do różnych elementów paska ogłoszeń bez konieczności ręcznego identyfikowania nazw klas.

✍️ Krok 3 — Dodaj swój kod CSS

Edytor zawiera gotowe selektory dla głównych elementów paska ogłoszeń.

Dostępne selektory

Selektory specyficzne dla urządzeń mobilnych

Aby kierować style wyłącznie na urządzenia mobilne, użyj wariantu .mobile.

Przykłady:

• .futureblink-announcement-bar.mobile .title
• .futureblink-announcement-bar.mobile .cta-button
• .futureblink-announcement-bar.mobile .close-btn

Przykładowy CSS

Aby wyświetlać tytuł wielkimi literami z dodatkowym odstępem:

.futureblink-announcement-bar .title {
text-transform: uppercase;
letter-spacing: 2px;
}

Aby przycisk CTA był na pełną szerokość na urządzeniach mobilnych:

.futureblink-announcement-bar.mobile .cta-button {
width: 100%;
}

💡 W podanych selektorach możesz używać dowolnych prawidłowych właściwości CSS.

👀 Krok 4 — Podgląd zmian

Po wpisaniu kodu CSS:

➡️ Kliknij przycisk Apply (Zastosuj).

Podgląd na żywo aktualizuje się automatycznie, więc możesz od razu przejrzeć zmiany.

Jeśli konieczne są korekty:

➡️ Edytuj CSS bezpośrednio w edytorze.

➡️ Sprawdź zaktualizowany podgląd.

⚙️ Jak działa Custom CSS (niestandardowy CSS)

Aplikacja automatycznie stosuje dodatkowe przetwarzanie, aby zapewnić poprawne działanie stylów.

Automatyczne wstrzykiwanie !important

Wszystkie deklaracje CSS automatycznie otrzymują priorytet !important w witrynie sklepu, aby zapobiec nadpisywaniu zmian przez style szablonu.

Automatyczna obsługa urządzeń mobilnych

Selektory korzystające z wariantu .mobile są automatycznie zawijane w zapytania medialne dla urządzeń mobilnych podczas renderowania w sklepie.

Priorytet nadpisywania projektowania

Custom CSS zazwyczaj ma pierwszeństwo przed standardowymi ustawieniami projektowania skonfigurowanymi w innych miejscach aplikacji.

💾 Krok 5 — Zapisz i opublikuj

Gdy będziesz zadowolony ze stylów:

➡️ Kliknij przycisk Save (Zapisz).

➡️ Kliknij przycisk Publish (Opublikuj).

⚠️ Samo zapisanie nie aktualizuje witryny sklepu.

Konfiguracja musi zostać również opublikowana, zanim klienci zobaczą zmiany.

🔄 Resetuj Custom CSS (niestandardowy CSS)

Jeśli chcesz wrócić do domyślnych ustawień projektowania:

➡️ Otwórz sekcję Custom CSS (niestandardowy CSS).

➡️ Kliknij przycisk Reset (Resetuj).

Spowoduje to usunięcie niestandardowego kodu CSS i przywrócenie kontroli standardowym ustawieniom projektowania.

💡 Przydatne wskazówki

Zacznij od małych zmian

Wprowadzaj zmiany pojedynczo, aby łatwiej było określić, na co wpływa każda reguła CSS.

Korzystaj z podglądu na żywo

Zawsze przeglądaj zmiany w podglądzie przed opublikowaniem.

Testuj układy mobilne

Nawet jeśli kod CSS wygląda poprawnie na komputerze, sprawdź wygląd na urządzeniach mobilnych.

Zachowaj kopię zapasową

W przypadku większych dostosowań CSS rozważ przechowywanie kopii kodu poza aplikacją.

❓ Rozwiązywanie problemów

Jeśli CSS nie jest stosowany zgodnie z oczekiwaniami:

➡️ Sprawdź, czy włączona jest opcja Apply (Zastosuj).

➡️ Upewnij się, że pasek ogłoszeń został zapisany za pomocą przycisku Save (Zapisz) i opublikowany za pomocą przycisku Publish (Opublikuj).

➡️ Sprawdź dokładnie, czy nazwy selektorów zgadzają się z podanymi nazwami klas.

➡️ Przetestuj w oknie incognito, aby wyeliminować problemy z pamięcią podręczną przeglądarki.

W przypadku zaawansowanych potrzeb stylistycznych rozważ współpracę z deweloperem Shopify lub zespołem wsparcia Twojego szablonu.

🎉 Efekt końcowy

✅ Twój pasek ogłoszeń korzysta z w pełni spersonalizowanego stylu.

✅ Konflikty z szablonem są minimalizowane dzięki automatycznemu nadawaniu priorytetu CSS.

✅ Układy mobilne i desktopowe można stylizować niezależnie.

✅ Pasek ogłoszeń można dostosować do wizualnej tożsamości marki z większą precyzją.

Custom CSS (niestandardowy CSS) zapewnia maksymalną elastyczność, gdy standardowe ustawienia projektowania są niewystarczające, pomagając stworzyć bardziej dopracowane i spójne wrażenia w sklepie. 🚀

Aktualizowane na: 01/09/2026