> ## 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 darmowej wysyłki Upsell Bars > ℹ️ **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, aby Twój Bar Free Shipping idealnie pasował do marki sklepu? 🎨 Podczas gdy zakładka Design zawiera szerokie sterowniki stylizacji, **Niestandardowe CSS** zapewnia dodatkową elastyczność dla zaawansowanego dostosowania wizualnego. Niezależnie od tego, czy dostosowujesz typografię, rafinację odstępów, dodawanie animacji, tworzenie specyficznych układów telefonicznych, czy rozwiązywanie specyficznych konfliktów stylowych, CSS Custom daje większą kontrolę nad tym, jak Twój Bar Free Shipping pojawia się w sklepach. --- # **⚠️ Zanim zaczniesz** Przed użyciem CSS: * Upewnij się, że już stworzyłeś konfigurację Free Shipping Upsell. * Upewnij się, że masz dostęp do **Projekt** Tab. * Podstawowe zrozumienie CSS lub dostęp do dewelopera. ⚠️ **Ważne:** Własny CSS jest dostępny na wszystkich obsługiwanych typach lokowania, z wyjątkiem **Strona odprawy** staże. Obsługiwane staże obejmują: * Strona produktu * Strona koszyka * Drawer w koszyku * Baner (górny i dolny) --- # **🛠️ Krok 1 - Otwórz kartę projektu** Otwórz **Hoppy Free Shipping** aplikacja i nawigacja do konfiguracji Free Shipping Upsell chcesz dostosować. Następnie: ➡️ Kliknij **Projekt** Tab. Przewiń w dół, aż zlokalizujesz **Niestandardowe CSS** sekcja. Ta sekcja znajduje się zazwyczaj poniżej ustawień konfiguracji Typografii, Paska Postępu, Przycisków i Upsell. --- # **🎨 Krok 2 - Otwarcie własnego edytora CSS** Wewnątrz **Niestandardowe CSS** sekcja znajdziesz: * Edytor CSS * A **Przewodnik widoku** przycisk * An **Zastosuj** przycisk * Wzór CSS dla startera Szablon zawiera powszechnie używane selektory, które mogą być dostosowane bez konieczności ręcznego sprawdzania elementów storefront. --- # **🎯 Krok 3 - Zrozumienie dostępnych wyboru** Szablon startowy zawiera kilka wybranych elementów, które mają na celu różne elementy Free Shipping Bar. ### **Dostępne Selektory** Wybór Opis `.futureblink-free-shipping` Cały kontener Free Shipping Bar `.futureblink-message` Tekst wiadomości o postępach `.futureblink-icon` Ikona wyświetlana z wiadomością `.futureblink-cta-button` Przycisk Call- to- action `.futureblink-price-text` Zaznaczona cena lub wartość postępu --- ### **Selektory mobilne** W przypadku stylizacji specyficznej dla komórek należy stosować `.mobile` zmienność. Wybór Opis `.futureblink-free-shipping.mobile .futureblink-message` Mobilna wiadomość o postępach `.futureblink-free-shipping.mobile .futureblink-icon` Ikona mobilna `.futureblink-free-shipping.mobile .futureblink-cta-button` Przycisk Mobile CTA `.futureblink-free-shipping.mobile .futureblink-price-text` Mobilna cena / tekst postępu 💡 Wystarczy tylko dostosować selektory istotne dla wymagań projektowych. --- # **✍️ Krok 4 - Dodaj swój własny CSS** Wprowadź swoje zasady CSS w edytorze. ### **Przykład 1 - Dostosuj wiadomość o postępach** `.futureblink-free-shipping .futureblink-message {` `font-size: 18px;` `color: #ff6600;` `}` ### **Przykład 2 - Dostosuj przycisk CTA** `.futureblink-free-shipping .futureblink-cta-button {` `background-color: #000000;` `color: #ffffff;` `border-radius: 20px;` `}` ### **Przykład 3 - Stylizacja specyficzna dla mobilności** `.futureblink-free-shipping.mobile .futureblink-message {` `font-size: 14px;` `}` 💡 Zacznij od małych zmian stylizacji, a następnie rozszerzyć CSS w razie potrzeby. --- # **✅ Krok 5 - Zastosuj CSS** Po wprowadzeniu CSS: ➡️ Kliknij **Zastosuj**. Podgląd aktualizuje się automatycznie, dzięki czemu można natychmiast przeglądać zmiany stylu. 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: ➡️ Przejrzyj podgląd wewnątrz aplikacji. Sprawdzić, czy: * Tekst wyświetla się poprawnie. * Guziki pojawiają się zgodnie z oczekiwaniami. * Ikony są ustawione. * Kolory i odstępy pasują do marki. Jeżeli konieczne są dostosowania: ➡️ 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. Zestaw Free Shipping Upsell musi być również opublikowany, zanim klienci będą mogli zobaczyć zmiany. --- # **⚠️ Ważne uwagi** ### **Automatyczne! ważne obsługi** Kiedy style są renderowane w sklepie, aplikacja automatycznie dodaje `!important` pierwszeństwo deklaracji CSS. Pomaga to zapewnić, że style niestandardowe mają pierwszeństwo nad stylizacji tematu. --- ### **Jeśli style nie pojawiają się** W rzadkich przypadkach, gdzie style tematyczne pozostają dominujące, można ręcznie dodać `!important` wewnątrz redaktora. Przykład: .futureblink- free- shipping .futureblink- message { font- size: 18px! ważne; kolor: # ff6600! ważne; ¶ --- ### **Automatyczne sterowanie mobilne** Każdy selektor `.mobile` zmienność jest automatycznie zawijana wewnątrz mobilnego zapytania mediów podczas renderowania w sklepie. Nie trzeba ręcznie tworzyć punktów zwrotnych dla tych selektorów. --- ### **Ograniczenie strony wymeldowania** Własny CSS nie jest dostępny dla stacjonowania stron wymeldowania, ponieważ Shopify ogranicza niestandardowe wtryskiwanie CSS w środowiskach Checkout. --- ### **Walidacja CSS** Edytor nie sprawdza składni CSS. Jeżeli styl nie jest prawidłowo stosowany: ➡️ Zweryfikuj 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 konfiguracji 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** ✅ Pasek Free Shipping Bar można dostosować ponad standardowe ustawienia Design. ✅ Doświadczenia pulpitu i mobilne mogą być stylizowane niezależnie. ✅ Własny typografia, odstępy, kolory i animacje są w pełni obsługiwane. ✅ Bar Free Shipping może być bardziej dostosowany do marki sklepu. CSS Custom zapewnia dodatkową elastyczność, gdy wbudowane- w kontroli projektu nie są wystarczające, pomagając stworzyć bardziej polerowane i spójne doświadczenie storefront. ✨