> ## 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 dla liczników i baró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 twój licznik lub bar idealnie pasowały do marki sklepu? 🎨

Podczas gdy aplikacja zawiera obszerne kontrole projektu, czasami potrzebujesz dodatkowej elastyczności, aby dostosować konkretne szczegóły stylizacji. W **Niestandardowe CSS** funkcja pozwala na zastosowanie własnych zasad CSS do liczników i pasków dla zaawansowanej wizualnej dostosowania.

Ten przewodnik przechodzi przez wszystko, co musisz wiedzieć o dodawaniu i zarządzaniu CSS Custom dla miejsc odliczania.

---

# **⚠️ Zanim zaczniesz**

Przed użyciem CSS:

*   Upewnij się, że już stworzyłeś licznik czasu lub pasek odliczania.
*   Upewnij się, że masz dostęp do **Projekt** zakładka wewnątrz edytora odliczania.
*   Podstawowe zrozumienie CSS lub dostęp do dewelopera, który może pomóc.

⚠️ **Ważne:**

CSS jest **nie jest dostępny dla Countdown strony checkout**.

Ponieważ Shopify Checkout wykorzystuje bezpieczne ramy rozszerzeń UI, zewnętrzne CSS wtrysk jest ograniczony przez Shopify.

Własny CSS jest w pełni obsługiwany na:

*   Strony produktowe
*   Strony wyładunku
*   Sztaby górne
*   Sztaby denne
*   Strony w koszyku
*   Koparki
*   Umieszczanie poczty elektronicznej

---

# **🛠️ Krok 1 - Otwórz kartę projektu**

Otwórz licznik lub pasek, który chciałbyś dostosować.

Następnie:

➡️ Kliknij **Projekt** Tab.

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

💡 Własny CSS działa na górze istniejących ustawień projektu, szablonów, kolorów i typografii wyboru.

---

# **🎨 Krok 2 - Otwarcie sekcji CSS**

Wnętrze zakładki Design:

➡️ Zlokalizuj **Niestandardowe CSS** karta.

W tej sekcji znajdziesz:

*   Edytor CSS
*   Wzór CSS dla startera
*   An **Zastosuj** przycisk

Szablon startowy zawiera powszechnie używane selektory, co ułatwia dostosowanie odliczania bez konieczności ręcznej identyfikacji nazw klas.

---

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

Edytor zawiera kilka selektorów ready- to- use.

### **Dostępne Selektory**

Wybór

Opis

`.futureblink-countdown-timer`

Cały pojemnik do odliczania

`.futureblink-countdown-timer .title`

Główny tekst tytułu

`.futureblink-countdown-timer .subheading`

Tekst podpozycji

`.futureblink-countdown-timer .cta-button`

Przycisk Call- to- action

`.futureblink-countdown-timer .close-btn`

Zamknij ikonę

---

### **Przykład CSS**

Aby tytuł pogrubiony i zmienić jego kolor:

.futureblink- countdown- timer .title {  
masa: 700;  
kolor: # ff6600;  
¶

💡 Można również dodać własne selektory, zapytania medialne, animacje i dodatkowe zasady CSS w razie potrzeby.

---

# **✅ Krok 4 - Zastosuj CSS**

Po wprowadzeniu CSS:

➡️ Kliknij **Zastosuj**.

Po aktywacji **Zastosuj** zmiana przycisku **Reset**, wskazując, że Twoje style są aktywne.

### **Co dzieje się automatycznie**

Aplikacja automatycznie wykonuje kilka akcji za kulisami:

*   Wstrzykuje CSS do sklepu.
*   Dodaje `!important` w razie potrzeby pierwszeństwo.
*   Skanuje style do bieżącej konfiguracji odliczania.
*   Zapobiega konfliktom stylizacji z innymi odliczeniami.

Pomaga to zapewnić, że CSS działa konsekwentnie w całym sklepie.

---

# **💾 Krok 5 - Zapisz i opublikuj**

Po zastosowaniu CSS:

➡️ Kliknij **Zapisz**.

➡️ Kliknij **Publikuj**.

⚠️ Saving alone nie aktualizuje sklepu.

Odliczanie musi być również opublikowane, zanim klienci mogą zobaczyć zmiany.

---

# **👀 Krok 6 - Weryfikacja zmian**

Po publikacji:

➡️ Otwórz swój sklep.

➡️ Przejdź do strony, na której pojawia się odliczanie.

➡️ Odśwież stronę.

Jeśli zaktualizowane style nie pojawią się natychmiast, wykonaj odświeżanie:

**Okna**

`Ctrl + Shift + R`

**Mac**

`Cmd + Shift + R`

W przypadku konieczności dalszych dostosowań:

➡️ Wróć do redaktora.

➡️ Uaktualnij CSS.

➡️ Kliknij **Zastosuj**, **Zapisz**oraz **Publikuj** Znowu.

---

# **⚠️ Ważne uwagi**

### **Ograniczenie strony wymeldowania**

Własny CSS jest niedostępny w licznikach stron checkout ponieważ ShopifyRozszerzenia UI Checkout działają w bezpiecznym środowisku, które ogranicza niestandardowe wtryskiwanie CSS.

### **Automatyczne! ważne obsługi**

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

Jeśli `!important` jest już obecny, aplikacja unika stosowania go dwa razy.

### **Styling łuskany**

Każdy odliczanie otrzymuje własny, odizolowany zakres stylizacji.

Oznacza to:

✅ Różne obliczenia mogą mieć różne wzory.

✅ Style pozostają odizolowane do wybranego odliczania.

✅ Pozostałe elementy strony pozostają nienaruszone.

### **Opcja resetu**

Kliknięcie **Reset** Tylko usuwa CSS.

Nie wpływa na:

*   Szablony
*   Kolory
*   Typografia
*   Ustawienia projektu
*   Konfiguracja odliczania

### **Przewodnik widoku**

Sekcja CSS Custom zawiera również **Przewodnik widoku** link, który w razie potrzeby zawiera dodatkowe odniesienia do CSS.

---

# **❓ Rozwiązywanie problemów**

Jeśli style nie pojawiają się poprawnie:

➡️ Weryfikacja **Zastosuj** został kliknięty.

➡️ Potwierdź odliczanie zostało **Uratowana** oraz **Opublikowane**.

➡️ Sprawdź, czy selektory dokładnie pasują do podanych nazw klas.

➡️ Test za pomocą okna przeglądarki Incognito lub Private.

➡️ Wykonaj twardy odświeżanie, aby oczyścić style cached.

---

# **🎉 Wynik końcowy**

✅ Twój zegar odliczania lub bar odzwierciedla wymagania stylizacji marki.

✅ Konflikty stylizacji motywów są minimalizowane poprzez automatyczne zarządzanie priorytetem CSS.

✅ Indywidualne liczniki mogą być stylizowane niezależnie.

✅ Style niestandardowe pozostają odizolowane bez wpływu na inne elementy sklepowe.

Własny CSS zapewnia elastyczny sposób do fine- tune projektów odliczania przy zachowaniu reszty konfiguracji proste i łatwe w zarządzaniu. 🚀